astryx-vue

Collapsible Group

@astryxdesign/core v0.7.1 · CollapsibleGroup

Standard shipping takes 3–5 business days.

Usage ​

CollapsibleGroup coordinates the Collapsible sections inside it. Give each section a value. Inside the group, that section's own isOpen is ignored.

type="single" keeps one section open. Opening another closes the previous one, and clicking the open section closes it. The value is a string, or '' when everything is closed. type="multiple" toggles each section on its own, and the value is a list. hasDividers draws a hairline between sections. With dividers and no density, the padding is balanced.

vue
<script setup lang="ts">
import { Collapsible, CollapsibleGroup } from '@astryx-vue/core/Collapsible'
</script>

<template>
  <CollapsibleGroup default-value="account" type="single">
    <Collapsible trigger="Account" value="account">
      Profile, email, and password.
    </Collapsible>
    <Collapsible trigger="Billing" value="billing">
      Invoices and payment method.
    </Collapsible>
  </CollapsibleGroup>
</template>

Examples ​

Density

compact
Where your data is stored and processed. Changing region migrates existing data and can take up to an hour.
balanced — the default
Where your data is stored and processed. Changing region migrates existing data and can take up to an hour.
spacious
Where your data is stored and processed. Changing region migrates existing data and can take up to an hour.

density sets the block padding on every row in the group, so a list of sections can be tuned to the surface it sits on. compact for dense surfaces, balanced for page content, spacious for a short list that is the main thing on the page.