Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamalhassouni/semantic-multi-cascader
A multiple cascader component for semantic ui
https://github.com/jamalhassouni/semantic-multi-cascader
Last synced: 27 days ago
JSON representation
A multiple cascader component for semantic ui
- Host: GitHub
- URL: https://github.com/jamalhassouni/semantic-multi-cascader
- Owner: jamalhassouni
- License: mit
- Created: 2022-02-09T09:54:15.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-19T14:23:31.000Z (almost 3 years ago)
- Last Synced: 2024-12-30T19:39:22.866Z (about 1 month ago)
- Language: JavaScript
- Size: 577 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# semantic-multi-cascader
 
[](https://www.npmjs.com/package/semantic-multi-cascader)
A multiple cascader component for semantic
[](https://npmjs.org/package/semantic-multi-cascader)
## How to use?
```shell
npm install semantic-multi-cascader
```
or
```shell
yarn add semantic-multi-cascader
```
```js
import MultiCascader from "semantic-multi-cascader";
import "semantic-multi-cascader/dist/semantic-multi-cascader.min.css";
const [value, setValue] = React.useState([]);
const options = [
{ text: "CSS", value: "css" },
{ text: "Graphic Design", value: "design" },
{ text: "HTML", value: "html" },
{
text: "Javascript Frameworks",
value: "javascript frameworks",
children: [
{
text: "Angular ",
value: "angular ",
children: [
{ text: "Angular v1 ", value: "angular v1 " },
{ text: "Angular v2 ", value: "angular v2 " },
],
},
{ text: "React js ", value: "React js" },
{ text: "Vue js ", value: "Vue js" },
{ text: "Ember js ", value: "Ember js" },
],
},
];
return (
)
```
### Props
| Props | Type | Description |
| ------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | string[] | Selected value |
| options | TreeNode[] (required) | Cascader options TreeNode see [Options Props](#options-props) |
| allowClear | boolean (optional) | Whether allow clear |
| placeholder | string (required) | The input placeholder |
| onChange | (newVal) => void (required) | Callback when finishing value select |
| selectAll | boolean (optional) | Whether allow select all |
| isSingle | boolean (optional) | Enable Single Selection |
| className | string (optional) | The additional css class |
| cancelBtnClass | string (optional) | The additional css class for cancel button |
| confirmBtnClass | string (optional) | The additional css class for ok button |
| style | React.CSSProperties (optional) | The additional style |
| disabled | boolean (optional) | Whether disabled select |
| okText | string (optional) | The text of the Confirm button |
| cancelText | string (optional) | The text of the Cancel button |
| selectAllText | string (optional) | The text of the SelectAll radio |
| maxTagCount | number \| responsive (optional) | Max tag count to show. responsive will cost render performance |
### Options Props
| Props | Type | Description |
| ------------------- | ----------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| text | string (required) | Displayed text |
| value | string (required) | Selected value |
| children? | TreeNode (optional) | Nested children (same options props ) |
| isLeaf? | boolean (optional) | Tell component this node is a leaf node |
## Contributing
The people who contribute to semantic-multi-cascader do so for the love of open source, our users and ecosystem, and most importantly, pushing the web forward together.Developers like you can help by contributing to rich and vibrant documentation, issuing pull requests to help us cover niche use cases, and to help sustain what you love about semantic-multi-cascader. Anybody can help by doing any of the following: use semantic-multi-cascader in projects,Contribute to the core repository.
All pull requests are welcome !
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## License
semantic-multi-cascader uses the MIT license. See [LICENSE](LICENSE.md) for more details.