UI Elements

Accordion

A container with multiple collapsible sections where only one section can be expanded at a time.

First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.

Anatomy

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

Svelte
<div class="whole">
  {#each labels as label, i}
    <Disclosure {label}>
      {@render restProps[i]()}
    </Disclosure>
  {/each}
</div>

Dependency

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface AccordionProps {
  labels?: string[];
  current?: number; // bindable (-1)
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
  deps?: AccordionDeps;
  [key: string]: unknown | Snippet; // labels or contents of each disclosure
}

Additional Props

  • labels - String array for specifying the summary element in each Disclosure as a string
  • current - Index of the currently opened Disclosure component
  • restProps - Label or content snippets for each label and content pair of Disclosure
    • label* - Snippets with names starting with label are used as summary labels
    • panel* - Snippets with names starting with panel are used as content

Labels and panels correspond to each other in the sorted order of snippet names. If they cannot be mapped, the component will not be rendered.

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-accordion

Internal dependent components combine the parent class with their own default class names, resulting in multiple classes (e.g., svs-accordion svs-disclosure).

Exports

Types

TypeScript
interface AccordionDeps {
  svsDisclosure?: Omit<DisclosureProps, DisclosureReqdProps | DisclosureBindProps>;
}
type AccordionReqdProps = never;
type AccordionBindProps = "current" | "variant";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.

With Interactive Variant

Preset for Demo
Enter variant as you like
First Item
Diam facilisi consequat sadipscing in. Illum eleifend sit sit lorem takimata diam ut vel amet elitr duo.
Second Item
Justo sea et. Sea est accusam sanctus feugait sed dolore lorem consectetuer est.
Third Item
No dolore aliquip et aliquip sed lorem et qui nihil dolor sit lorem no sit. Esse sed ipsum et diam takimata.