基础示例

点我打开/关闭

代码能够运行并满足业务要求是最低标准

<template>
  <c-expansion title="点我打开/关闭">
    <div class="c-px-lg">
      <p>代码能够运行并满足业务要求是最低标准</p>
    </div>
  </c-expansion>
</template>
点击展开/收起代码
点击打开交互式编辑器

标题图标

标题左侧图标

代码能够运行并满足业务要求是最低标准

自定义icon插槽图标

代码能够运行并满足业务要求是最低标准

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

<template>
  <c-expansion
    title="标题左侧图标"
    :icon="matPeople"
  >
    <div class="c-px-lg">
      <p>代码能够运行并满足业务要求是最低标准</p>
    </div>
  </c-expansion>
  <c-expansion title="自定义icon插槽图标">
    <template #icon>
      <img
        style="width: 80px;"
        src="/logo-dark.svg"
      >
    </template>
    <div class="c-px-lg">
      <p>代码能够运行并满足业务要求是最低标准</p>
    </div>
  </c-expansion>
</template>
点击展开/收起代码
点击打开交互式编辑器

自定义箭头

自定义arrow插槽图标

你可以通过expandStatus为展开/折叠状态设置不同的icon

自定义arrow插槽图标

你可以通过expandStatus为展开/折叠状态设置不同的icon

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

<template>
  <c-expansion title="自定义arrow插槽图标">
    <template #arrow>
      <c-icon :content="matArrowCircleDown" />
    </template>
    <div class="c-px-lg">
      <p>你可以通过<code>expandStatus</code>为展开/折叠状态设置不同的icon</p>
    </div>
  </c-expansion>
  <c-expansion title="自定义arrow插槽图标">
    <template #arrow="{ expandStatus }">
      <c-icon :content="expandStatus ? matPeople : matNaturePeople" />
    </template>
    <div class="c-px-lg">
      <p>你可以通过<code>expandStatus</code>为展开/折叠状态设置不同的icon</p>
    </div>
  </c-expansion>
</template>
点击展开/收起代码
点击打开交互式编辑器

从上方展开

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>
点击展开/收起代码
点击打开交互式编辑器

CExpansion API

Props
Slots
Events
icon
string
默认值  ''

图标

title
string
默认值  ''

标题

modelValue
boolean
默认值  false

是否展开,用于v-model默认绑定

reverse
boolean
默认值  false

是否反向展开,如果设置为true则会从上方展开