AisAccordion

The AisAccordion utilizes a group of AisCard components to create collapsible and expandable sections to help organize and present content in a compact manner. Use the variant, outline, rounded, and arrows props to customize the look of your accordion.

Arrows

Rounded

truefalsenonesmmdlgxl2xl3xlfull

Variant

defaultprimarysecondaryplaininfosuccesswarningdanger

Outline

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.

<template>
  <div class="grid gap-8">

    <div class="grid md:grid-cols-2 gap-10">

      <div class="flex gap-10 items-center">
        <AisField label="Arrows">
          <AisToggle label="Arrows" sr-label v-model="arrows"/>
        </AisField>

        <AisField label="Rounded" class="grow">
          <AisSelect v-model="rounded" :options="roundedStates" />
        </AisField>
      </div>

      <div class="flex gap-10 items-center">
        <AisField label="Variant" class="grow">
          <AisSelect v-model="variant" :options="variants" />
        </AisField>

        <AisField label="Outline">
          <AisToggle label="Outline" sr-label v-model="outline"/>
        </AisField>
      </div>

    </div>

    <hr>

    <AisAccordion :variant="variant" :outline="outline" :rounded="rounded" :arrows="arrows">
      <AisCard header="Header 1" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 2" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 3" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
      <AisCard header="Header 4" icon="users">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices urna vitae justo tincidunt, eget lacinia sem commodo. Phasellus sed quam at lectus laoreet viverra. Vivamus tincidunt scelerisque faucibus. In maximus nisi in sapien pharetra, non vestibulum dui ultrices. Morbi a mi risus. Nunc vel ipsum sed metus aliquam lacinia. Ut et ligula vestibulum, ultrices sapien a, hendrerit nunc. Praesent luctus diam sit amet libero tristique, eget malesuada nisl efficitur. Sed finibus metus sed finibus pharetra. Aenean cursus, massa id tincidunt laoreet, enim urna bibendum odio, ut dapibus purus ex vel risus.
      </AisCard>
    </AisAccordion>
  </div>

</template>

<script setup>
import { ref } from "vue";
import { AisAccordion } from "@ais-public/ais-components";
import { AisCard } from "@ais-public/ais-components";
import { AisField } from "@ais-public/ais-components";
import { AisSelect } from "@ais-public/ais-components";
import { AisToggle } from "@ais-public/ais-components";
import { variants } from "@/util/variants-util";
import { roundedStates } from "@/util/rounded-prop";

const variant = ref('default');
const outline = ref(false);
const rounded = ref(false);
const arrows = ref(false);
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
arrows	Boolean		false	When true, an arrow icon will be displayed next to each card header	false
defaultIndex	Number		0	The index of the card that should default as opened	false
gap	Array, String		() => []	Use the gap prop to control spacing between the cards. The prop expects one of the Tailwind CSS gap classes (e.g. gap-1, gap-10, etc...); see: https://tailwindcss.com/docs/gap.	false
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background.	false
rounded	Boolean, String		false	Applies rounded corners using TailwindCSS's rounded classes	false
variant	String		undefined	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false

Slots

Name	Scoped	Description
default	No	Slot for the cards that will be in the accordion

Events

Event	Arguments	Description