Tabs

Tabs is a component that displays a list of tabs.

Tabs 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.Tabs
  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.Tabs
  items={[
    { value: 'all', label: '全部视频' },
    { value: 'personal', label: '个人视频' },
    { value: 'mutual', label: '互选视频' },
  ]}
  value={value}
  onChange={(_, value) => setValue(value)}
  gap={28}
  itemStyle={{ paddingBottom: '15px', fontWeight: 400, fontSize: '13px', lineHeight: '20px' }}
  indicatorStyle={{ borderRadius: '0px' }}
/>

API

Props	Description	Type	Default
indicatorClassName	The class name of the indicator	string	""
indicatorStyle	The style of the indicator	React.CSSProperties	{}

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