Collapse

Demos

How to import

<script lang="ts">
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

In Svelte, write the panel as Collapse.Panel or the named export CollapsePanel, which are the same component. The header and extra of a Panel are snippets. A Panel can only be used inside Collapse, otherwise it throws a descriptive error.

Basic Usage

You can expand multiple panels at the same time, and use defaultActiveKey to set the panel to expand by default.

Svelte has no defaultActiveKey: a plain activeKey is the initially expanded panel; use bind:activeKey to read and write the expanded state.

Code

<script lang="ts">
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

<Collapse>
    <CollapsePanel itemKey="1">
        {#snippet header()}This is panel header 1{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Accordion

Use accordion to restrict one panel only to be expanded at one time.

Code

<script lang="ts">
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

<Collapse accordion>
    <CollapsePanel itemKey="1">
        {#snippet header()}This is panel header 1{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Disable Panel

Use disabled to disabled panel.

Code

<script lang="ts">
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

<Collapse accordion>
    <CollapsePanel disabled itemKey="1">
        {#snippet header()}This is panel header 1{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Hide The Panel Icon

Use showArrow to hide the panel icon.

Code

<script lang="ts">
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

<Collapse accordion>
    <CollapsePanel itemKey="1" showArrow={false}>
        {#snippet header()}This is panel header 1{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Custom Icon

Use the expandIcon snippet of Collapse to set the expanding icon and the collapseIcon snippet for the folded icon, written as {#snippet expandIcon()}...{/snippet} inside the Collapse tag.

The expanding icon is shown while a panel is collapsed (it can be expanded), the folded icon while it is expanded.

Code

<script lang="ts">
    import { IconMinus, IconPlus } from '@fibrae/semi-icons-svelte';
    import { Collapse, CollapsePanel } from '@fibrae/semi-ui-svelte';
</script>

<Collapse>
    {#snippet expandIcon()}
        <IconPlus />
    {/snippet}
    {#snippet collapseIcon()}
        <IconMinus />
    {/snippet}
    <CollapsePanel itemKey="1">
        {#snippet header()}This is panel header 1{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Custom Extra Content on the Right-upper Corner

Use the extra snippet to set extra content on the right-upper corner.

header is rendered inside the panel's toggle button, so it may only hold text, icons and other non-interactive content. extra sits beside the button in the same row and may hold controls such as buttons or inputs.

1234

Recommended

Code

<script lang="ts">
    import { IconCopy } from '@fibrae/semi-icons-svelte';
    import { Collapse, CollapsePanel, Tag } from '@fibrae/semi-ui-svelte';
</script>

<Collapse>
    <CollapsePanel itemKey="1">
        {#snippet header()}This is panel header 1{/snippet}
        {#snippet extra()}1234{/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="2">
        {#snippet header()}This is panel header 2{/snippet}
        {#snippet extra()}
            <IconCopy />
        {/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
    <CollapsePanel itemKey="3">
        {#snippet header()}This is panel header 3{/snippet}
        {#snippet extra()}
            <Tag color="violet" style="margin: 0">Recommended</Tag>
        {/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

API reference

Props

Property	Description	Type	Default
accordion	Accordion mode.	`boolean`	`false`
activeKey	Key of the currently expanded panel; bind it with `bind:activeKey`. null and the empty string mean all panels are collapsed. `bind:activeKey={get, set}` makes it fully controlled; a plain `activeKey` is the initial value and a click overrides it inside the component.	`string \| string[] \| null`	-
children	Snippet for the CollapsePanel panels.	`Snippet`	-
clickHeaderToExpand	Clicking anywhere in the header row toggles the panel; when false only the toggle button and the arrow respond.	`boolean`	`true`
collapseIcon	Snippet for the icon shown while a panel is expanded, IconChevronUp by default.	`Snippet`	-
expandIcon	Snippet for the icon shown while a panel is collapsed, IconChevronDown by default.	`Snippet`	-
expandIconPosition	Position of the expand icon: left or right.	`'left' \| 'right'`	`"right"`
keepDOM	Whether to keep the DOM tree of hidden panels; destroyed by default. When omitted it reads the global default of Collapse, then that of Collapsible.	`boolean`	-
lazyRender	Used with keepDOM; when true, panel content is not rendered until the panel is first expanded.	`boolean`	`false`
motion	Whether to enable the animation; enabled by default. When omitted it reads the global default of Collapse, then that of Collapsible.	`boolean`	-
onChange	Called when a panel is toggled, with the array of expanded keys and the native MouseEvent (keyboard use also produces a click through the native button).	`Type`	-

class, style and native attributes and events (such as id and aria-*) land on the root element of Collapse (.semi-collapse). The first argument of onChange is always a string[], even when activeKey is passed as a string.

Collapse.Panel

Props

Property	Description	Type	Default
children	Snippet for the panel content; a panel counts as having content only when children is given.	`Snippet`	-
disabled	Whether the panel is disabled.	`boolean`	`false`
extra	Snippet for the auxiliary content on the right of the panel header, outside the toggle button; may hold controls.	`Snippet`	-
header	Snippet for the panel header content, rendered inside the toggle button; must not contain interactive elements.	`Snippet`	-
itemKey	Required and unique, matched against activeKey.	`string`	-
onMotionEnd	Called when the expand or collapse animation ends.	`Type`	-
showArrow	Whether to show the arrow icon.	`boolean`	`true`

class, style and native attributes and events land on the root element of the Panel (.semi-collapse-item). Panel does not read global defaults, and counts as having content only when children is given.

Accessibility

ARIA

Each panel header follows the WAI-ARIA Accordion pattern: a native button wrapped in an element with role="heading" and aria-level="3". The button's accessible name is the header content.
The button carries aria-expanded, and aria-controls pointing at the panel content whenever that content is still in the DOM: always when open, and when closed once keepDOM is in effect (including when keepDOM is only set in the global defaults of Collapsible) and the content has been rendered, for example a panel opened once and closed again with keepDOM and lazyRender. A closed panel that lazyRender has not rendered yet has no content and no aria-controls.
The panel content has role="region" and is labelled by the button through aria-labelledby; closed content kept by keepDOM is inert.
The expand icon is decorative and has aria-hidden="true"; extra is outside the button.
A disabled panel uses the button's native disabled attribute.

Keyboard and Focus

Each panel header button is one Tab stop; disabled panels are skipped.
Enter or Space on the focused button expands or collapses the panel, also when clickHeaderToExpand is false.
Controls inside extra are Tab stops of their own.

Content Guidelines

The essence of the folding panel is that the card container adds the function of folding and unfolding, so the copywriting specification of the folding panel needs to be the same as the Card copywriting specification

Design Tokens

These are the component's internal Sass variables and cannot be overridden. To customize styles, override the --semi-* CSS variables (see the Design Token page) or write unlayered CSS rules.

Sass variable	Value	Usage
$color-collapse_item-border-default	var(--semi-color-border)	分割线颜色
$color-collapse_header-text-default	var(--semi-color-text-0)	标题文字颜色
$color-collapse_header-text-disabled	var(--semi-color-disabled-text)	标题文字颜色禁用
$color-collapse_header-icon-default	var(--semi-color-text-2)	展开箭头图标颜色
$color-collapse_header-bg-hover	var(--semi-color-fill-0)	菜单项背景颜色 - 悬浮
$color-collapse_header-bg-active	var(--semi-color-fill-1)	菜单项背景颜色 - 按下
$color-collapse_content-text-default	var(--semi-color-text-1)	内容文字颜色
$font-collapse_header-fontWeight	$font-weight-bold	标题字重
$spacing-collapse_header-marginX	$spacing-tight	标题水平外边距
$spacing-collapse_header-marginY	$spacing-extra-tight	标题垂直外边距
$spacing-collapse_header-padding	$spacing-tight	标题内边距
$spacing-collapse_right-paddingRight	$spacing-tight	图标右侧内边距
$spacing-collapse_header_iconLeft-marginRight	8px
$spacing-collapse_content-paddingTop	$spacing-extra-tight	内容顶部内边距
$spacing-collapse_content-paddingRight	$spacing-base	内容右侧内边距
$spacing-collapse_content-paddingBottom	$spacing-tight	内容底部内边距
$spacing-collapse_content-paddingLeft	$spacing-base	内容左侧内边距
$radius-collapse_header	var(--semi-border-radius-small)	内容圆角大小
$width-collapse_item-border	1px	分割线宽度
$size-collapse_icon-default	$width-icon-medium	图标尺寸

FAQ

Why is the data in Form cleared when using Collapse?

When Collapse is collapsed, the related DOM is destroyed and so are the fields data stored in Form. You could set keepDOM of Collapse to true to keep the DOM from being destroyed.
The whole header row is a click hot zone for folding and expanding. If a control (such as Input) is placed in the row, clicking it collapses/expands the panel. How to avoid it?

Put the control in extra, not in header: header is inside the toggle button and must not contain controls. With clickHeaderToExpand set to false only the toggle button and the icon respond to clicks; otherwise stop the click from bubbling to the header row in the control's click handler, or in a wrapping element's click handler if the control does not provide the event object, as in the example below.

<script lang="ts">
    import { Collapse, CollapsePanel, Input } from '@fibrae/semi-ui-svelte';
</script>

<Collapse>
    <CollapsePanel itemKey="1">
        {#snippet header()}Panel header{/snippet}
        {#snippet extra()}
            <span onclick={(e) => e.stopPropagation()}>
                <Input aria-label="Panel note" />
            </span>
        {/snippet}
        <p>Hi, bytedance dance dance. This is the docsite of Semi UI.</p>
    </CollapsePanel>
</Collapse>

Demos

How to import

Basic Usage

Accordion

Disable Panel

Hide The Panel Icon

Custom Icon

Custom Extra Content on the Right-upper Corner

API reference

Collapse

Collapse.Panel

Accessibility

ARIA

Keyboard and Focus

Content Guidelines

Design Tokens

FAQ

Why is the data in Form cleared when using Collapse?

The whole header row is a click hot zone for folding and expanding. If a control (such as Input) is placed in the row, clicking it collapses/expands the panel. How to avoid it?