UI Elements

Disclosure

A component that reveals or hides additional content when toggled.

Title
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

Anatomy

The class attribute values represent part names. Other attributes represent their corresponding props.

Svelte
<details class="whole" {...attributes} bind:this={element} use:action>
  <summary class="label">
    {label}
  </summary>
  <div class="main" transition:slide={{ duration }}>
    {children}
  </div>
</details>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface DisclosureProps {
  label: string | Snippet<[boolean, string]>; // Snippet<[open,variant]>
  children: Snippet<[string]>; // Snippet<[variant]>
  open?: boolean; // bindable (false)
  duration?: number; // (200)
  attributes?: HTMLDetailsAttributes;
  action?: Action;
  element?: HTMLDetailsElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
}

Additional Props

  • open - Indicates whether the details element is open or closed

Styling

To learn more, see Styling.

Variant Management

When the details element is closed, neutral is applied; when it is open, active is applied. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-disclosure

Exports

Types

TypeScript
type DisclosureReqdProps = "label" | "children";
type DisclosureBindProps = "open" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Title
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.

With Interactive Variant

Preset for Demo
Enter variant as you like
Title
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.