列表

基础使用

Loading...

function Demo() {
  const items = [
    { label: '苹果' },
    { label: '香蕉' },
    { label: '橙子' },
    { label: '葡萄' },
  ]
  return (
    <CList
      items={items}
      itemKey="label"
    />
  )
}

折叠/展开 代码

尺寸

Loading...

function Demo() {
  const items = [
    { label: '苹果' },
    { label: '香蕉' },
    { label: '橙子' },
    { label: '葡萄' },
  ]

  const [size, setSize] = useState('md')

  const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
  return (
    <>
      <SpaceItems>
        {sizes.map(s => (
          <CRadio
            key={s}
            value={size}
            onChange={setSize}
            label={s}
            selectedValue={s}
          />
        ))}
      </SpaceItems>
      <CList
        size={size}
        items={items}
        itemKey="label"
      />
    </>
  )
}

折叠/展开 代码

分割线

Loading...

function Demo() {
  const items = [
    { label: '苹果' },
    { label: '香蕉' },
    { label: '橙子' },
    { label: '葡萄' },
  ]
  return (
    <CList
      items={items}
      divider
      itemKey="label"
    />
  )
}

折叠/展开 代码

激活项&可点击

Loading...

function Demo() {
  const items = [
    { label: '苹果' },
    { label: '香蕉' },
    { label: '橙子' },
    { label: '葡萄' },
  ]

  const [activeFruit, setActiveFruit] = useState('苹果')

  return (
    <CList
      items={items}
      clickable
      itemKey="label"
      activeFn={item => item.label === activeFruit}
      onItemClick={item => setActiveFruit(item.label)}
    />
  )
}

折叠/展开 代码

自定义项

Loading...

function Demo() {
  const {
    matCheck,
    matSettingsPower,
    matPersonAddAlt1,
    matOfflineBolt,
    matSettings,
  } = MdIcons

  const items = [
    { title: '通知', subtitle: '一些通知相关的内容', icon: matOfflineBolt },
    { title: '个人', subtitle: '一些个人相关的内容', icon: matPersonAddAlt1 },
    { title: '设置', subtitle: '一些系统相关的设置', icon: matSettings },
    { title: '退出', subtitle: '用于退出登录', icon: matSettingsPower },
  ]

  const [activeItem, setActiveItem] = useState('')
  return (
    <CList
      items={items}
      clickable
      itemKey="title"
      activeFn={item => item.title === activeItem}
      onItemClick={item => setActiveItem(item.title)}
      itemRender={({ key, item, onItemClick, active, clickable }) => (
        <CInfoItem
          key={key}
          {...item}
          align="center"
          append={active && <CIcon content={matCheck} style={{
            fontSize: '32px',
            color: 'var(--casual-primary)'
          }} />}
        />
      )}
    />
  )
}

折叠/展开 代码

CList Props

名称 (*代表必须)	描述	类型	默认值

No Data

CItem Props

名称 (*代表必须)	描述	类型	默认值

No Data

CInfoItem Props

名称 (*代表必须)	描述	类型	默认值

No Data