Skip to content

react-component/segmented

Repository files navigation

rc-segmented 🐾

NPM version npm download dumi build status Codecov Dependencies DevDependencies bundle size

Pretty segmented react component used in ant.design and antv.vision.

Live Demo

https://react-component.github.io/segmented/

Install

rc-segmented

Usage

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,
);

API

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

Column

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

Column Item

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

Development

npm install
npm start

License

rc-segmented is released under the MIT license.