Springen

Tag

Tag is a component that displays a list of tags.

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.Tag
  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:

分日数据
累计数据
分日数据
累计数据
阅读量
532
量
532
量
532
量
532
量
532
阅读量
532
量
532
量
532
量
532
量
532
import Springen from 'springen';


const [value, setValue] = useState('阅读量');


<Springen.Tag
  style={{ width: '100%' }}
  items={[
    {
      value: '阅读量',
      label: (item, index, active) => (
        <>
          <div
            className={`text-sm leading-[22px] ${active ? 'opacity-80 font-semibold' : 'text-[#33373D]/58'}`}
          >
            阅读量
          </div>
          <div className={`font-semibold text-[20px] leading-[28px] ${active ? '' : 'text-[#000]'}`}>532</div>
        </>
      ),
    },
    {
      value: '点赞量',
      label: (item, index, active) => (
        <>
          <div
            className={`flex items-center gap-px text-sm leading-[22px] ${
              active ? 'opacity-80 font-semibold' : 'text-[#33373D]/58'
            }`}
          >
            <svg width="17" height="22" viewBox="0 0 17 22" fill="none">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M10.6362 7.53148L10.5181 9.36977H13.1907C14.0886 9.36977 14.7636 10.2933 14.6278 11.212L14.6101 11.3104L13.6576 15.8063C13.5163 16.468 12.9775 16.9483 12.3397 16.9947L12.2382 16.9984L3.10002 16.995C2.73192 16.9946 2.4336 16.6961 2.43335 16.328V10.6079C2.43335 10.2397 2.73183 9.94122 3.10002 9.94122H4.72749L5.56878 9.9214L5.84687 9.90914L5.95873 9.89951L5.9776 9.89621C6.88105 9.68605 7.571 8.29192 7.69769 7.04528L7.70457 6.93863L7.71907 6.55702L7.73382 6.37364C7.78268 5.90172 7.93323 5.34695 8.45411 5.11832C9.82328 4.51737 10.7114 6.34155 10.6362 7.53148ZM8.77564 5.85086C8.66911 5.89762 8.58778 6.04726 8.54532 6.32682L8.53125 6.43779L8.51849 6.58739L8.50291 6.99011L8.49359 7.12616C8.32519 8.7832 7.4171 10.3827 6.15886 10.6754L6.094 10.6875L5.95855 10.7025L5.83752 10.7107L5.66668 10.7173V16.196L12.2092 16.1989L12.2817 16.1968C12.5363 16.1783 12.7627 15.9939 12.8523 15.724L12.8749 15.6405L13.8227 11.1688L13.8364 11.095C13.9022 10.6497 13.6003 10.223 13.2557 10.1744L13.1907 10.1698H9.66503L9.83781 7.48106C9.89879 6.51543 9.26246 5.63719 8.77564 5.85086ZM4.86668 10.738L4.72749 10.7412L3.23268 10.7407V16.1947L4.86668 16.1953V10.738Z"
              />
            </svg>
            量
          </div>
          <div className={`font-semibold text-[20px] leading-[28px] ${active ? '' : 'text-[#000]'}`}>532</div>
        </>
      ),
    },
    {
      value: '转发量',
      label: (item, index, active) => (
        <>
          <div
            className={`flex items-center gap-px text-sm leading-[22px] ${
              active ? 'opacity-80 font-semibold' : 'text-[#33373D]/58'
            }`}
          >
            <svg width="17" height="22" viewBox="0 0 17 22">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M9.06911 4.99866C9.24482 4.99866 9.41342 5.06803 9.53826 5.19168L14.3191 9.92717C14.5606 10.1663 14.5809 10.5444 14.3788 10.8069L14.3191 10.8745L9.53826 15.61C9.27667 15.8691 8.85457 15.8671 8.59546 15.6055C8.47181 15.4806 8.40244 15.312 8.40244 15.1363V12.9477C6.84336 13.073 4.56773 13.9942 3.38388 16.8812C3.1872 17.3608 2.70471 17.3567 2.59971 16.735C1.76872 11.8151 4.56773 8.4765 8.40244 7.87222V5.66532C8.40244 5.29713 8.70092 4.99866 9.06911 4.99866ZM9.20197 5.9853L9.20244 8.55603L8.52697 8.66247C5.30993 9.16942 3.20952 11.6756 3.25558 15.1685L3.25997 15.36C4.32251 13.618 6.1058 12.3933 8.14783 12.1684L9.20244 12.0808L9.20197 14.816L13.6606 10.4006L9.20197 5.9853Z"
              />
            </svg>
            量
          </div>
          <div className={`font-semibold text-[20px] leading-[28px] ${active ? '' : 'text-[#000]'}`}>532</div>
        </>
      ),
    },
    {
      value: '爱心量',
      label: (item, index, active) => (
        <>
          <div
            className={`flex items-center gap-px text-sm leading-[22px] ${
              active ? 'opacity-80 font-semibold' : 'text-[#33373D]/58'
            }`}
          >
            <svg width="17" height="22" viewBox="0 0 17 22">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M8.12716 7.17626L8.38461 7.42771L8.59856 7.63098L8.9068 7.33676L9.06997 7.17626C10.3717 5.87451 12.4823 5.87451 13.784 7.17626C15.0737 8.4659 15.0856 10.5494 13.82 11.8538L9.06994 16.6043C8.82966 16.8447 8.4515 16.8632 8.18997 16.6599L8.12716 16.6044L3.37685 11.854C2.11148 10.5494 2.12347 8.4659 3.41311 7.17626C4.71486 5.87451 6.82541 5.87451 8.12716 7.17626ZM7.56147 7.74195C6.57214 6.75262 4.96813 6.75262 3.9788 7.74195C3.03354 8.6872 2.99041 10.196 3.84729 11.1845L3.94254 11.2884L8.59743 15.9453L13.2458 11.2967C14.1754 10.3387 14.197 8.82948 13.3162 7.84533L13.2183 7.74195C12.229 6.75262 10.625 6.75262 9.63565 7.74195L9.36762 8.00378L8.59856 8.73013L7.73185 7.90956L7.56147 7.74195Z"
              />
            </svg>
            量
          </div>
          <div className={`font-semibold text-[20px] leading-[28px] ${active ? '' : 'text-[#000]'}`}>532</div>
        </>
      ),
    },
    {
      value: '评论量',
      label: (item, index, active) => (
        <>
          <div
            className={`flex items-center gap-px text-sm leading-[22px] ${
              active ? 'opacity-80 font-semibold' : 'text-[#33373D]/58'
            }`}
          >
            <svg width="17" height="22" viewBox="0 0 17 22">
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M13.4666 6C14.387 6 15.1332 6.74619 15.1332 7.66667V13.3333C15.1332 14.2538 14.387 15 13.4666 15H8.46655L6.93796 16.5267C6.67761 16.787 6.2555 16.787 5.99515 16.5267C5.87012 16.4016 5.79989 16.2368 5.79989 16.06V15H4.13322C3.21274 15 2.46655 14.2538 2.46655 13.3333V7.66667C2.46655 6.74619 3.21274 6 4.13322 6H13.4666ZM13.4666 6.8H4.13322C3.68449 6.8 3.31541 7.14103 3.27103 7.57806L3.26655 7.66667V13.3333C3.26655 13.7821 3.60759 14.1511 4.04461 14.1955L4.13322 14.2H6.59989L6.59922 15.7333L8.13548 14.2H13.4666C13.9153 14.2 14.2844 13.859 14.3287 13.4219L14.3332 13.3333V7.66667C14.3332 7.21794 13.9922 6.84886 13.5552 6.80447L13.4666 6.8Z"
              />
            </svg>
            量
          </div>
          <div className={`font-semibold text-[20px] leading-[28px] ${active ? '' : 'text-[#000]'}`}>532</div>
        </>
      ),
    },
  ]}
  value={value}
  onChange={(_, value) => setValue(value)}
  itemStyle={{
    flex: 1,
    flexDirection: 'column',
    alignItems: 'flex-start',
    padding: '8px 12px',
    height: 'initial',
    borderRadius: '6px',
  }}
/>

API

PropsDescriptionTypeDefault
indicatorClassNameThe class name of the indicatorstring""
indicatorStyleThe style of the indicatorReact.CSSProperties{}

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

PropsDescriptionTypeDefault
gapThe gap between the itemsnumberdiffers from component to component
activeColorThe color of the active itemstringvar(--springen-active-color)
colorThe color of the itemstringdiffers from component to component
itemsThe items of the componentSpringenItem[]undefined
valueThe value of the componentstringundefined
onChangeThe onChange of the component(e: React.MouseEvent<HTMLDivElement>, value: T) => voidundefined
itemClassNameThe className of the itemstring | ((item: SpringenItem<T>, index: number) => string)undefined
itemStyleThe style of the itemReact.CSSProperties | ((item: SpringenItem<T>, index: number) => React.CSSProperties)undefined
activeItemClassNameThe className of the active itemstring | ((item: SpringenItem<T>, index: number) => string)undefined
activeItemStyleThe style of the active itemReact.CSSProperties | ((item: SpringenItem<T>, index: number) => React.CSSProperties)undefined