Info Box

一种显示数据的风格。

基础用法

消息 1,410
书签 410
上传 13,648
点赞 93,139 
<cb-row>
  <cb-col span="3">
    <cb-info-box icon-theme="aqua" icon="envelope-o" text="消息" number="1,410" />
  </cb-col>
  <cb-col span="3">
    <cb-info-box icon-theme="green" icon="flag-o" text="书签" number="410" />
  </cb-col>
  <cb-col span="3">
    <cb-info-box icon-theme="yellow" icon="files-o" text="上传" number="13,648" />
  </cb-col>
  <cb-col span="3">
    <cb-info-box icon-theme="red" icon="star-o" text="点赞" number="93,139" />
  </cb-col>
</cb-row>

带进度条的风格

书签 1,410
70%
30 天增加了 70%
点赞 1,410
70%
30 天增加了 70%
日程 1,410
70%
30 天增加了 70%
评论 1,410
70%
30 天增加了 70% 
<cb-row>
  <cb-col span="3">
    <cb-info-box theme="aqua" icon="bookmark-o" text="书签" number="1,410" footer="30 天增加了 70%">
      <cb-progress value="70" />
    </cb-info-box>
  </cb-col>
  <cb-col span="3">
    <cb-info-box theme="green" icon="thumbs-o-up" text="点赞" number="1,410" footer="30 天增加了 70%">
      <cb-progress value="70" />
    </cb-info-box>
  </cb-col>
  <cb-col span="3">
    <cb-info-box theme="yellow" icon="calendar" text="日程" number="1,410" footer="30 天增加了 70%">
      <cb-progress value="70" />
    </cb-info-box>
  </cb-col>
  <cb-col span="3">
    <cb-info-box theme="red" icon="comments-o" text="评论" number="1,410" footer="30 天增加了 70%">
      <cb-progress value="70" />
    </cb-info-box>
  </cb-col>
</cb-row>

属性

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

插槽

名称 说明
default 自定义中间区域内容，一般用于增加进度条
icon 自定义图标区域内容
text 自定义顶部区域内容
number 自定义中间数字区域内容
footer 有进度条时，自定义进度条下面的内容