MenuButton 菜单按钮

菜单按钮用于显示隐藏菜单。

前置条件

在react项目入口文件中引入样式，默认为src/main.tsx。

import 'ono-react-element/dist/style/MenuButton.css'

基础用法

import { MenuButton } from 'ono-react-element'

function App() {
  return (
    <div style={{ width: '100%' }}>
      <MenuButton />
    </div>
  )
}

export default App;

多个单选框用法

import { MenuButton } from 'ono-react-element'
import { useState } from 'react'

function App() {
  const [open, setOpen] = useState(false)

  return (
    <div style={{ width: '100%' }}>
      <MenuButton
        width="80px"
        lineColor="#333"
        backgroundColor="pink"
        active={open}
        onchange={setOpen}
      />
    </div>
  )
}

export default App;

API

通用属性参考：通用属性

参数	说明	类型	默认值	是否必填
width	按钮宽度	string|number	40	否
lineColor	按钮横线颜色	string	#f5f5f5	否
backgroundColor	按钮背景颜色	string	#342A7C	否
duration	菜单展开动画时长，单位毫秒	number	400	否
active	是否展开菜单	boolean	false	否
onchange	菜单展开状态改变时触发	(bl: boolean) => void	() => {}	否