Yeti

# Collapse

# Demo

Demo

# Collapse

# Usage

<script setup>
const [firstCollapse, setFirstCollapse] = useState(false);

const toggleFirstCollapse = () => setFirstCollapse(!firstCollapse.value);
</script>

<template>
<Button class="uppercase" @click="toggleFirstCollapse">
  Toggle Collapse
</Button>
<Collapse :open="firstCollapse">
  <div class="border border-divider rounded-xl mt-5 p-5">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Voluptatibus accusamus porro eos soluta! Debitis ab quis nam
    sed, dolorum dolore illum qui iure eius voluptatum nemo
    accusamus blanditiis neque id.
  </div>
</Collapse>
</template>

# Props

Property Type Default Required Description
open boolean no Is Collapse Open

# Accordion

# Usage

<script setup>
const [activeIndex, setActiveIndex] = useState(3);
<script>

<template>
<Accordion>
  <AccordionItem
    :activeIndex="activeIndex"
    :index="1"
    title="Accordion Title #1"
    :onToggle="setActiveIndex"
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam
    iure rem sed dicta ut a perspiciatis temporibus! Repudiandae
    quidem eaque unde culpa molestias neque dolores assumenda magnam,
    ut doloremque iste.
  </AccordionItem>
  <hr />
  <AccordionItem
    :activeIndex="activeIndex"
    :index="2"
    title="Accordion Title #2"
    :onToggle="setActiveIndex"
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam
    iure rem sed dicta ut a perspiciatis temporibus! Repudiandae
    quidem eaque unde culpa molestias neque dolores assumenda magnam,
    ut doloremque iste.
  </AccordionItem>
  <hr />
  <AccordionItem
    :activeIndex="activeIndex"
    :index="3"
    title="Accordion Title #3"
    :onToggle="setActiveIndex"
  >
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam
    iure rem sed dicta ut a perspiciatis temporibus! Repudiandae
    quidem eaque unde culpa molestias neque dolores assumenda magnam,
    ut doloremque iste.
  </AccordionItem>
</Accordion>
</template>

# Props

# AccordionItem

Property Type Default Required Description
activeIndex number no Index of active accordion
index number no Index of the item
title string no Title of the accordion
onToggle function no Callback function when the accordion item is toggled

← Dropdowns →