Mui-Tree-Selects

使用 Mui Tree 搭配 checkbox 實現樹狀多選單

install

npm

npm install mui-tree-selects

yarn

yarn add mui-tree-selects

Props

props	功能
iconDirection	調整按鈕位置
collapseIcon	收合時的 icon
expandIco	展開時的 icon
treeData	樹狀資料
selectNode	已選擇的節點
setSelectNode	選取節點的 function (???)
iconReverse	icon 顯示在後方，預設為 false => UIUX 怪怪的
checkboxColor	checkbox 顏色，可自定義 => (border 可調整??)
expanded	可點擊的節點 (使用者自控) => 待補
wrapperBorder	最外層的 border 樣式

有想加的 props 都歡迎發 PR

treeData 格式

export type TreeData = {
  name: string
  id: string
  parent?: string
  children?: TreeData[]
}

使用

import React from 'react'

import { MuiTreeSelect } from 'mui-tree-selects'

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import ChevronRightIcon from '@mui/icons-material/ChevronRight'

import data from './fakeData.json'

const App = () => {
  return (
    <MuiTreeSelect
      treeData={data}
      collapseIcon={<ExpandMoreIcon />}
      expandIcon={<ChevronRightIcon />}
      iconReverse={true}
    />
  )
}

export default App