预设类名

平台预设了一些常用的CSS类以供我们日常使用。这些类名通常以z开头,以免跟我们自己写的类名发生冲突。

zpage

页面根节点的类名和ID名。

zbtn

按钮。默认是白底黑字,加上zprimary类就变成蓝底白字的主按钮,zdanger表示危险,zdisable表示不可用,zlg表示大按钮。还可以把file类型的input组件放在zbtn里面作为上传按钮。
可以用zbtns把一组zbtn按钮包裹起来组成按钮组。

znone

no padding,no margin & no list-style的意思

zflex

display: flex !important;

zcenter

居中对齐

zhide,zshow

分别是隐藏、显示

zhidden

元素不可见

zellipsis

用省略号隐藏超出范围的文本

zhand

手型鼠标

zinput

输入框,大量用于input和textarea。

zrequire

必填,会在目标元素前加个红色星号

zinvalid

无效输入,会是元素背景色和边框色变红,常用来提示用户输入错误或未输入或未选择

ztab

标签项,多个ztab组合在一起构成导航/分组按钮,插件市场就是用它来给插件分类的。
zcur表示当前活跃项,zlg表示大按钮

zarticle

文章,常用于html组件,以呈现默认的富文本样式。

ztable

表格,常用于table组件,用以呈现默认的表格样式。

zmodal

模态框,标准模态框会用zmodals作为外层容器,用zmask作为第一个子组件,然后是zmodal子组件。zmodal里面可以先放一个svg图标来关闭模态框,然后是zmodal_hd作为header,zmodal_bd作为body,zmodal_ft作为footer,里面放zbtn按钮。
可以有多个zmodal并排放,每个zmodal有自己的渲染条件。

zcell

窄列表,常用在移动端作为列表项。ZC编辑模式右边的属性面板也大量使用。
通常用zcells作为容器,如果列表项是链接可加上zcells_access,zcells前面可以使用zcells_title来作为这组列表的标题。zcell里可用zcell_bd作为body,zcell_ft作为footer。
zcells之间可以酌情使用zdivider来分割。
zcell里面放的label,input,textarea,switch都会有特殊样式。

zform_字段名

表单组件会有个zform_{字段名}类名

zmobile,zdesktop

分别表示移动端和桌面端设备,统一设计时常把它加到选择器前面以应用不同的样式到对应设备中。

zmscreen

窄屏,designed for small screen的意思。常用在专为移动端设计的页面上,但也想让桌面端共用此页面而不单独设计。在根节点加上zmscreen能使窄屏页面在宽屏上居中显示。

Make in ZC APP Platform