Springen

Vertical

Vertical is a component that displays a list of tabs in a vertical direction.

Vertical 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.Vertical
  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('0');


<Springen.Vertical
  itemStyle={(_, index) => ({
    gap: '6px',
    marginBottom: index === 6 ? 0 : index < 2 ? '16px' : '12px',
    paddingLeft: '17px',
    height: index < 3 ? '28px' : '22px',
    fontSize: index < 3 ? '16px' : '14px',
  })}
  items={[
    {
      value: '0',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9" />
            <path
              d="M10.3231 5.432H11.3791V14H9.97506V7.124C9.45906 7.592 8.81106 7.94 8.01906 8.168V6.776C8.40306 6.68 8.81106 6.512 9.24306 6.272C9.67506 6.008 10.0351 5.732 10.3231 5.432Z"
              fill="white"
            />
          </svg>
          创作者
        </>
      ),
    },
    {
      value: '1',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9" />
            <path
              d="M10.1343 5.264C10.9623 5.264 11.6463 5.504 12.1863 5.984C12.7143 6.464 12.9783 7.076 12.9783 7.844C12.9783 8.588 12.6903 9.26 12.1383 9.872C11.8023 10.232 11.2023 10.688 10.3623 11.252C9.48634 11.828 8.95834 12.332 8.76634 12.764H12.9903V14H7.01434C7.01434 13.124 7.29034 12.368 7.86634 11.72C8.17834 11.36 8.83834 10.832 9.83434 10.148C10.3863 9.764 10.7703 9.44 11.0103 9.188C11.3823 8.768 11.5743 8.312 11.5743 7.832C11.5743 7.364 11.4423 7.016 11.2023 6.788C10.9503 6.56 10.5783 6.452 10.0863 6.452C9.55834 6.452 9.16234 6.632 8.89834 6.992C8.63434 7.328 8.49034 7.844 8.46634 8.516H7.06234C7.07434 7.556 7.35034 6.788 7.90234 6.2C8.46634 5.576 9.21034 5.264 10.1343 5.264Z"
              fill="white"
            />
          </svg>
          营销目标
        </>
      ),
    },
    {
      value: '2',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="9" />
            <path
              d="M10.0863 5.264C10.9503 5.264 11.6583 5.468 12.1863 5.888C12.7023 6.308 12.9663 6.884 12.9663 7.628C12.9663 8.564 12.4863 9.188 11.5383 9.5C12.0423 9.656 12.4383 9.884 12.7023 10.196C12.9903 10.52 13.1343 10.94 13.1343 11.444C13.1343 12.236 12.8583 12.884 12.3063 13.388C11.7303 13.904 10.9743 14.168 10.0383 14.168C9.15034 14.168 8.43034 13.94 7.89034 13.484C7.29034 12.98 6.95434 12.236 6.88234 11.276H8.31034C8.33434 11.828 8.50234 12.26 8.83834 12.56C9.13834 12.836 9.53434 12.98 10.0263 12.98C10.5663 12.98 10.9983 12.824 11.3103 12.524C11.5863 12.248 11.7303 11.912 11.7303 11.504C11.7303 11.012 11.5743 10.652 11.2863 10.424C10.9983 10.184 10.5783 10.076 10.0263 10.076H9.42634V9.02H10.0263C10.5303 9.02 10.9143 8.912 11.1783 8.696C11.4303 8.48 11.5623 8.156 11.5623 7.736C11.5623 7.316 11.4423 7.004 11.2143 6.788C10.9623 6.572 10.5903 6.464 10.0983 6.464C9.59434 6.464 9.21034 6.584 8.93434 6.836C8.64634 7.088 8.47834 7.472 8.43034 7.988H7.05034C7.12234 7.124 7.43434 6.452 8.01034 5.972C8.55034 5.492 9.24634 5.264 10.0863 5.264Z"
              fill="white"
            />
          </svg>
          合作需求
        </>
      ),
    },
    {
      value: '3',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="2" />
          </svg>
          推广产品信息
        </>
      ),
    },
    {
      value: '4',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="2" />
          </svg>
          履约联系方式
        </>
      ),
    },
    {
      value: '5',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="2" />
          </svg>
          内容制作要求
        </>
      ),
    },
    {
      value: '6',
      label: (
        <>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <circle cx="10" cy="10" r="2" />
          </svg>
          营销组件配置
        </>
      ),
    },
  ]}
  value={value}
  onChange={(_, value) => setValue(value)}
/>

API

PropsDescriptionTypeDefault
indicatorWrapperClassNameThe class name of the indicator wrapperstring""
indicatorWrapperStyleThe style of the indicator wrapperReact.CSSProperties{}
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