TaroifyReact UI

    Collapse 折叠面板

    介绍

    将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

    引入

    import { Collapse } from "@taroify/core"

    代码演示

    基础用法

    通过 value 控制展开的面板列表，value 为数组格式。

    function BasicCollapse() {
  const [value, setValue] = useState([0])
  return (
    <Collapse value={value} onChange={setValue}>
      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
    </Collapse>
  )
}

    手风琴

    通过 accordion 可以设置为手风琴模式，最多展开一个面板，此时 value 为字符串格式。

    function AccordionCollapse() {
  const [value, setValue] = useState(0)
  return (
    <Collapse accordion value={value} onChange={setValue}>
      <Collapse.Item title="标题1">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
      <Collapse.Item title="标题2">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
      <Collapse.Item title="标题3">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
    </Collapse>
  )
}

    只读状态和禁用状态

    通过 clickable=false 属性禁止显示反馈动画，通过 disabled 属性来禁用单个面板。

    function CollapseWithDisabledWithReadonly() {
  return (
    <Collapse defaultValue={[0]}>
      <Collapse.Item title="正常状态">代码是写出来给人看的，附带能在机器上运行</Collapse.Item>
      <Collapse.Item title="只读状态" clickable={false}>
        代码是写出来给人看的，附带能在机器上运行
      </Collapse.Item>
      <Collapse.Item title="禁用状态" disabled>
        代码是写出来给人看的，附带能在机器上运行
      </Collapse.Item>
    </Collapse>
  )
}

    自定义标题内容

    通过 title 属性可以自定义标题栏的内容。

    function CustomCollapse() {
  return (
    <Collapse defaultValue={[0]}>
      <Collapse.Item
        className="custom-collapse-item1"
        title={
          <>
            标题1
            <QuestionOutlined />
          </>
        }
      >
        代码是写出来给人看的，附带能在机器上运行
      </Collapse.Item>
      <Collapse.Item icon={<ShopOutlined />} title="标题2" extra="内容" clickable={false}>
        代码是写出来给人看的，附带能在机器上运行
      </Collapse.Item>
    </Collapse>
  )
}

    API

    Collapse Props

    参数说明类型默认值
    defaultValue默认展开面板的 value手风琴模式：number | string
    非手风琴模式：(number | string)[]    		-
    value当前展开面板的 value手风琴模式：number | string
    非手风琴模式：(number | string)[]    		-
    accordion是否开启手风琴模式booleanfalse
    bordered是否显示外边框booleantrue

    Collapse Events

    事件名说明回调参数
    onChange切换面板时触发value: any

    Collapse.Item Props

    参数说明类型默认值
    value唯一标识符，默认为索引值number | stringindex
    icon标题栏左侧图标或图片ReactNode-
    expandIcon标题栏右侧图标或图片ReactNode-
    size标题栏大小，可选值为 largestring-
    title标题栏左侧内容number | string-
    extra标题栏右侧内容number | string-
    brief标题栏描述信息number | string-
    bordered是否显示内边框booleantrue
    clickable是否开启点击反馈booleantrue
    disabled是否禁用面板booleanfalse

    主题定制

    样式变量

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

    名称默认值描述
    --collapse-item-title-disabled-colorvar(--gray-5)-
    --collapse-item-transition-durationvar(--animation-duration-base)-
    --collapse-item-content-paddingvar(--padding-sm) var(--padding-md)-
    --collapse-item-content-font-sizevar(--font-size-md)-
    --collapse-item-content-line-height1.5-
    --collapse-item-content-colorvar(--gray-6)-
    --collapse-item-content-background-colorvar(--white)-