Pretty segmented react component used in ant.design and antv.vision.
https://react-component.github.io/segmented/
import segmented from 'rc-segmented'; import 'rc-segmented/assets/index.css'; // import 'rc-segmented/asssets/index.less'; import { render } from 'react-dom'; render( <segmented columns={[ { icon: ( <img src="https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg" /> ), title: '语雀', url: 'https://yuque.com', description: '知识创作与分享工具', openExternal: true, }, ]} bottom="Made with ❤️ by AFX" />, mountNode, );| Property | Type | Default | Description |
|---|---|---|---|
| prefixCls | string | rc-segmented | |
| className | string | '' | additional class name of segmented |
| style | React.CSSProperties | style properties of segmented | |
| columns | Column Array | [] | columns data inside segmented |
| bottom | ReactNode | extra bottom area beneath segmented columns | |
| theme | 'light' | 'dark' | 'dark' | preset theme of segmented |
| backgroundColor | string | '#000' | background color of segmented |
| columnLayout | 'space-around' or 'space-between' | 'space-around' | justify-content value of columns element |
| maxColumnsPerRow | number | - | max count of columns for each row |
| Property | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | icon that before column title | |
| title | ReactNode | title of column | |
| items | Item Array | [] | items data inside each column |
| className | string | '' | additional class name of segmented |
| style | React.CSSProperties | style properties of segmented |
| Property | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | icon that before column title | |
| title | ReactNode | title of column | |
| description | ReactNode | description of column, come after title | |
| url | string | link url of item title | |
| openExternal | boolean | false | link target would be _blank if openExternal is ture |
| className | string | '' | additional class name of segmented |
| style | React.CSSProperties | style properties of segmented | |
| LinkComponent | React.ReactType | 'a' | the link element to render item |
npm install npm start rc-segmented is released under the MIT license.