mui 通用类
最近要用 mui 框架写一个项目。
于是根据官网资料和查阅资料整理了一下 mui 常用的 css 类。
注意：
一切内容都要包裹在 .mui-content 中，否则就有可能被固定栏遮罩，除了固定栏之外。
固定栏是指带有 .mui-bar 属性的节点，他们都是基于 fixed 定位的，使用时需遵循一个规则：放在.mui-content 元素之前。
即使是底部工具条和底部选项卡，也要放在 .mui-content 之前，否则固定栏会遮住部分主内容。
颜色（color）
danger 红色(red)
warning 黄色(yellow)
primary 蓝色(blue)
success 绿色(green)
- royal 紫色(purple)
注意：.mui-btn-primary 等效于.mui-btn-blue;
背景颜色
可以给任意元素添加 .mui-bg-*类添加背景颜色，可选参数为 primary/positive/negative。
1 | <div class="mui-bg-negative">红色背景</div> |
示例图：
badge（数字角标）
角标的核心类是 .mui-badge，默认为实心灰色背景；同时，mui 还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：
1 | <span class="mui-badge">默认灰色</span> |
示例图：
如果不要底色，则增加 .mui-badge-inverted 类即可，如下：
1 | <span class="mui-badge mui-badge-inverted">默认灰色</span> |
示例图：
按钮
在 button 节点上增加.mui-btn 类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应 class 即可。
默认按钮有底色，运行效果如下：
1 | <button type="button" class="mui-btn">默认</button> |
示例图：
若希望无底色、有边框的按钮，仅需增加 .mui-btn-outlined 类即可，代码如下：
1 | <button type="button" class="mui-btn mui-btn-outlined">默认</button> |
示例图：
字体样式
文字对齐
通过 .mui-text-*来控制文字对齐方式,代码如下：
1 | <div class="mui-text-left mui-bg-negative">居左</div> |
示例图：
文字溢出省略
.mui-ellipsis 来控制文字溢出省略
需要设置显示多行，通过设置-webkit-line-clamp 属性，如显示三行添加 style=”-webkit-line-clamp:3”，代码如下：
1 | <p class="mui-ellipsis">超出一行的文字省略，超出一行的文字省略，超出一行的文字省略，超出一行的文字省略</p> |
示例图：
浮动
给元素设置.mui-pull-left 或者.mui-pull-right 类，设置浮动。
使用.mui-clearfix 清除浮动。
1 | <div class="mui-clearfix"> |
示例图：
元素显示和隐藏
.mui-visibility 默认为设置元素可见，.mui-hidden 默认为设置元素隐藏。
注意：元素隐藏不占据位置。
转为行内或块级元素
设置成行内元素：给元素设置 .mui-inline 类
设置成块级元素：给元素设置 .mui-block 类
