展开项 | Quasar Framework

为什么捐赠

API 浏览器

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Vue 组件

Buttons 按钮

Circular Progress 环形进度条

Floating Action Button 浮动操作按钮

Form Components 表单组件

Linear Progress 线性进度条

List & List Items 列表与列表项

Markup Table 标记表格

Menu 菜单

No SSR

Observers 观察者

Resize Observer 尺寸观察者

Scroll Observer 滚动观察者

Slide Transition 滑动过渡

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

联系站长

展开项

QExpansionItem 组件用于隐藏那些不需要立即展示给用户的内容。你可以把它理解为一个点击即可展开的手风琴元素，也常被称为折叠面板。

它们本质上是 QItem 组件的增强封装，因此可以放在 QList 中使用，并继承 QItem 的所有属性。

用法

基础用法

控制展开状态

样式

选项

关于缩进级别，有一个通用的经验法则：header-inset-level 为头部添加左侧内边距，但不影响内容区域；而 content-inset-level 则为内容区域添加左侧内边距。

行为

TIP

下面这个"仅通过展开图标切换"的行为在 QExpansionItem 头部绑定了路由的场景下特别有用。这样一来，点击头部会跳转路由，而点击展开图标则负责展开/折叠内容，两个操作互不干扰。显然，你无法把这两种行为同时绑定到整个头部上。

发现错误？在浏览器中编辑此页

1. Introduction

2. QExpansionItem API

3. 用法

3.1. 基础用法

3.2. 控制展开状态

3.3. 样式

3.4. 选项

3.5. 行为