Expander
Control that displays a header and a collapsible content area.
Usage
A basic expander expects a header and its content. You can configure the header by passing the header property. Content can be provided as child elements of the component. By default, the content container has no padding, this allows you to use 100% of the content width if needed.
<script>
import { Expander } from 'fluentui-svelte';
</script>
<Expander header="Expander Title">
<p>This is the content of the expander</p>
</Expander>Controlling Expansion
Expanders can be either expanded or collapsed. This can be controlled by setting the expanded property.
Opening Direction
An expander doesn’t have to expand downwards. You can control an expander’s expansion direction using the direction property. To create an upwards-expanding expander, set direction to up.
Adding an Icon
You can easily add an icon to an expander’s header using the Icon prop. You can pass either a Snippet or a Component.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
header | string | Label of the expander. | |
description | string | Description to render below the header. | |
direction | 'down' | 'up' | 'down' | Set the opening direction of the expander. |
justify | boolean | false | The expander is justified to the full width of the container. |
disabled | boolean | false | Disables the user interaction. |
animation | { duration: number; easing: string; } | The animation configuration. Reduced motion is always honoured over this. | |
expanded bindable | boolean | false | Control the opening state of the expander. |
ref bindable | HTMLDetailsElement | null | The DOM reference of the expander element. | |
Icon | Snippet | Component | The icon to display before the label. | |
summaryRef bindable | HTMLElement | null | The DOM reference of the summary element. | |
summaryAttributes | HTMLAttributes<HTMLElement> | The HTML attributes to spread on the summary element. | |
Element Attributes (details) |