Fluent Svelte Expander
Edit This PageExpanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header.
import { Expander } from "@riversidevalley/fluid";Usage
A basic expander expects a header and contents. The expander’s default slot will be rendered into the header, while content can be rendered into the content slot.
<script>
import { Expander } from "@riversidevalley/fluid";
</script>
<Expander>
Header
<svelte:fragment slot="content">Content</svelte:fragment>
</Expander>
Controlling Expansion
Expanders can be either expanded or collapsed. This can be controlled by setting the expanded property.
<script>
import { Expander } from "@riversidevalley/fluid";
</script>
<Expander expanded>
I am expanded by default.
<svelte:fragment slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</svelte:fragment>
</Expander>
Directions
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.
<script>
import { Expander } from "@riversidevalley/fluid";
</script>
<Expander direction="up">
This expander will expand upwards.
<svelte:fragment slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</svelte:fragment>
</Expander>
Adding an Icon
You can easily add an icon to an expander’s header using the icon slot. Passing in an SVG element will render it into the header with 16x16 dimensions.
<Expander>
<!-- https://github.com/microsoft/fluentui-system-icons -->
<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.85355 0.146447C7.65829 -0.0488155 7.34171 -0.0488155 7.14645 0.146447C6.95118 0.341709 6.95118 0.658291 7.14645 0.853553L8.29603 2.00314C4.80056 2.11088 2 4.97839 2 8.5C2 12.0899 4.91015 15 8.5 15C12.0899 15 15 12.0899 15 8.5C15 8.48656 15 8.47313 14.9999 8.45971C14.9983 8.2001 14.7805 8 14.5209 8H14.4782C14.2093 8 14 8.23107 14 8.5C14 11.5376 11.5376 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.53311 5.34917 3.11491 8.28892 3.00398L7.14645 4.14645C6.95118 4.34171 6.95118 4.65829 7.14645 4.85355C7.34171 5.04882 7.65829 5.04882 7.85355 4.85355L9.85355 2.85355C10.0488 2.65829 10.0488 2.34171 9.85355 2.14645L7.85355 0.146447ZM11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355L8.85355 9.85355C8.65829 10.0488 8.34171 10.0488 8.14645 9.85355L6.64645 8.35355C6.45118 8.15829 6.45118 7.84171 6.64645 7.64645C6.84171 7.45118 7.15829 7.45118 7.35355 7.64645L8.5 8.79289L11.1464 6.14645C11.3417 5.95118 11.6583 5.95118 11.8536 6.14645Z"
fill="currentColor"
/>
</svg>
Expander
<svelte:fragment slot="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</svelte:fragment>
</Expander>
Component API
API docs automatically generated by sveld and vite-plugin-sveld.Props
| Name | Type | Default | Description |
|---|---|---|---|
expanded |
boolean |
false |
Determines whether the expander is expanded (open) or not. |
direction |
string |
"down" |
Determines the direction that the expander will extend to. |
headingLevel |
number |
3 |
Determines the expander header's semantic HTML heading tag (h1-h6). |
containerElement |
null | HTMLDivElement |
null |
Obtains a bound DOM reference to the expander's container element. |
headerElement |
null | HTMLDivElement |
null |
Obtains a bound DOM reference to the expander's header button element. |
contentElement |
null | HTMLDivElement |
null |
Obtains a bound DOM reference to the expander's content container. |
Slots
| Name | Slot Props | Fallback |
|---|---|---|
Unnamed (Default) |
{} |
Empty |
content |
{} |
Empty |
icon |
{} |
Empty |
Events
All DOM events are forwarded to this component's respective elements by default. Learn More
Dispatched Events
| Name | Detail |
|---|---|
expand |
None |
collapse |
None |