Collapse

Collapse is used for showing and hiding content.

Basic usage

You can expand multiple panels

Collapse

title1

disabled

icon

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item disabled name="2" title="disabled">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
        <o-collapse-item icon="i-carbon-logo-github" name="3" title="icon">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item disabled name="2" title="disabled">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
        <o-collapse-item icon="i-carbon-logo-github" name="3" title="icon">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

Accordion

In accordion mode, only one panel can be expanded at once Activate accordion mode using the accordion attribute.

Collapse

title1

title2

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse accordion>
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse accordion>
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

ExpandedNames

Privide the Array , which contains the names of the expanded panels. The expanded panel will be expanded when the component is mounted.

Collapse

title1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione rerum nisi quidem explicabo! Cumque odit explicabo aliquid reprehenderit a deserunt.

title2

title3

<script setup lang="ts">
const expandedNames = ref(['1'])
</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse v-model:expanded-names="expandedNames">
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="3" title="title3">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

<script setup lang="ts">
const expandedNames = ref(['1'])
</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse v-model:expanded-names="expandedNames">
        <o-collapse-item name="1" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="3" title="title3">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

Custom title

Besides using the title attribute, you can customize panel title with named slots, which makes adding custom content, e.g. icons, possible.

Collapse

title1

title2

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1">
          <template #title>
            <div text-primary>
              title1
            </div>
          </template>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2">
          <template #title>
            <div text-secondary>
              title2
            </div>
          </template>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1">
          <template #title>
            <div text-primary>
              title1
            </div>
          </template>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2">
          <template #title>
            <div text-secondary>
              title2
            </div>
          </template>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

Arrow placement

Arrow placement on item.

Collapse

title1

title2

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1" arrow-placement="right" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" arrow-placement="right" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

<script setup lang="ts">

</script>

<template>
  <o-card title="Collapse">
    <div space-y-2>
      <o-collapse>
        <o-collapse-item name="1" arrow-placement="right" title="title1">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
        <o-collapse-item name="2" arrow-placement="right" title="title2">
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Ratione rerum nisi quidem explicabo!
            Cumque odit explicabo aliquid reprehenderit a deserunt.
          </div>
          <div>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Tempora architecto nemo, ducimus totam unde minus voluptatem,
            hic tenetur fugit natus saepe veritatis? Ipsa est blanditiis perspiciatis rerum hic voluptatem a!
          </div>
        </o-collapse-item>
      </o-collapse>
    </div>
  </o-card>
</template>

Collapse Props

Name	Type	Default	Description
arrordion	`boolean`	`false`	Accordion mode.
expandedNames	`Array<string \| number>`	`[]`	Contains the names of the expanded panels.

CollapseItem Props

Name	Type	Default	Description
title	`string`	`undefined`	Display collapse item title.
icon	`string`	`undefined`	Display icon before title.
disabled	`boolean`	`false`	Disabled collapseItem.
arrow-placement	`'left' \| 'right'`	`left`	Display arrow placement in collapse item.

CollapseItem Slots

Name	Parameters	Description
default	`()`	Collapse item content.
title	`()`	Collapse item title text.
icon	`()`	Collapse item icon.

CollapseItem Methods

Name	Parameters	Description
change	`(value: CollapseActiveName) => typeof isNumber(value) \|\| isString(value) \|\| isArray(value)`	Triggers when click collapse item.

Collapse #

Basic usage #

Collapse

Accordion #

Collapse

ExpandedNames #

Collapse

Custom title #

Collapse

Arrow placement #

Collapse

Collapse Props #

CollapseItem Props #

CollapseItem Slots #

CollapseItem Methods #

Collapse

Basic usage

Accordion

ExpandedNames

Custom title

Arrow placement

Collapse Props

CollapseItem Props

CollapseItem Slots

CollapseItem Methods