折叠项（+手风琴）（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相关组件继承属性：

继承的属性 类型 说明
icon，right-icon 字符串 要使用的图标。使用图标、图像、头像或字母。
image，right-image 字符串 要使用的图像的URL（指向静态）。使用图标、图像、头像或字母。
avatar，right-avatar` 字符串 要使用的头像的URL（指向静态）。使用图标、图像、头像或字母。
letter，right-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>
卡片 数据表