Collapse
Use Collapse to store contents.
Basic usage
You can expand multiple panels
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Decision making: giving advice about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
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
In accordion mode, only one panel can be expanded at once
Activate accordion mode using the accordion attribute.
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
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> );}
Custom title
Besides using the title attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.
Starting from version 2.9.10, the title slot provides an isActive property that indicates whether the current collapse item is active.
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
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> );}
Custom icon 2.8.3
Besides using the icon attribute, you can customize icon of panel item with named slots, which makes adding custom content.
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
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> );}
Custom icon position 2.9.10
using the expand-icon-position attribute, you can customize icon position.
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
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> );}
Prevent collapsing 2.9.11
set the before-collapse property, If false is returned or a Promise is returned and then is rejected, will stop collapsing.
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.
Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;
Visual feedback: reflect current state by updating or rearranging elements of the page.
Simplify the process: keep operating process simple and intuitive;
Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;
Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.
Decision making: giving advices about operations is acceptable, but do not make decisions for the users;
Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.
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
| Name | Description | Type | Default |
|---|
| model-value / v-model | currently active panel, the type is string in accordion mode, otherwise it is array | string / array | [] |
| accordion | whether to activate accordion mode | boolean | false |
| expand-icon-position 2.9.10 | set expand icon position | enum | right |
| before-collapse 2.9.11 | before-collapse hook before the collapse state changes. If false is returned or a Promise is returned and then is rejected, will stop collapsing | Function | — |
Collapse Events
| Name | Description | Type |
|---|
| change | triggers when active panels change, the parameter type is string in accordion mode, otherwise it is array | Function |
Collapse Slots
| Name | Description | Subtags |
|---|
| default | customize default content | Collapse Item |
Collapse Exposes
| Name | Description | Type |
|---|
| activeNames | currently active panel names | object |
| setActiveNames | set active panel names | Function |
Collapse Item API
Collapse Item Attributes
| Name | Description | Type | Default |
|---|
| name | unique identification of the panel | string / number | — |
| title | title of the panel | string | '' |
| icon 2.8.3 | icon of the collapse item | string / Component | ArrowRight |
| disabled | disable the collapse item | boolean | false |
Collapse Item Slot
| Name | Description | Type |
|---|
| default | content of Collapse Item | — |
| title | content of Collapse Item title | object |
| icon 2.8.3 | content of Collapse Item icon | object |
Collapse Item Exposes
| Name | Description | Type |
|---|
| isActive | whether the current collapse item is active | object |
