MUI

CSS组件

以ios7 UI为主体，补充android特有UI样式.

有底色
1 12 123 3 45 456
无底色（使用父元素背景色）
1 2 3 4 5 6

角标

Badges come in four flavors and should be used to indicate "how many" of something there are. Adding the a class of .mui-badge-inverted will remove the badges background color.

有底色
1 12 123 3 45 456
无底色（使用父元素背景色）
1 2 3 4 5 6 
<div class="mui-content-padded">
	<h5>有底色</h5>
	<span class="mui-badge">1</span>
	<span class="mui-badge mui-badge-primary">12</span>
	<span class="mui-badge mui-badge-success">123</span>
	<span class="mui-badge mui-badge-warning">3</span>
	<span class="mui-badge mui-badge-danger">45</span>
	<span class="mui-badge mui-badge-purple">456</span>
	<h5>无底色（使用父元素背景色）</h5>
	<span class="mui-badge mui-badge-inverted">1</span>
	<span class="mui-badge mui-badge-primary mui-badge-inverted">2</span>
	<span class="mui-badge mui-badge-success mui-badge-inverted">3</span>
	<span class="mui-badge mui-badge-warning mui-badge-inverted">4</span>
	<span class="mui-badge mui-badge-danger mui-badge-inverted">5</span>
	<span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div>

按钮

Buttons come in many flavors and should be used for user actions.

<button class="mui-btn">Button</button>
<button class="mui-btn mui-btn-primary">Button</button>
<button class="mui-btn mui-btn-positive">Button</button>
<button class="mui-btn mui-btn-negative">Button</button>
<button class="mui-btn mui-btn-link">Button</button>

<button class="mui-btn mui-btn-outlined">Button</button>
<button class="mui-btn mui-btn-primary mui-btn-outlined">Button</button>
<button class="mui-btn mui-btn-positive mui-btn-outlined">Button</button>
<button class="mui-btn mui-btn-negative mui-btn-outlined">Button</button>

带图标的按钮

Muiicons work inside buttons too.

<button class="mui-btn">
  <span class="mui-icon mui-icon-search"></span>
  Button
</button>
<button class="mui-btn mui-btn-primary">
  <span class="mui-icon mui-icon-search"></span>
  Button
</button>
<button class="mui-btn mui-btn-positive">
  <span class="mui-icon mui-icon-search"></span>
  Button
</button>
<button class="mui-btn mui-btn-negative">
  <span class="mui-icon mui-icon-search"></span>
  Button
</button>
<button class="mui-btn mui-btn-link">
  <span class="mui-icon mui-icon-left"></span>
  Button
</button>

带数字的按钮

<button class="mui-btn">Badge button <span class="mui-badge">1</span></button>
<button class="mui-btn mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary">1</span></button>
<button class="mui-btn mui-btn-positive">Badge button <span class="mui-badge mui-badge-positive">1</span></button>
<button class="mui-btn mui-btn-negative">Badge button <span class="mui-badge mui-badge-negative">1</span></button>

<button class="mui-btn mui-btn-outlined">Badge button <span class="mui-badge mui-badge-inverted">1</span></button>
<button class="mui-btn mui-btn-outlined mui-btn-primary">Badge button <span class="mui-badge mui-badge-primary mui-badge-inverted">1</span></button>
<button class="mui-btn mui-btn-outlined mui-btn-positive">Badge button <span class="mui-badge mui-badge-positive mui-badge-inverted">1</span></button>
<button class="mui-btn mui-btn-outlined mui-btn-negative">Badge button <span class="mui-badge mui-badge-negative mui-badge-inverted">1</span></button>

块级按钮

<button class="mui-btn mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-positive mui-btn-block">Block button</button>
<button class="mui-btn mui-btn-negative mui-btn-block">Block button</button>

<button class="mui-btn mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-positive mui-btn-block mui-btn-outlined">Block button</button>
<button class="mui-btn mui-btn-negative mui-btn-block mui-btn-outlined">Block button</button>

复选框

图标左对齐
图标右对齐
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-checkbox mui-left">
			<label>Checkbox</label>
			<input name="checkbox" type="checkbox">
		</div>
		<div class="mui-input-row mui-checkbox mui-left">
			<label>Checkbox</label>
			<input name="checkbox" type="checkbox" checked>
		</div>
	</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-checkbox">
			<label>Checkbox</label>
			<input name="checkbox1" type="checkbox">
		</div>
		<div class="mui-input-row mui-checkbox">
			<label>Checkbox</label>
			<input name="checkbox1" type="checkbox" checked>
		</div>
	</form>
</div>

图片轮播

Can be used with any number of slides with any type of content.

  • 定时轮播 
<ul class="mui-table-view mui-table-view-chevron">
	<li id="slider_switch" class="mui-table-view-cell">
		定时轮播
		<div class="mui-switch">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
</ul>
<div id="slider" class="mui-slider">
	<div class="mui-slider-group mui-slider-loop">
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg"></a>
		</div>
		<div class="mui-slider-item">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg"></a>
		</div>
		<div class="mui-slider-item">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg"></a>
		</div>
		<div class="mui-slider-item">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg"></a>
		</div>
		<div class="mui-slider-item">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg"></a>
		</div>
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="#"><img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg"></a>
		</div>
	</div>
	<div class="mui-slider-indicator">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
	</div>
</div>

Sliders.js binds an event to the document that returns a detail object and can be used to fire a callback.

// Only needed if you want to fire a callback
document.querySelector('#mySlider').addEventListener('slide', myFunction)

图片轮播下方悬浮标题

  • 定时轮播

静静看这世界

幸福就是可以一起睡觉

想要一间这样的木屋，静静的喝咖啡

Color of SIP CBD

静静看这世界

幸福就是可以一起睡觉 

<ul class="mui-table-view mui-table-view-chevron">
	<li id="slider_switch" class="mui-table-view-cell">定时轮播
		<div class="mui-switch">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
</ul>
<div id="slider" class="mui-slider">
	<div class="mui-slider-group mui-slider-loop">
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
			</a>
			<p class="mui-slider-title">
				静静看这世界
			</p>
		</div>
		<div class="mui-slider-item">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
			</a>
			<p class="mui-slider-title">
				幸福就是可以一起睡觉
			</p>
		</div>
		<div class="mui-slider-item">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
			</a>
			<p class="mui-slider-title">
				想要一间这样的木屋，静静的喝咖啡
			</p>
		</div>
		<div class="mui-slider-item">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
			</a>
			<p class="mui-slider-title">
				Color of SIP CBD
			</p>
		</div>
		<div class="mui-slider-item">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
			</a>
			<p class="mui-slider-title">
				静静看这世界
			</p>
		</div>
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="#">
				<img src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
			</a>
			<p class="mui-slider-title">
				幸福就是可以一起睡觉
			</p>
		</div>
	</div>
	<div class="mui-slider-indicator mui-text-right">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
	</div>
</div>

图文表格

<ul class="mui-table-view mui-grid-view">
	<li class="mui-table-view-cell mui-media mui-col-xs-6">
		<a href="#">
			<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
			<div class="mui-media-body">幸福就是可以一起睡觉</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-6">
		<a href="#">
			<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
			<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-6">
		<a href="#">
			<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
			<div class="mui-media-body">Color of SIP CBD</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-6">
		<a href="#">
			<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
			<div class="mui-media-body">静静看这世界</div>
		</a>
	</li>
</ul>

滑动分页图文表格

1 / 2 
<div class="mui-slider">
	<div class="mui-slider-group mui-slider-loop">
		<div class="mui-slider-item mui-slider-item-duplicate">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
						<div class="mui-media-body">Color of SIP CBD</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
						<div class="mui-media-body">静静看这世界</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-slider-item">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
						<div class="mui-media-body">幸福就是可以一起睡觉</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
						<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-slider-item">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
						<div class="mui-media-body">Color of SIP CBD</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
						<div class="mui-media-body">静静看这世界</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-slider-item mui-slider-item-duplicate">
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
						<div class="mui-media-body">幸福就是可以一起睡觉</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-6">
					<a href="#">
						<img class="mui-media-object" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
						<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="mui-slider-indicator" style="position: static;background-color: #fff;">
		<span class="mui-action mui-action-previous mui-icon mui-icon-back"></span>
		<div class="mui-number">
			<span>1</span> / 2
		</div>
		<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
	</div>
</div>

九宫格

<ul class="mui-table-view mui-grid-view mui-grid-9">
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-home"></span>
			<div class="mui-media-body">Home</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-sms"><span class="mui-badge">5</span></span>
			<div class="mui-media-body">Email</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-calendar"></span>
			<div class="mui-media-body">Calendar</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-chat"></span>
			<div class="mui-media-body">Chat</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-category"></span>
			<div class="mui-media-body">Sort</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-map"></span>
			<div class="mui-media-body">Map</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-search"></span>
			<div class="mui-media-body">Search</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-phone"></span>
			<div class="mui-media-body">Phone</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media mui-col-xs-4">
		<a href="#">
			<span class="mui-icon mui-icon-cog"></span>
			<div class="mui-media-body">Setting</div>
		</a>
	</li>
</ul>

分页九宫格

<div id="Gallery" class="mui-slider">
	<div class="mui-slider-group">
		<div class="mui-slider-item">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-home"><span class="mui-badge">5</span></span>
						<div class="mui-media-body">
							Home
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-sms"></span>
						<div class="mui-media-body">
							Email
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-calendar"></span>
						<div class="mui-media-body">
							Calendar
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-chat"></span>
						<div class="mui-media-body">
							Chat
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-category"></span>
						<div class="mui-media-body">
							Sort
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-map"></span>
						<div class="mui-media-body">
							Map
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">
							Search
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">
							Phone
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-cog"></span>
						<div class="mui-media-body">
							Setting
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-slider-item">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">
							Home
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-sms"><span class="mui-badge">6</span></span>
						<div class="mui-media-body">
							Email
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-calendar"></span>
						<div class="mui-media-body">
							Calendar
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-chat"></span>
						<div class="mui-media-body">
							Chat
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-category"></span>
						<div class="mui-media-body">
							Sort
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-map"></span>
						<div class="mui-media-body">
							Map
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">
							Search
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">
							Phone
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-cog"></span>
						<div class="mui-media-body">
							Setting
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-slider-item">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-home"></span>
						<div class="mui-media-body">
							Home
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-sms"></span>
						<div class="mui-media-body">
							Email
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-calendar"><span class="mui-badge">7</span></span>
						<div class="mui-media-body">
							Calendar
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-chat"></span>
						<div class="mui-media-body">
							Chat
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-category"></span>
						<div class="mui-media-body">
							Sort
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-map"></span>
						<div class="mui-media-body">
							Map
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-search"></span>
						<div class="mui-media-body">
							Search
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-phone"></span>
						<div class="mui-media-body">
							Phone
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon mui-icon-cog"></span>
						<div class="mui-media-body">
							Setting
						</div>
					</a>
				</li>
			</ul>
		</div>

	</div>
	<div class="mui-slider-indicator">
		<div class="mui-indicator mui-active"></div>
		<div class="mui-indicator"></div>
		<div class="mui-indicator"></div>
	</div>
</div>

图标

Use Muiicons in your application to help inform interactions.

<div class="mui-content-padded">
	
	<span class="mui-icon mui-icon-contact"></span>
	<span class="mui-icon mui-icon-person"></span>
	<span class="mui-icon mui-icon-personadd"></span>
	<span class="mui-icon mui-icon-phone"></span>
	<span class="mui-icon mui-icon-email"></span>
	<span class="mui-icon mui-icon-chatbubble"></span>
	<span class="mui-icon mui-icon-chatboxes"></span>
	<span class="mui-icon mui-icon-weibo"></span>
	<span class="mui-icon mui-icon-weixin"></span>
	<span class="mui-icon mui-icon-pengyouquan"></span>
	<span class="mui-icon mui-icon-chat"></span>
	<span class="mui-icon mui-icon-qq"></span>
	<span class="mui-icon mui-icon-videocam"></span>
	<span class="mui-icon mui-icon-camera"></span>
	<span class="mui-icon mui-icon-image"></span>
	<span class="mui-icon mui-icon-mic"></span>
	<span class="mui-icon mui-icon-micoff"></span>
	<span class="mui-icon mui-icon-location"></span>
	<span class="mui-icon mui-icon-map"></span>
	<span class="mui-icon mui-icon-compose"></span>
	<span class="mui-icon mui-icon-trash"></span>
	<span class="mui-icon mui-icon-upload"></span>
	<span class="mui-icon mui-icon-download"></span>
	<span class="mui-icon mui-icon-close"></span>
	<span class="mui-icon mui-icon-closeempty"></span>
	<span class="mui-icon mui-icon-redo"></span>
	<span class="mui-icon mui-icon-undo"></span>
	<span class="mui-icon mui-icon-refresh"></span>
	<span class="mui-icon mui-icon-refreshempty"></span>
	<span class="mui-icon mui-icon-reload"></span>
	<span class="mui-icon mui-icon-loop"></span>
	<span class="mui-icon mui-icon-spinner mui-spin"></span>
	<span class="mui-icon mui-icon-spinner-cycle mui-spin"></span>
	<span class="mui-icon mui-icon-star"></span>
	<span class="mui-icon mui-icon-starhalf"></span>
	<span class="mui-icon mui-icon-plus"></span>
	<span class="mui-icon mui-icon-plusempty"></span>
	<span class="mui-icon mui-icon-minus"></span>
	<span class="mui-icon mui-icon-checkmarkempty"></span>
	<span class="mui-icon mui-icon-search"></span>
	<span class="mui-icon mui-icon-home"></span>
	<span class="mui-icon mui-icon-navigate"></span>
	<span class="mui-icon mui-icon-gear"></span>
	<span class="mui-icon mui-icon-settings"></span>
	<span class="mui-icon mui-icon-list"></span>
	<span class="mui-icon mui-icon-bars"></span>
	<span class="mui-icon mui-icon-paperplane"></span>
	<span class="mui-icon mui-icon-info"></span>
	<span class="mui-icon mui-icon-help"></span>
	<span class="mui-icon mui-icon-locked"></span>
	<span class="mui-icon mui-icon-more"></span>
	<span class="mui-icon mui-icon-locked"></span>
	<span class="mui-icon mui-icon-flag"></span>
	<span class="mui-icon mui-icon-paperclip"></span>
	<span class="mui-icon mui-icon-back"></span>
	<span class="mui-icon mui-icon-forward"></span>
	<span class="mui-icon mui-icon-arrowup"></span>
	<span class="mui-icon mui-icon-arrowdown"></span>
	<span class="mui-icon mui-icon-arrowleft"></span>
	<span class="mui-icon mui-icon-arrowright"></span>
	<span class="mui-icon mui-icon-arrowthinup"></span>
	<span class="mui-icon mui-icon-arrowthindown"></span>
	<span class="mui-icon mui-icon-arrowthinleft"></span>
	<span class="mui-icon mui-icon-arrowthinright"></span>
	<span class="mui-icon mui-icon-pulldown"></span>
</div>

输入框

默认搜索框：
语音输入搜索框：
   
<div class="mui-content-padded">
	<h5>默认搜索框：</h5>
	<div class="mui-input-row mui-search">
		<input type="search" class="mui-input-clear" placeholder="">
	</div>
	<h5>语音输入搜索框：</h5>
	<div class="mui-input-row mui-search">
		<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
	</div>
	<form class="mui-input-group">
		<div class="mui-input-row">
			<label>Input</label>
			<input type="text" placeholder="普通输入框">
		</div>
		<div class="mui-input-row">
			<label>Input</label>
			<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
		</div>
		<div class="mui-input-row">
			<label>Input</label>
			<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
		</div>
		<div class="mui-button-row">
			<button class="mui-btn mui-btn-primary" onclick="return false;">确认</button>&nbsp;&nbsp;
			<button class="mui-btn mui-btn-primary" onclick="return false;">取消</button>
		</div>
	</form>
	<div class="mui-input-row" style="margin: 10px 5px;">
		<textarea rows="5" placeholder="多行文本框"></textarea>
	</div>
</div>

列表

Table views can be used for organizing data, showing collections of links, or a series of controls.

  • 单行列表
  • 列表第1项
  • 列表第2项
  • 列表第3项
  • 两行列表
  • 我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号
  • 我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号
  • 我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号 
<ul class="mui-table-view">
	<li class="mui-table-view-divider">单行列表</li>
	<li class="mui-table-view-cell">列表第1项</li>
	<li class="mui-table-view-cell">列表第2项</li>
	<li class="mui-table-view-cell">列表第3项</li>
	<li class="mui-table-view-divider">两行列表</li>
	<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span>
	</li>
	<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span>
	</li>
	<li class="mui-table-view-cell"><span class="mui-ellipsis-2">我的内容比较多，但也不会超过两行，因为加了.mui-ellipsis-2,mui会自动截断，变成省略号</span>
	</li>
</ul>

列表右侧带导航箭头

Chevrons should be used to indicate that the item is linked. Just apply the classes .mui-navigate-right or .mui-navigate-left to use a chevron.

<ul class="mui-table-view">
  <li class="mui-table-view-cell">
    <a class="mui-navigate-right">
      Item 1
    </a>
  </li>
  <li class="mui-table-view-cell">
    <a class="mui-navigate-right">
      Item 2
    </a>
  </li>
  <li class="mui-table-view-cell">
    <a class="mui-navigate-right">
      Item 3
    </a>
  </li>
</ul>

列表右侧带数字角标

Badges are a great way of showing data.

  • Item 1 14
  • Item 2 1
  • Item 3 5 
<ul class="mui-table-view">
	<li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">14</span>
	</li>
	<li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">1</span>
	</li>
	<li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span>
	</li>
</ul>

列表右侧同时带箭头和数字角标

Feel free to use chevrons and badges together. They'll automatically positon themselves correctly.

<ul class="mui-table-view mui-table-view-chevron">
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right">
			<span class="mui-badge">15</span>
			Item 1
		</a>
	</li>
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right">
			<span class="mui-badge">5</span>
			Item 2
		</a>
	</li>
	<li class="mui-table-view-cell">
		<a class="mui-navigate-right">
			<span class="mui-badge">5</span>
			Item 3
		</a>
	</li>
</ul>

列表带input类控件

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8 
<ul class="mui-table-view">
	<li class="mui-table-view-cell">
		Item 1
		<button class="mui-btn">
			Button
		</button>
	</li>
	<li class="mui-table-view-cell">
		Item 2
		<button class="mui-btn mui-btn-primary">
			Button
		</button>
	</li>
	<li class="mui-table-view-cell">
		Item 3
		<div class="mui-switch mui-active">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
	<li class="mui-table-view-cell">
		Item 4
		<div class="mui-switch mui-switch-blue mui-switch-mini mui-active">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
	<li class="mui-table-view-cell mui-radio mui-left">
		<input name="radio" type="radio">Item 5
	</li>
	<li class="mui-table-view-cell mui-radio mui-left">
		<input name="radio" type="radio">Item 6
	</li>
	<li class="mui-table-view-cell mui-checkbox mui-left">
		<input name="checkbox" type="checkbox">Item 7
	</li>
	<li class="mui-table-view-cell mui-checkbox mui-left">
		<input name="checkbox" type="checkbox">Item 8
	</li>
</ul>

图文列表(缩略图居左)

<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-hidden">cared
		<div id="M_Toggle" class="mui-switch mui-active">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-left" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
			<div class="mui-media-body">
				幸福
				<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-left" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
			<div class="mui-media-body">
				木屋
				<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-left" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
			<div class="mui-media-body">
				CBD
				<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-left" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
			<div class="mui-media-body">
				远眺
				<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
			</div>
		</a>
	</li>
</ul>

图文列表(缩略图居右)

<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-hidden">cared
		<div id="M_Toggle" class="mui-switch mui-active">
			<div class="mui-switch-handle"></div>
		</div>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-right" src="http://dev.dcloud.net.cn/mui/assets/img/shuijiao.jpg">
			<div class="mui-media-body">
				幸福
				<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-right" src="http://dev.dcloud.net.cn/mui/assets/img/muwu.jpg">
			<div class="mui-media-body">
				木屋
				<p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-right" src="http://dev.dcloud.net.cn/mui/assets/img/cbd.jpg">
			<div class="mui-media-body">
				CBD
				<p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
			</div>
		</a>
	</li>
	<li class="mui-table-view-cell mui-media">
		<a href="#">
			<img class="mui-media-object mui-pull-right" src="http://dev.dcloud.net.cn/mui/assets/img/yuantiao.jpg">
			<div class="mui-media-body">
				远眺
				<p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
			</div>
		</a>
	</li>
</ul>

二级列表

<ul class="mui-table-view mui-table-view-chevron">
	<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">产品</a>
		<ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">iOS</a>
			</li>
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">Android</a>
			</li>
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">HTML5</a>
			</li>
		</ul>
	</li>
	<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">方案</a>
		<ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">PC方案</a>
			</li>
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">手机方案</a>
			</li>
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">TV方案</a>
			</li>
		</ul>
	</li>
	<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">新闻</a>
		<ul class="mui-table-view mui-table-view-chevron">
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">公司新闻</a>
			</li>
			<li class="mui-table-view-cell"><a class="mui-navigate-right" href="#">行业新闻</a>
			</li>
		</ul>
	</li>
</ul>

导航栏

Title bars are full width and docked to the top of the viewport.

Title

<header class="mui-bar mui-bar-nav">
  <h1 class="mui-title">Title</h1>
</header>

导航栏包含按钮

Buttons in a mui-title mui-bar are left or right aligned and should be used for actions. Use the .mui-pull-right or .mui-pull-left utility classes to float the buttons. Also, be sure to place any floated elements before the mui-title.

Title

<header class="mui-bar mui-bar-nav">
  <button class="mui-btn mui-pull-left">
    Left
  </button>
  <button class="mui-btn mui-pull-right">
    Right
  </button>
  <h1 class="mui-title">Title</h1>
</header>

导航栏包含图标

Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.

Title

<header class="mui-bar mui-bar-nav">
  <a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
  <a class="mui-icon mui-icon-reply mui-pull-right"></a>
  <h1 class="mui-title">Title</h1>
</header>

导航栏包含文字和图标

Link buttons can be used in tool bars to remove the outline. Use these in conjuction with icons to recreate the nav feel from iOS7. Note the use of .mui-btn-nav to bring the buttons a little bit closer to the edge of the viewport.

Title

<header class="mui-bar mui-bar-nav">
  <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-left">
    <span class="mui-icon mui-icon-left-nav"></span>
    Left
  </button>
  <button class="mui-btn mui-btn-link mui-btn-nav mui-pull-right">
    Right
    <span class="mui-icon mui-icon-right-nav"></span>
  </button>
  <h1 class="mui-title">Title</h1>
</header>

侧滑导航(左侧)

Container with slide menu

  • 整体滑动 
<div class="mui-off-canvas-wrap mui-draggable">
	<div class="mui-inner-wrap">
		<header class="mui-bar mui-bar-nav">
			<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
			<a class="mui-icon mui-icon-close mui-pull-right"></a>
			<h1 class="mui-title">Container with slide menu</h1>
		</header>
		<aside id="offCanvas" class="mui-off-canvas-left">
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
			</ul>
		</aside>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<li id="offCanvas_switch" class="mui-table-view-cell">
					整体滑动
					<div class="mui-switch mui-active">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 4
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 5
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 6
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 7
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 8
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 9
					</a>
				</li>
			</ul>
		</div>
		<!-- off-canvas backdrop -->
		<div class="mui-off-canvas-backdrop"></div>
	</div>
</div>

侧滑导航(右侧)

Container with slide menu(right)

  • 整体滑动 
<div class="mui-off-canvas-wrap mui-draggable">
	<div class="mui-inner-wrap">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-right"></a>
			<h1 class="mui-title">Container with slide menu(right)</h1>
		</header>
		<aside id="offCanvas" class="mui-off-canvas-right">
			<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
			</ul>
		</aside>
		<div class="mui-content">
			<ul class="mui-table-view mui-table-view-chevron">
				<li id="offCanvas_switch" class="mui-table-view-cell">
					整体滑动
					<div class="mui-switch mui-active">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			<ul class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 1
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 2
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 3
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 4
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 5
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 6
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 7
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 8
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right">
						Item 9
					</a>
				</li>
			</ul>
		</div>
		<!-- off-canvas backdrop -->
		<div class="mui-off-canvas-backdrop"></div>
	</div>
</div>

分页

分页(默认尺寸)
分页(大尺寸)
分页(小尺寸)
翻页(默认)
翻页(对齐)
翻页(禁用)
<h5 class="mui-content-padded">分页(默认尺寸)</h5>
<div class="mui-content-padded">
	<ul class="mui-pagination">
		<li class="mui-previous mui-disabled">
			<a href="#">
					&laquo;
				</a>
		</li>
		<li class="mui-active">
			<a href="#">
					1
				</a>
		</li>
		<li>
			<a href="#">
					2
				</a>
		</li>
		<li>
			<a href="#">
					3
				</a>
		</li>
		<li>
			<a href="#">
					4
				</a>
		</li>
		<li>
			<a href="#">
					5
				</a>
		</li>
		<li class="mui-next">
			<a href="#">
					&raquo;
				</a>
		</li>
	</ul>
</div>
<h5 class="mui-content-padded">分页(大尺寸)</h5>
<div class="mui-content-padded">
	<ul class="mui-pagination mui-pagination-lg">
		<li class="mui-previous">
			<a href="#">
					&laquo;
				</a>
		</li>
		<li>
			<a href="#">
					1
				</a>
		</li>
		<li>
			<a href="#">
					2
				</a>
		</li>
		<li>
			<a href="#">
					3
				</a>
		</li>
		<li>
			<a href="#">
					4
				</a>
		</li>
		<li class="mui-active">
			<a href="#">
					5
				</a>
		</li>
		<li class="mui-next mui-disabled">
			<a href="#">
					&raquo;
				</a>
		</li>
	</ul>
</div>
<h5 class="mui-content-padded">分页(小尺寸)</h5>
<div class="mui-content-padded">
	<ul class="mui-pagination mui-pagination-sm">
		<li class="mui-previous">
			<a href="#">
					&laquo;
				</a>
		</li>
		<li>
			<a href="#">
					1
				</a>
		</li>
		<li>
			<a href="#">
					2
				</a>
		</li>
		<li class="mui-active">
			<a href="#">
					3
				</a>
		</li>
		<li>
			<a href="#">
					4
				</a>
		</li>
		<li>
			<a href="#">
					5
				</a>
		</li>
		<li class="mui-next">
			<a href="#">
					&raquo;
				</a>
		</li>
	</ul>
</div>
<h5 class="mui-content-padded">翻页(默认)</h5>
<div class="mui-content-padded">
	<ul class="mui-pager">
		<li>
			<a href="#">
					上一页
				</a>
		</li>
		<li>
			<a href="#">
					下一页
				</a>
		</li>
	</ul>
</div>
<h5 class="mui-content-padded">翻页(对齐)</h5>
<div class="mui-content-padded">
	<ul class="mui-pager">
		<li class="mui-previous">
			<a href="#">
					上一页
				</a>
		</li>
		<li class="mui-next">
			<a href="#">
					下一页
				</a>
		</li>
	</ul>
</div>
<h5 class="mui-content-padded">翻页(禁用)</h5>
<div class="mui-content-padded">
	<ul class="mui-pager">
		<li class="mui-disabled">
			<span> 上一页 </span>
		</li>
		<li>
			<a href="#">
					下一页
				</a>
		</li>
	</ul>
</div>

弹出菜单

Popover title

  • Item1
  • Item2
  • Item3
  • Item4
  • Item5
  • Item6
  • Item7
  • Item8
<div id="mui-popover" class="mui-popover">
  <header class="mui-bar mui-bar-nav">
    <h1 class="mui-title">Popover title</h1>
  </header>
  <ul class="mui-table-view">
    <li class="mui-table-view-cell">Item1</li>
    <li class="mui-table-view-cell">Item2</li>
    <li class="mui-table-view-cell">Item3</li>
    <li class="mui-table-view-cell">Item4</li>
    <li class="mui-table-view-cell">Item5</li>
    <li class="mui-table-view-cell">Item6</li>
    <li class="mui-table-view-cell">Item7</li>
    <li class="mui-table-view-cell">Item8</li>
  </ul>
</div>

Popovers are designed to only fire from title bars. Set the value of the mui-title href to the id of a mui-popover, like so:

<header class="mui-bar mui-bar-nav">
	<a href="#myPopover">
		<h1 class="mui-title">
      Tap title
      <span class="mui-icon mui-icon-caret"></span>
    </h1>
	</a>
</header>

单选框

图标左对齐
图标右对齐
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio mui-left">
			<label>Radio</label>
			<input name="radio1" type="radio">
		</div>
		<div class="mui-input-row mui-radio mui-left">
			<label>Radio</label>
			<input name="radio1" type="radio" checked>
		</div>
	</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio">
			<label>Radio</label>
			<input name="radio1" type="radio">
		</div>
		<div class="mui-input-row mui-radio">
			<label>Radio</label>
			<input name="radio1" type="radio" checked>
		</div>
	</form>
</div>

分段选择

Content sections that are to be swapped in and out by the controller should all be siblings and have the class .mui-control-content. Then, just give each content section an id and point the link in the segmented control to that id.

  • 第一个选项卡子项-1
  • 第一个选项卡子项-2
  • 第一个选项卡子项-3
  • 第一个选项卡子项-4
  • 第一个选项卡子项-5
  • 第二个选项卡子项-1
  • 第二个选项卡子项-2
  • 第二个选项卡子项-3
  • 第二个选项卡子项-4
  • 第二个选项卡子项-5
  • 第三个选项卡子项-1
  • 第三个选项卡子项-2
  • 第三个选项卡子项-3
  • 第三个选项卡子项-4
  • 第三个选项卡子项-5
Style
Color
<div id="segmentedControl" class="mui-segmented-control">
	<a class="mui-control-item mui-active" href="#item1mobile">
			待办公文（8）
		</a>
	<a class="mui-control-item" href="#item2mobile">
			已办公文
		</a>
	<a class="mui-control-item" href="#item3mobile">
			全部公文
		</a>
</div>
<div class="mui-content-padded">
	<div id="item1mobile" class="mui-control-content mui-active">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				第一个选项卡子项-1
			</li>
			<li class="mui-table-view-cell">
				第一个选项卡子项-2
			</li>
			<li class="mui-table-view-cell">
				第一个选项卡子项-3
			</li>
			<li class="mui-table-view-cell">
				第一个选项卡子项-4
			</li>
			<li class="mui-table-view-cell">
				第一个选项卡子项-5
			</li>
		</ul>
	</div>
	<div id="item2mobile" class="mui-control-content">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				第二个选项卡子项-1
			</li>
			<li class="mui-table-view-cell">
				第二个选项卡子项-2
			</li>
			<li class="mui-table-view-cell">
				第二个选项卡子项-3
			</li>
			<li class="mui-table-view-cell">
				第二个选项卡子项-4
			</li>
			<li class="mui-table-view-cell">
				第二个选项卡子项-5
			</li>
		</ul>
	</div>
	<div id="item3mobile" class="mui-control-content">
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				第三个选项卡子项-1
			</li>
			<li class="mui-table-view-cell">
				第三个选项卡子项-2
			</li>
			<li class="mui-table-view-cell">
				第三个选项卡子项-3
			</li>
			<li class="mui-table-view-cell">
				第三个选项卡子项-4
			</li>
			<li class="mui-table-view-cell">
				第三个选项卡子项-5
			</li>
		</ul>
	</div>
</div>
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio">
			<label>按钮</label>
			<input name="style" type="radio" checked value="">
		</div>
		<div class="mui-input-row mui-radio">
			<label>文字</label>
			<input name="style" type="radio" value="inverted">
		</div>
	</form>
</div>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="color" type="radio" checked value="primary">
		</div>
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="color" type="radio" value="positive">
		</div>
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="color" type="radio" value="negative">
		</div>
	</form>
</div>

可拖动选项卡

  • 第一个选项卡子项-1
  • 第一个选项卡子项-2
  • 第一个选项卡子项-3
  • 第一个选项卡子项-4
  • 第一个选项卡子项-5
Color
<div id="slider" class="mui-slider">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item" href="#item1mobile">
				待办公文
			</a>
		<a class="mui-control-item" href="#item2mobile">
				已办公文
			</a>
		<a class="mui-control-item" href="#item3mobile">
				全部公文
			</a>
	</div>
	<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
	<div class="mui-slider-group">
		<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					第一个选项卡子项-1
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-2
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-3
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-4
				</li>
				<li class="mui-table-view-cell">
					第一个选项卡子项-5
				</li>
			</ul>
		</div>
		<div id="item2mobile" class="mui-slider-item mui-control-content">
			<div class="mui-loading">
				<div class="mui-spinner">
					<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
				</div>
			</div>
		</div>
		<div id="item3mobile" class="mui-slider-item mui-control-content">
			<div class="mui-loading">
				<div class="mui-spinner">
					<div class="mui-spinner-indicator mui-spinner-indicator12"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator11"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator10"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator9"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator8"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator7"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator6"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator5"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator4"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator3"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator2"></div>
					<div class="mui-spinner-indicator mui-spinner-indicator1"></div>
				</div>
			</div>
		</div>
	</div>
</div>

<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
	<form class="mui-input-group">
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-primary" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="radio1" type="radio" checked value="primary">
		</div>
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-positive" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="radio1" type="radio" value="positive">
		</div>
		<div class="mui-input-row mui-radio">
			<label><span class="mui-bg-negative" style="display:block;width:25px;height:25px;"></span>
			</label>
			<input name="radio1" type="radio" value="negative">
		</div>
	</form>
</div>

开关

Switches can be used by sliding or tapping the control.

<div class="mui-switch mui-active">
  <div class="mui-switch-handle"></div>
</div>
<div class="mui-switch">
  <div class="mui-switch-handle"></div>
</div>

Switches.js binds an event to the document that returns a detail object and can be used to fire a callback.

// Only needed if you want to fire a callback
document.querySelector('#myToggle').addEventListener('toggle', myFunction)

选项卡

Use Muiicons in the .mui-tab-mui-bar to represent different sections of your app.

<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item mui-active" href="#tabbar">
		<span class="mui-icon mui-icon-phone"></span>
		<span class="mui-tab-label">电话咨询</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-chat">
		<span class="mui-icon mui-icon-chat"></span>
		<span class="mui-tab-label">在线咨询</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-sms">
		<span class="mui-icon mui-icon-sms"></span>
		<span class="mui-tab-label">短信咨询</span>
	</a>
	<a class="mui-tab-item" href="#tabbar-with-map">
		<span class="mui-icon mui-icon-map"></span>
		<span class="mui-tab-label">查看地图</span>
	</a>
</nav>

文字选项卡

If you don't want to use icons, that's okay too. The text will appear larger to use the additional space.

<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item mui-active" href="#">
    Label
  </a>
  <a class="mui-tab-item" href="#">
    Label
  </a>
  <a class="mui-tab-item" href="#">
    Label
  </a>
</nav>

文字

Use headings and paragraphs to mui-title and describe sections of your app. Apply or wrap elements with .mui-content-padded to give the content space around the screen.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

<div class="mui-content-padded">
  <h1>h1. Heading</h1>
  <h2>h2. Heading</h2>
  <h3>h3. Heading</h3>
  <h4>h4. Heading</h4>
  <h5>h5. Heading</h5>
  <h6>h6. Heading</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco.</p>
</div>

mui遵循 MIT License