Collapse 折叠面板

基本用法

折叠面板用于显示和隐藏内容。

<Collapse
    title="This is Collapse title 1"
    content="This is Collapse content 1"
/>

This is Collapse title 1

This is Collapse content 1

带焦点的折叠

你可以使用 focus, 当展开的折叠面板失去焦点时，将自动关闭。

<Collapse
    focus
    title="This is Collapse title 2（focus）"
    content="This is Collapse content 2（focus）"
/>

This is Collapse title 2（focus）

This is Collapse content 2（focus）

边框和背景

你可以通过 bordered 快捷设置外层边框。
背景色可以通过 classes.container 来进行自定义。

<Collapse
    bordered
    showIcon
    title="This is Collapse title (bordered & classes)"
    content="This is Collapse content (bordered & classes)"
    classes={{
        container: "bg-transparent"
    }}
/>

This is Collapse title (bordered & classes)

This is Collapse content (bordered & classes)

使用图标

你可以通过 showIcon 展示 Panel 组件的箭头图标。
当 showIcon=true 时，默认值使用 collapse-arrow。 其他 icon 目前有 collapse-plus。

<Collapse
    showIcon={true}
    title="This is Collapse title, showIcon=true"
    content="This is Collapse content, showIcon=true"
/>

<Collapse
    showIcon="collapse-arrow"
    title="This is Collapse title, showIcon=collapse-arrow"
    content="This is Collapse content, showIcon=collapse-arrow"
/>

<Collapse
    showIcon="collapse-plus"
    title="This is Collapse title, showIcon=collapse-plus"
    content="This is Collapse content, showIcon=collapse-plus"
/>

This is Collapse title, showIcon=true

This is Collapse content, showIcon=true

This is Collapse title, showIcon=collapse-arrow

This is Collapse content, showIcon=collapse-arrow

This is Collapse title, showIcon=collapse-plus

This is Collapse content, showIcon=collapse-plus

API

Accordion

属性	说明	类型	默认值
title	折叠面板标题部分	string	""
content	折叠面板内容部分	string	""
focus	折叠面板使用获取焦点模式	boolean	false
bordered	快捷设置折叠面板的边框	boolean	false
classes	作用于 Collapse 的样式	Collapse.classes	-
showIcon	是否展示当前面板上的 Icon，可选值有 collapse-arrow collapse-plus。 当showIcon=true时，默认使用 collapse-arrow	boolean || string	”collapse-arrow”

Collapse.classes

属性	说明	类型	默认值
container	最外层元素样式	string	""
title	作用于 Collapse 标题区域的样式	string	-
content	作用于 Collapse 内容区域的样式	string	-