Accordion

Stable

Expand and collapse sections of content.

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

Examples

With Pill

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    pill-icon="share-alt"
    pill-label="Share"
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

With Button

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    button="Action"
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

With Icon

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    icon="data-set"
    icon-right="info"
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

With Switch

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    has-switch
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

With Description

<script setup lang="ts">
import { HAccordion } from '@holistics/design-system'
</script>

<template>
  <HAccordion
    label="Label"
    description="Eu facilisis maecenas habitasse tempor praesent tempor class elementum. Placerat augue congue penatibus nibh nam litora pellentesque?"
    class="w-[32rem]"
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </HAccordion>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
modelValue	boolean
defaultExpanded	boolean
label	string
icon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
iconRight	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
pillIcon	"function" | "cancel" | "copy" | "cut" | "error" | "pause" | "play" | "add-block" | "add-circle" | "add-filter" | "add-tag" | "add-user" | "add" | "address-card" | "adhoc-query" | ... 466 more ...
pillLabel	string
button	string | ButtonPropsPreTyped
hasSwitch	boolean
switchChecked	boolean
switchLabel	string
switchDisabled	boolean
description	string
withFocusStyles	boolean

Events

Name	Parameters	Description
@update:modelValue	[value: boolean]
@update:switchChecked	[value: boolean]
@buttonClick	[event: MouseEvent]

Slots

Name	Scoped	Description
#icon	{}
#label	{}
#iconRight	{}
#pill	{}
#button	{}
#switch	{}
#description	{}
#default	{}