平台预设了一些常用的CSS类以供我们日常使用。这些类名通常以z
开头,以免跟我们自己写的类名发生冲突。
页面根节点的类名和ID名。
按钮。默认是白底黑字,加上zprimary
类就变成蓝底白字的主按钮,zdanger
表示危险,zdisabled
表示不可用,zlg
表示大按钮。还可以把file类型的input组件放在zbtn里面作为上传按钮。
可以用zbtns
把一组zbtn按钮包裹起来组成按钮组。
no padding,no margin & no list-style的意思
display: flex !important;
居中对齐
分别是隐藏、显示
元素不可见
用省略号隐藏超出范围的文本
手型鼠标
输入框,大量用于input和textarea。
必填,会在目标元素前加个红色星号
无效输入,会是元素背景色和边框色变红,常用来提示用户输入错误或未输入或未选择
标签项,多个ztab组合在一起构成导航/分组按钮,插件市场就是用它来给插件分类的。zcur
表示当前活跃项,zlg
表示大按钮
文章,常用于html组件,以呈现默认的富文本样式。
表格,常用于table组件,用以呈现默认的表格样式。
模态框,标准模态框会用zmodals
作为外层容器,用zmask
作为第一个子组件,然后是zmodal
子组件。zmodal
里面可以先放一个svg图标来关闭模态框,然后是zmodal_hd
作为header,zmodal_bd
作为body,zmodal_ft
作为footer,里面放zbtn
按钮。
可以有多个zmodal并排放,每个zmodal有自己的渲染条件。
窄列表,常用在移动端作为列表项。ZC编辑模式右边的属性面板也大量使用。
通常用zcells
作为容器,如果列表项是链接可加上zcells_access
,zcells前面可以使用zcells_title
来作为这组列表的标题。zcell里可用zcell_bd
作为body,zcell_ft
作为footer。
zcells之间可以酌情使用zdivider
来分割。
zcell里面放的label,input,textarea,switch都会有特殊样式。
表单组件会有个zform_{字段名}类名
分别表示移动端和桌面端设备,统一设计时常把它加到选择器前面以应用不同的样式到对应设备中。