Skip to content

面板

基本使用

一个面板通常包含标题,内容,底部三部分。标题,底部可按需选择使用。

面板标题

面板内容

不同主题

除默认主题外,另外提供6种主题样式。

面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容

面板组

搭配CSS工具类 space-* 可实现面板组效果。

面板标题
面板内容
面板标题
面板内容
面板标题
面板内容

与表格组合使用

包含表格
项目名称负责人计划开始计划完成
ZUI1研发今天今天
ZUI2研发明天明天
ZUI3研发后天后天

CSS 类

面板提供了如下 CSS 类:

类型作用
panel实体类元素作为面板组件
panel-heading实体类元素作为面板头部组件
panel-title实体类元素作为面板头部标题组件
panel-body实体类元素作为面板主体组件
panel-footer实体类元素作为面板尾部组件

CSS 变量

面板提供了如下 CSS 变量:

变量名称变量含义
--panel-heading-bg标题背景色
--panel-footer-bg底部背景色