折叠项(+手风琴)(Collapsible (+ Accordion) )

Quasar折叠项允许隐藏与用户不直接相关的内容。 把它们想象成手风琴元素,当点击时它们会扩大。

它们基本上是用额外功能包装的QItem组件。 所以它们可以包含在QLists中并继承QItem组件属性。

安装

编辑 /quasar.conf.js:

framework: {
components: ['QCollapsible']
}

基本用法

<q-list>
<q-collapsible icon="explore" label="First">
<div>
Content
</div>
</q-collapsible>
<q-collapsible icon="perm_identity" label="Second">
<div>
Content
</div>
</q-collapsible>
<q-collapsible icon="shopping_cart" label="Third">
<div>
Content
</div>
</q-collapsible>
</q-list>

手风琴

您可以将多个折叠项组合为一个手风琴,即一次只能打开一个折叠项,同时自动关闭其他折叠项。 为此,使用Vue属性group并在折叠项的Vue父容器中指定一个唯一的名称。

<q-list>
<q-collapsible group="somegroup" icon="explore" label="First">
<div>
Content
</div>
</q-collapsible>
<q-collapsible group="somegroup" icon="perm_identity" label="Second">
<div>
Content
</div>
</q-collapsible>
<q-collapsible group="somegroup" icon="shopping_cart" label="Third">
<div>
Content
</div>
</q-collapsible>
</q-list>

Vue属性

由于QCollapsible是QItem组件的包装,因此它可以继承它们的一些属性,如下所示。

支持v-model来控制状态(打开/关闭)。

自有属性 类型 说明
opened 布尔 控制第一次渲染时是否打开折叠。
group 字符串 独特的名称,可以将多个折叠项分组,以便用作手风琴。
popup 布尔 “弹出”模式而不是默认行为。
indent 布尔 缩进折叠项内容。使用它建立菜单时很有用。
icon-toggle 布尔 只需点击/轻按右侧的箭头即可展开。
collapse-icon 字符串 使用图标代替右侧的默认箭头。
header-style 数组/字符串/对象 绑定头部的Vue样式。
header-class 数组/字符串/对象 绑定头部的Vue类。
disable 布尔 禁用当前的折叠项。

QItem&QItem相关组件继承属性:

继承的属性 类型 说明
iconright-icon 字符串 要使用的图标。使用图标、图像、头像或字母。
imageright-image 字符串 要使用的图像的URL(指向静态)。使用图标、图像、头像或字母。
avatarright-avatar` 字符串 要使用的头像的URL(指向静态)。使用图标、图像、头像或字母。
letterright-letter 字符串 一个定义字母的字符字符串。使用图标、图像、头像或字母。
label 字符串 用作标题的标签。
sublabel 字符串 用作副标题的标签。
label-lines 字符串/数字 标签可以跨越的行数。溢出时使用省略号。
sublabel-lines 字符串/数字 副标签可以跨越的行数。溢出时使用省略号。
dense 布尔 使用密集的QItem。
sparse 布尔 使用一个稀疏的QItem。
multiline 布尔 使用多行QItem。在使用跨越多行的标签和副标签的情况下很有用,但即使如此也是可选的。
separator 布尔 使用其他QItem或QCollapsible中的分隔符,就像在QItem上一样。
inset-separator 布尔 插入分隔符,与separator相同的行为。

Vue方法

Vue方法 说明
toggle() 切换打开/关闭状态。
show() 打开它。
hide() 关闭它。

Vue事件

Vue方法 说明
@show 在打开折叠项后触发。
@hide 在收起折叠项后触发。

例子

使用v-model

<template>
<q-collapsible
v-model="open"
icon="perm_identity"
label="With a model and events"
>
<div>...content...</div>
</q-collapsible>
</template>

<script>
export default {
data () {
return { open: true }
},
methods: {
toggle () {
this.open = !this.open
}
}
}
</script>

自定义头部

<q-collapsible>
<template slot="header">
<q-chip color="primary" small class="q-mr-sm">
Custom header
</q-chip>
<q-item-main label="using slot" />
<q-item-side right>
<q-icon name="star" color="red" size="24px" />
</q-item-side>
</template>

<div>Collapsible content</div>
</q-collapsible>

弹出(Popup)模式

<q-collapsible popup icon="mail" label="Inbox" sublabel="5 unread emails">
<div>...content...</div>
</q-collapsible>
<q-collapsible popup icon="send" label="Outbox" sublabel="Empty">
<div>...content...</div>
</q-collapsible>

创建一个菜单

<q-list separator>
<q-collapsible indent icon="mail" label="Inbox" sublabel="5 unread emails" opened>

<q-collapsible indent icon="receipt" label="Receipts">

<q-collapsible label="Today">
<div>...content...</div>
</q-collapsible>
<q-collapsible label="Yesterday">
<div>...content...</div>
</q-collapsible>

</q-collapsible>

<q-collapsible indent icon="schedule" label="Postponed">
<div>...content...</div>
</q-collapsible>

</q-collapsible>

<q-collapsible indent icon="send" label="Outbox" sublabel="Empty">
<q-collapsible label="Today">
<div>...content...</div>
</q-collapsible>
<q-collapsible label="Yesterday">
<div>...content...</div>
</q-collapsible>
</q-collapsible>

<q-collapsible indent icon="drafts" label="Draft" sublabel="Draft a new email">
<div>...content...</div>
</q-collapsible>
</q-list>

预选中项

折叠项可以默认打开:

<q-collapsible opened icon="explore" label="First">
<div>
Content
</div>
</q-collapsible>

<!-- or -->
<q-collapsible :opened="boolean_variable" icon="explore" label="First">
<div>
Content
</div>
</q-collapsible>

缩进内容

在构建复杂菜单(使用子菜单)时(例如在QLayout的左侧或右侧),折叠项内容也可以使用某种左侧缩进:

<q-collapsible indent icon="explore" label="First">
<q-item link ...>...</q-item>
<q-item link ...>...</q-item>
<q-item link ...>...</q-item>
</q-collapsible>

使用事件

<template>
<q-collapsible
indent
icon="explore"
label="Counter"
@show="startCounting"
@hide="stopCounting"
>
<div>
<q-chip color="secondary">
Counting: {{ counter }}
</q-chip>
</div>
<div class="q-mt-md">
Will only count when opened, using the show/hide events to control count timer.
</div>
</q-collapsible>
</template>

<script>
export default {
data () {
return {
counter: 0
}
},
methods: {
startCounting () {
this.hndl = setInterval(() => {
this.counter++
}, 1000)
},
stopCounting () {
clearInterval(this.hndl)
}
}
}
</script>

无处不在

有创意。 在下面的例子中,我们使用卡片作为折叠项内容。

<q-collapsible icon="explore" label="First Card" sublabel="Contains a Card">
<q-card>
<q-card-title>
Card Title
</q-card-title>
<q-card-main>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</q-card-main>
</q-card>
</q-collapsible>