Divider

Divider is a component that displays a list of tabs separated by a divider.

Divider provides an animation effect based on clip-path. So if you want to add an image or icon, it is important to use svg rather than img.

Basic Usage

items prop for basic usage:

全部视频

个人视频

互选视频

全部视频

个人视频

互选视频


import Springen from 'springen';

const [value, setValue] = useState('all');

<Springen.Divider
  items={[
    { value: 'all', label: '全部视频' },
    { value: 'personal', label: '个人视频' },
    { value: 'mutual', label: '互选视频' },
  ]}
  value={value}
  onChange={(_, value) => setValue(value)}
/>

Customize Each Item

itemClassName, itemStyle, activeItemClassName & activeItemStyle prop can be string/React.CSSProperties or function:

全部视频

个人视频

互选视频

全部视频

个人视频

互选视频


import Springen from 'springen';

const [value, setValue] = useState('all');

<Springen.Divider
  items={[
    { value: 'all', label: '全部视频' },
    { value: 'personal', label: '个人视频' },
    { value: 'mutual', label: '互选视频' },
  ]}
  value={value}
  onChange={(_, value) => setValue(value)}
  itemStyle={(_, index) => ({
    fontSize: 16 - index * 2,
  })}
  activeItemStyle={{
    textDecoration: 'underline',
    textUnderlineOffset: 2,
  }}
  dividerStyle={{ background: 'transparent' }}
/>

API

Props	Description	Type	Default
dividerClassName	The className of the divider	string	undefined
dividerStyle	The style of the divider	React.CSSProperties	undefined

Common API (Tabs, ButtonGroup, Vertical, Divider, Tag)

Props	Description	Type	Default
gap	The gap between the items	number	differs from component to component
activeColor	The color of the active item	string	var(--springen-active-color)
color	The color of the item	string	differs from component to component
items	The items of the component	SpringenItem[]	undefined
value	The value of the component	string	undefined
onChange	The onChange of the component	(e: React.MouseEvent<HTMLDivElement>, value: T) => void	undefined
itemClassName	The className of the item	string \| ((item: SpringenItem<T>, index: number) => string)	undefined
itemStyle	The style of the item	React.CSSProperties \| ((item: SpringenItem<T>, index: number) => React.CSSProperties)	undefined
activeItemClassName	The className of the active item	string \| ((item: SpringenItem<T>, index: number) => string)	undefined
activeItemStyle	The style of the active item	React.CSSProperties \| ((item: SpringenItem<T>, index: number) => React.CSSProperties)	undefined