MUUI

列表

基于muui书写移动短列表非常方便,也非常灵活,如下代码块,muui-list为列表的容器.

摇太阳

单行截取 line-clamp-1:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于
单行截取 line-clamp-1:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于

摇太阳
2行截取 line-clamp-2:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

催急超
3行截取 line-clamp-1:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

[娱乐新闻] CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于

来源:网易新闻
3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

来源:网易新闻
3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性
3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于

来源:网易新闻
摇太阳

3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于


3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性

CSS 类选择器 CSS 创建对带有指定属性的 HTML 元素设置样式。可以为拥有指定属性的 HTML 元素设置样式,而不仅限于


3行截取 line-clamp-3:用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性



<ul class="muui-list">
  <li muui-ac="click-active" class="muui-item muui-border">
    <div class="muui-table">
      <div class="muui-cell image-cell">
         <img src="images/img_default.png">
         <div class="small">摇太阳</div>
      </div>
      <div class="muui-cell">
        <div class="main-info line-clamp-1">单行截取</div>
        <div class="small">右侧图片展示</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行截取</div>
          <div class="small">左侧图片展示</div>
        </div>
        <div class="muui-cell image-cell">
           <img src="images/img_default.png">
           <div class="small">摇太阳</div>
        </div>
      </div>
    </li>
</ul>

按钮

muui的按钮默认有3中形态,通栏按钮,行内按钮,小按钮

按钮样式1

按钮样式2

muui.confirm()

muui.toast()

muui.loading()

muui.pickerpage()

muui.pickermodal()

行内按钮

小按钮

行内按钮

<div data-type="primary" class="muui-btn" >按钮样式1</div>
<div data-type="danger" class="muui-btn" >按钮样式2</div>
<div data-type="success" class="muui-btn" >muui.confirm()</div>
<div data-type="warning" class="muui-btn" >muui.toast()</div>
<div data-type="info" class="muui-btn" >muui.loading()</div>
<div data-type="primary" class="muui-btn" >muui.pickerpage()</div>
<div data-type="primary" class="muui-btn">muui.pickermodal()</div>
<br>
<h3>行内按钮</h3>
<hr>
<div data-type="primary" class="muui-btn inline-block">按钮</div>
<div data-type="danger" class="muui-btn inline-block">按钮</div>
<div data-type="success" class="muui-btn inline-block">按钮</div>
<div data-type="info" class="muui-btn inline-block">按钮</div>
<br>
<h3>小按钮</h3>
<hr>
<div data-type="primary" class="muui-btn btn-sm">按钮</div>
<div data-type="danger" class="muui-btn btn-sm">按钮</div>
<div data-type="success" class="muui-btn btn-sm">按钮</div>
<div data-type="info" class="muui-btn btn-sm">按钮</div>

表单

muui的表单样式包含了基本的表单样式,包含了输入框,提示等,具体查看详细示例

输入框

姓名

电话

发送验证码

年龄





地址



输入框

单选

这里是单选(男)

这里是单选(女)

复选框

这里是多选(地址1)

这里是多选(地址2)

图片上传

输入框2

文本域



表单展示

年龄

这里是表单内容展示

性别

男

地址

光谷软件园

地址

我有个table要获取数据,当列中显示的是中文是,不管有多少个中文字符,每列都会...中文得到的数据超过了列宽它会换行显示。英文,数字的就不会。

阅读并同意 yaotaiyang

提交

<form class="muui-form" action="">
   <dt>输入框</dt>
   <dl class="muui-list muui-border">
     <li class="muui-item muui-border">
       <label class="muui-table">
         <div class="muui-cell align-middle muui-label">
               姓名
         </div>
         <div class="muui-cell align-middle">
               <input type="text" placeholder="请输入姓名">
         </div>
       </label>
     </li>
     ……
   </dl>
   <div class="muui-agree muui-gray"><label>
       <input type="checkbox"><i class="muui-font"></i>
       阅读并同意 <span class="muui-color">yaotaiyang</span>
   </label>
   </div>
   <div muui-ac="click-active" data-type="primary" class="muui-btn">提交</div>
</form>

头部与底部

muui给了一个简单的头部与底部样式,代码较简单.


首页
8

我
10

收藏

设置

<div class="muui-searchbar">
 <form>
   <div class="muui-table">
       <label class="muui-cell input">
         <i class="muui-font search-icon">&#xe752;</i>
         <input placeholder="搜索" type="text" name="query" class="search-input">
       </label>
       <div muui-ac="click-active" onclick="return" class="muui-cell align-middle cancel">
         <div>取消</div>
       </div>
   </div>
 </form>
</div>
   <div class="muui-bottom ">
     <ul class="muui-table">
       <li muui-ac="click-active" class="selected muui-cell muui-border"><i class="muui-font">&#xe750;</i><div class="x-small">首页</div><i class="muui-red">8</i></li>
       <li muui-ac="click-active" class="muui-cell muui-border"><i class="muui-font">&#xe75e;</i><div class="x-small">我</div><i class="muui-red">10</i></li>
       <li muui-ac="click-active" class="muui-cell muui-border"><i class="muui-font">&#xe733;</i><div class="x-small">收藏</div></li>
       <li muui-ac="click-active" class="muui-cell muui-border"><i class="muui-font">&#xe74c;</i><div class="x-small">设置</div><i class="muui-dot"></i>
       </li>
     </ul>
   </div>

文章内容详情

muui给了一个简单的文章展示.

muui包含了一些基本的样式与交互

文章 muui新闻

muui包含了一些基本的样式与交互,让你写起移动端更快...

<div class="muui-article">
   <div class="muui-header">
       <h3 class="muui-title">muui包含了一些基本的样式与交互</h3>
       <p class="muui-desc small">文章 <span class="muui-color">muui新闻</span></p>
   </div>
   <div class="muui-body">
       <p>muui包含了一些基本的样式与交互,让你写起移动端更快...</p>
       <p>muui包含了一些基本的样式与交互,让你写起移动端更快...</p>
       <p class="align-center"><img src="assets/image/muui.png"></p>
       <p>muui包含了一些基本的样式与交互,让你写起移动端更快...</p>
   </div>
   </div>