# 基础示例
点我打开/关闭
代码能够运行并满足业务要求是最低标准
<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
则会从上方展开