Box

将信息聚合于 Box 组件中展示。

基础用法

Box 标题

Box 正文

<cb-box theme="default" title="Box 标题">
  <p>Box 正文</p>
</cb-box>

可折叠的

Box 标题

Box 正文

<cb-box title="Box 标题" collapsable>
  <p>Box 正文</p>
</cb-box>

Solid 风格

Box 标题

Box 正文

<cb-box title="Box 标题" solid>
  <p>Box 正文</p>
</cb-box>

附带操作按钮

Box 标题

Box 正文

<cb-box title="Box 标题" collapsable>
  <template #tools>
    <cb-button theme="box-tool"><cb-icon name="edit" /></cb-button>
  </template>
  <p>Box 正文</p>
</cb-box>

自定义头部内容

自定义头部内容

Box 正文

<cb-box>
  <template #header>
    <h3 class="box-title"><cb-icon name="edit" />自定义头部内容<cb-icon name="chrome" /></h3>
  </template>
  <p>Box 正文</p>
</cb-box>

自定义标题内容

自定义标题内容

Box 正文

<cb-box>
  <template #title>
    <cb-icon name="edit" />自定义标题内容<cb-icon name="chrome" />
  </template>
  <p>Box 正文</p>
</cb-box>

属性

参数 说明 类型 可选值 默认值
theme 风格 string default / primary / success / info / warning / danger default
title 标题 string — —
icon 标题图标名称，图标名称请参考图标组件的文档。 string — —
collapsable 是否是可折叠的 Box。 boolean — false
collapsed 如果是可折叠的 Box，默认是否折叠起来。 boolean — false
solid 是否是 solid 风格的 Box。 boolean — false
header-border 头部区域是否带下边框。 boolean — true
header-class 头部附加样式 class。 string — —
body-class 主体附加样式 class。 string — —

插槽

名称 说明
header 头部内容。
title 头部里的标题内容。
tools 头部里的右侧区域内容。
addition-header 附加的头部内容，一般用于有多个头部的时候。
footer 尾部内容。
addition 尾部后面的附加内容。