Small Box

一种显示数据的风格。

基础用法

150

新订单

更多内容

53%

跳出率

更多内容

44

用户注册

更多内容

65

独立访客

更多内容 
<cb-row>
  <cb-col span="3">
    <cb-small-box theme="aqua" icon="shopping-cart" title="150" text="新订单">
      <template #footer>
        <a href="#">更多内容 <cb-icon name="arrow-circle-right" /></a>
      </template>
    </cb-small-box>
  </cb-col>
  <cb-col span="3">
    <cb-small-box theme="green" text="跳出率">
      <template #icon>
        <cb-icon type="ion" name="stats-bars" />
      </template>
      <template #title>
        53<sup style="font-size: 20px;">%</sup>
      </template>
      <template #footer>
        <a href="#">
          更多内容 <cb-icon name="arrow-circle-right" />
        </a>
      </template>
    </cb-small-box>
  </cb-col>
  <cb-col span="3">
    <cb-small-box theme="yellow" title="44" text="用户注册">
      <template #icon>
        <cb-icon type="ion" name="person-add" />
      </template>
      <template #footer>
        <a href="#">
          更多内容 <cb-icon name="arrow-circle-right" />
        </a>
      </template>
    </cb-small-box>
  </cb-col>
  <cb-col span="3">
    <cb-small-box theme="red" title="65" text="独立访客">
      <template #icon>
        <cb-icon type="ion" name="pie-graph" />
      </template>
      <template #footer>
        <a href="#">
          更多内容 <cb-icon name="arrow-circle-right" />
        </a>
      </template>
    </cb-small-box>
  </cb-col>
</cb-row>

属性

参数 说明 类型 可选值 默认值
theme 风格 string 参考色彩文档 —
icon 图标区域的图标名称，只支持 Font Awesome 分类的图标，如需要其他图标请使用 icon 插槽 string 参考图标文档 —
title 顶部文字内容 string — —
text 中间文字内容 string — —

插槽

名称 说明
default 自定义中间区域内容，如果提供了 text 属性则不需要使用此插槽
icon 自定义图标区域内容
title 自定义顶部区域内容
footer 自定义底部区域内容