Basic Usage

Open to expand/fold

Hello, world

<template>
  <c-expansion title="Open to expand/fold">
    <div class="c-px-lg">
      <p>Hello, world</p>
    </div>
  </c-expansion>
</template>

Click to open/fold code

Open Vue Repl Editor

Title Icon

A custom icon

Hello, world

A custom icon with icon slot

Hello, world

<script setup>
import { matPeople } from '@quasar/extras/material-icons/index'
</script>

<template>
  <c-expansion
    title="A custom icon"
    :icon="matPeople"
  >
    <div class="c-px-lg">
      <p>Hello, world</p>
    </div>
  </c-expansion>
  <c-expansion title="A custom icon with icon slot">
    <template #icon>
      <img
        style="width: 80px;"
        src="/logo-dark.svg"
      >
    </template>
    <div class="c-px-lg">
      <p>Hello, world</p>
    </div>
  </c-expansion>
</template>

Click to open/fold code

Open Vue Repl Editor

Custom Arrow

A custom arrow

Hello, world

Different custom arrow with expand/fold status

Hello, world

<script setup>
import {
  matArrowCircleDown,
  matNaturePeople,
  matPeople,
} from '@quasar/extras/material-icons/index.mjs'
</script>

<template>
  <c-expansion title="A custom arrow">
    <template #arrow>
      <c-icon :content="matArrowCircleDown" />
    </template>
    <div class="c-px-lg">
      <p>Hello, world</p>
    </div>
  </c-expansion>
  <c-expansion title="Different custom arrow with expand/fold status">
    <template #arrow="{ expandStatus }">
      <c-icon :content="expandStatus ? matPeople : matNaturePeople" />
    </template>
    <div class="c-px-lg">
      <p>Hello, world</p>
    </div>
  </c-expansion>
</template>

Click to open/fold code

Open Vue Repl Editor

Expand From Top

Some content

Expanded from top

<script setup>
import { CExpansion } from '@casual-ui/vue'
</script>

<template>
  <CExpansion
    title="Expanded from top"
    reverse
  >
    <p>Some content</p>
  </CExpansion>
</template>

Click to open/fold code

Open Vue Repl Editor

CExpansion API

Props

Slots

Events

icon

string

Default  ''

The icon string.

title

string

Default  ''

The title.

modelValue

boolean

Default  false

The expand status. Can be used with v-model.

reverse

boolean

Default  false

Determine whether to expand from top or not.