Components
Summary
A primitive native disclosure toggle for use inside Details.
Props
Native attributes and event handlers are forwarded to the summary element.
Place Summary first inside Details. The browser supplies mouse and keyboard activation and disclosure semantics.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the native element. |
class | string | '' | Classes merged with theme styles and variants. |
element | HTMLElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Entrance override; falls back to transition. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Exit override; falls back to transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | Transition function and optional parameters. |
variants | string[] | [] | Local variants or references to other theme styles. |
Default usage
Import Summary from sveltewind/components. This example shows its default styling in a usable context.
Account settings
Your preferences go here.
Loading...Examples
Theme variants
Every variant available for Summary in the built-in themes is shown below.
accent — Apply the accent variant.
Account settings
Your preferences go here.
Loading...muted — Apply the muted variant.
Account settings
Your preferences go here.
Loading...strong — Apply the strong variant.
Account settings
Your preferences go here.
Loading...secondary — Apply the secondary variant.
Account settings
Your preferences go here.
Loading...Class overrides
Apply font-semibold tracking-wide text-primary-600 dark:text-primary-400 locally.
Account settings
Your preferences go here.
Loading...Props and behavior
Bind isVisible and toggle it with a button to control whether the component is rendered.
Account settings
Your preferences go here.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Your own content
Your preferences go here.
Loading...Custom toggle style
Content is revealed when expanded.
Loading...