Svant Collapse
A content area which can be collapsed and expanded.
Examples
Basic
By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse defaultActiveKey="{['1']}" on:change="{callback}">
<CollapsePanel header="This is panel header 1" key="1">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3" disabled>
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
function callback({ detail }) {
console.log(detail.currentActiveKey);
}
</script>
Accordion
In accordion mode, only one panel can be expanded at a time.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse accordion>
<CollapsePanel header="This is panel header 1" key="1">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
</script>
Nested
A Collapse can be nested inside another.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse on:change="{callback}">
<CollapsePanel header="This is panel header 1" key="1">
<Collapse>
<CollapsePanel header="This is panel nest panel" key="1">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel nest panel" key="2">
<p>{text}</p>
</CollapsePanel>
</Collapse>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
function callback(event) {
console.log(event.detail.currentActiveKey);
}
</script>
Borderless
A border-less version of the Collapse.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse borderless defaultActiveKey="{['1']}">
<CollapsePanel header="This is panel header 1" key="1">
<p class="collapse-text">{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<p class="collapse-text">{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<p class="collapse-text">{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
</script>
<style>
.collapse-text {
padding-left: 24px;
}
</style>
Custom Panels
Customize the Collapse icon and the styles for each panel. Note: the icon will rotate when opening the panel.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse
borderless
defaultActiveKey="{['1']}"
expandIcon="{CaretRightOutlined}"
class="{{ 'site-collapse-custom-collapse': true }}">
<CollapsePanel
header="This is panel header 1"
key="1"
class="site-collapse-custom-panel">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel
header="This is panel header 2"
key="2"
class="site-collapse-custom-panel">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel
header="This is panel header 3"
key="3"
class="site-collapse-custom-panel">
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
import { CaretRightOutlined } from "svant/icons";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
</script>
<style>
:global(.site-collapse-custom-collapse) {
background: #fff;
}
:global(.site-collapse-custom-panel) {
background: #fff;
border-radius: 2px;
margin-bottom: 24px;
border-bottom: 0px !important;
overflow: hidden;
}
:global(.site-collapse-custom-panel .ant-collapse-content) {
background: rgba(0, 102, 204, 0.1) !important;
margin-left: 40px;
}
</style>
Hide Arrow
You can hide the arrow icon by passing hideArrow to CollapsePanel component.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse defaultActiveKey="{['1']}">
<CollapsePanel header="This is panel header with arrow icon" key="1">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel
hideArrow
header="This is panel header with no arrow icon"
key="2">
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
</script>
Arrow Position
You can move the arrow to the right side of the panel as well.
<Collapse defaultActiveKey="{['1']}" expandIconPosition="right">
<CollapsePanel header="This is panel header 1" key="1">
<div>{text}</div>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<div>{text}</div>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<div>{text}</div>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
import { SettingOutlined } from "svant/icons";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
</script>
Custom Panel Header
You can use the header slot to customize a panel's header.
<Collapse defaultActiveKey="{['1']}">
<CollapsePanel key="1">
<div slot="header" class="geared-panel">
<span>Custom header from the slot</span>
<span on:click|stopPropagation="{onGearClicked}">
<SettingOutlined />
</span>
</div>
<div>{text}</div>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<div>{text}</div>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<div>{text}</div>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel } from "svant";
import { SettingOutlined } from "svant/icons";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
function onGearClicked(event) {
console.log("Gear clicked but did not open the panel");
}
</script>
<style>
.geared-panel {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
Manual Custom Key
For more control over what opens and when it opens, use the customKey prop. The on:change event exposes the lastKeyClicked.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.
<Collapse {activeKey} on:click="{handleClick}">
<CollapsePanel header="This is panel header 1" key="1">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 2" key="2">
<p>{text}</p>
</CollapsePanel>
<CollapsePanel header="This is panel header 3" key="3">
<p>{text}</p>
</CollapsePanel>
</Collapse>
<script>
import { Collapse, CollapsePanel, Modal } from "svant";
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
let activeKey = ["1"];
function handleClick({ detail }) {
const { lastKeyClicked } = detail;
const alreadyOpen = activeKey.includes(lastKeyClicked);
const message = `Are you sure you want to ${
alreadyOpen ? "close" : "open"
} this panel`;
const callback = () => {
if (alreadyOpen) {
// Make sure to reassign activeKey so it's
activeKey = activeKey.splice(activeKey.indexOf(lastKeyClicked), 0);
} else {
activeKey = [...activeKey, lastKeyClicked];
}
};
Modal.confirm({
content: message,
onOk: callback
});
}
</script>
API
Collapse Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| activeKey | Used to override the collapse auto functionality. Allows for manual control over what is open | Array | |
| defaultActiveKey | An array of the keys to be initially opened | Array | |
| borderless | Removes the borders | Boolean | false |
| accordion | If true, only one panel opens at a time | Boolean | false |
| expandIcon | Allows for a customize collapse icon | SvelteComponent | RightOutlined |
| class | Custom classes or class object for the Collapse wrapper | String | Object | |
| expandIconPosition | The icon can be displayed on the left or the right | String - `left` | `right` |
CollapsePanel Attributes
| Property | Description | Type | Default |
|---|---|---|---|
| disabled | If true, panel cannot be opened or closed | Boolean | false |
| header | Title of the panel (Can be replaced with the header slot) | String | |
| key | Unique key identifying the panel from among its siblings | String | |
| class | Custom classes or class object for the panel | String | |
| hideArrow | Ability to hide the collapse arrow icon | Boolean | false |
Collapse Events
| Name | Description |
|---|---|
| click | Fired when a panel header is clicked |
| change | Fired when a panel is opened or closed |
CollapsePanel Slots
| Name | Description |
|---|---|
| header | Custom content for the panel header |