Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

可同时展开多个面板，面板之间不影响

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

export function CollapseBasic() {  const [activeNames, setActiveNames] = useState<CollapseActiveName[]>(["1"]);  return (    <ElCollapse      value={activeNames}      onChange={(value) =>        setActiveNames(Array.isArray(value) ? value : [value])      }    >      <ElCollapseItem title="Consistency" name="1">        {renderTexts(consistencyText)}      </ElCollapseItem>      <ElCollapseItem title="Feedback" name="2">        {renderTexts(feedbackText)}      </ElCollapseItem>      <ElCollapseItem title="Efficiency" name="3">        {renderTexts(efficiencyText)}      </ElCollapseItem>      <ElCollapseItem title="Controllability" name="4">        {renderTexts(controllability("advice"))}      </ElCollapseItem>    </ElCollapse>  );}

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

export function CollapseAccordion() {  const [activeName, setActiveName] = useState<CollapseActiveName>("1");  return (    <ElCollapse      accordion      value={activeName}      onChange={(value) =>        setActiveName(Array.isArray(value) ? (value[0] ?? "") : value)      }    >      <ElCollapseItem title="Consistency" name="1">        {renderTexts(consistencyText)}      </ElCollapseItem>      <ElCollapseItem title="Feedback" name="2">        {renderTexts(feedbackText)}      </ElCollapseItem>      <ElCollapseItem title="Efficiency" name="3">        {renderTexts(efficiencyText)}      </ElCollapseItem>      <ElCollapseItem title="Controllability" name="4">        {renderTexts(controllability("advices"))}      </ElCollapseItem>    </ElCollapse>  );}

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

TIP

从版本 2.9.10开始， title 插槽提供一个 isActive 属性，显示当前折叠项是否活跃。

export function CollapseCustomTitle() {  return (    <ElCollapse accordion>      <ElCollapseItem        name="1"        title={({ isActive }) => (          <div            style={{              ...titleWrapperStyle,              color: isActive ? "var(--el-color-primary)" : undefined,            }}          >            Consistency            <ElIcon>              <InfoFilled />            </ElIcon>          </div>        )}      >        {renderTexts(consistencyText)}      </ElCollapseItem>      <ElCollapseItem title="Feedback" name="2">        {renderTexts(feedbackText)}      </ElCollapseItem>      <ElCollapseItem title="Efficiency" name="3">        {renderTexts(efficiencyText)}      </ElCollapseItem>      <ElCollapseItem title="Controllability" name="4">        {renderTexts(controllability("advices"))}      </ElCollapseItem>    </ElCollapse>  );}

自定义图标 2.8.3

除了使用 icon 属性外，您还可以自定义面板项目图标，从而添加自定义内容。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

export function CollapseCustomIcon() {  const [activeNames, setActiveNames] = useState<CollapseActiveName[]>(["1"]);  return (    <ElCollapse      value={activeNames}      onChange={(value) =>        setActiveNames(Array.isArray(value) ? value : [value])      }    >      <ElCollapseItem title="Consistency" name="1" icon={<CaretRight />}>        {renderTexts(consistencyText)}      </ElCollapseItem>      <ElCollapseItem        title="Feedback"        name="2"        icon={({ isActive }) => (          <span style={customIconStyle}>            {isActive ? "Expanded" : "Collapsed"}          </span>        )}      >        {renderTexts(feedbackText)}      </ElCollapseItem>      <ElCollapseItem title="Efficiency" name="3">        {renderTexts(efficiencyText)}      </ElCollapseItem>      <ElCollapseItem title="Controllability" name="4">        {renderTexts(controllability("advices"))}      </ElCollapseItem>    </ElCollapse>  );}

自定义图标位置 2.9.10

使用 expand-icon-position 属性，您可以自定义图标位置。

expand icon position:

left

export function CollapseIconPosition() {  const [position, setPosition] = useState<"left" | "right">("left");  return (    <div>      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>        <span style={{ marginRight: 16 }}>expand icon position: </span>        <ElSwitch          value={position}          activeValue="right"          inactiveValue="left"          activeText="right"          inactiveText="left"          style={{ "--el-switch-off-color": "#88b8fe" } as CSSProperties}          onChange={(value) => setPosition(value as "left" | "right")}        />      </div>      <ElCollapse expandIconPosition={position}>        <ElCollapseItem title="Consistency" name="1">          {renderTexts(consistencyText)}        </ElCollapseItem>        <ElCollapseItem title="Feedback" name="2">          {renderTexts(feedbackText)}        </ElCollapseItem>        <ElCollapseItem title="Efficiency" name="3">          {renderTexts(efficiencyText)}        </ElCollapseItem>      </ElCollapse>    </div>  );}

阻止折叠 2.9.11

设置 beforeChange 属性，若返回 false 或者返回 Promise 且被 reject ，则停止切换。

before collapse return:

true

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

export function CollapsePreventCollapsing() {  const [before, setBefore] = useState(true);  const [loading, setLoading] = useState(false);  const [activeNames, setActiveNames] = useState<CollapseActiveName[]>(["1"]);  const beforeCollapse = () => {    setLoading(true);    return new Promise<boolean>((resolve) => {      setTimeout(() => {        setLoading(false);        resolve(before);      }, 1000);    });  };  return (    <div>      <div style={{ display: "flex", alignItems: "center", marginBottom: 16 }}>        <span style={{ marginRight: 16 }}>before collapse return: </span>        <ElSwitch          checked={before}          activeText="true"          inactiveText="false"          disabled={loading}          onCheckedChange={setBefore}        />        {loading && <span style={{ marginLeft: 8 }}>loading...</span>}      </div>      <ElCollapse        value={activeNames}        onChange={(value) =>          setActiveNames(Array.isArray(value) ? value : [value])        }        beforeCollapse={beforeCollapse}      >        <ElCollapseItem title="Consistency" name="1">          {renderTexts(consistencyText)}        </ElCollapseItem>        <ElCollapseItem title="Feedback" name="2">          {renderTexts(feedbackText)}        </ElCollapseItem>        <ElCollapseItem title="Efficiency" name="3">          {renderTexts(efficiencyText)}        </ElCollapseItem>        <ElCollapseItem title="Controllability" name="4">          {renderTexts(controllability("advices"))}        </ElCollapseItem>      </ElCollapse>    </div>  );}

Collapse API

Collapse Attributes

属性名	说明	类型	默认值
value	当前展开的面板。手风琴模式为单值，否则为数组	`array` / `string` / `number`	[]
accordion	是否手风琴模式	`boolean`	false
expandIconPosition	展开图标位置	`enum`	right
beforeCollapse	切换前钩子，返回 false 或 reject 的 Promise 阻止切换	`Function`	—
className	根节点类名	`string`	—

Collapse Events

事件名	说明	参数
onChange	展开面板变化，等价官方 `change`	`Function`，手风琴为单值，否则为数组

Collapse Slots

插槽名	说明	React 写法
default	折叠面板子项	children

CollapseItem Attributes

属性名	说明	类型	默认值
name	面板标识，省略时用自动生成的 id	`string` / `number`	—
title	标题；传函数可获取 `{ isActive }`	`ReactNode` / `Function`	—
disabled	是否禁用	`boolean`	false
icon	自定义图标；传节点包在官方 arrow 容器内，传函数完全接管渲染	`ReactNode` / `Function`	ArrowRight
className	自定义类名	`string`	—

CollapseItem Slots

插槽名	说明	React 写法
default	面板内容	children
title	自定义标题，参数 `{ isActive }`	`title` 函数属性
icon	自定义图标，参数 `{ isActive }`	`icon` 函数属性