MUUI

颜色

muui定义了几种颜色,主要设置style中的color颜色,通过class来设置颜色

<style>
    .demo-color div{display:inline-block;margin-right:10px;margin-top:10px;}
</style>
……
<div class="demo-color">
    <div class='muui-color'>我是.muui-color颜色</div>
    <div class='muui-danger'>我是.muui-danger颜色</div>
    <div class='muui-success'>我是.muui-success颜色</div>
    <div class='muui-info'>我是.muui-info颜色</div>
    <div class='muui-warning'>我是.muui-warning颜色</div>
</div>

背景色

muui定义了几种背景色,主要设置style中的background-color颜色,通过data-type来设置颜色

<style>
    .demo-color div{display:inline-block;padding:8px;margin-right:10px;margin-top:10px;}
</style>
……
<div class="demo-bg-color">
    <div class='muui-bg-color'>我是muui背景颜色</div>
    <div class='muui-bg-danger'>我是danger背景颜色</div>
    <div class='muui-bg-success'>我是success背景颜色</div>
    <div class='muui-bg-info'>我是info背景颜色</div>
    <div class='muui-bg-warning'>我是warning背景颜色</div>
</div>

边框

移动端边框容易比较粗,为了解决这个问题,用图片边框来解决.(好处就是使用起来简单,性能好,不增加dom,不占用伪类,坏处,不能设置颜色),添加class="muui-border"通过各个边框border的宽度1px来设置现实边框

<style>.muui-border{display:inline-block;padding:10px;margin-right:10px;}</style>
……
<div></div>
<div class='muui-border' style='border-width:1px'>我旁边有一圈边框</div>
<div class='muui-border' style='border-top-width:1px'>我有上边框</div>
<div class='muui-border' style='border-left-width:1px'>我有左边框</div>
<div class='muui-border' style='border-right-width:1px'>我有右边框</div>
<div class='muui-border' style='border-bottom-width:1px'>我有下边框</div>

table中的边框

    <style>
       .table-demo-border{border-collapse: inherit;width:100%}
       .table-demo-border td{border-top-width:1px;border-right-width:1px;padding:8px;}
       .table-demo-border td:first-child{border-left-width:1px;}
       .table-demo-border tr:last-child td{border-bottom-width:1px;}
    </style>
    ……
    <table class="table-demo-border">
        <tr>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
        </tr>
        <tr>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
        </tr>
        <tr>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
            <td class="muui-border">我也有边框</td>
        </tr>
    </table>

文字截取

文字截取省略号,通过样式 .line-clamp-1,.line-clamp-2,.line-clamp-3,.line-clamp-4进行多行截取

<ul class="muui-list">     
  <li muui-ac="click-active" class="muui-item muui-border">
     <div class="muui-table">
        <div class="muui-cell">
          <div class="main-info line-clamp-1">单行截取 line-clamp-1:用来限制在一个块元素显示的文本的行数</div>
        </div>
     </div>
  </li>
  <li muui-ac="click-active" class="muui-item muui-border">
     <div class="muui-table">
       <div class="muui-cell">
          <div class="main-info line-clamp-2">2行截取 line-clamp-2:用来限制在一个块元素显示的文本的行数。 </div>
       </div>
     </div>
  </li>
</ul>

点击态

移动短操作中,常常要点击时获得反馈,传统的active在移动端有些许兼容性不好,故mmui用js实现了一个.用属性muui-ac="xxx" 来实现,当有该属性的dom,被点击时,点击的瞬间,dom的class上,会被加上muui-ac的属性值.全局上自定义了muui-ac="click-active"属性,如果需要点击态效果,在dom上添加该属性和值即可.具体查看demo:(请开启浏览器的手机模拟查看点击效果,或用手机扫码以下二维码,列表点按钮等,皆有点击态效果)

https://yaotaiyang.github.io/muui/example/

 <style>
     .demo-active div.active-color{color:#f00}
 </style>
 ……
 <div class="demo-active">
     <div muui-ac='active-color'>点击我,将会被加上class‘active-color’</div>
 </div>