Skip to content

M
mui
Commit 2b3a6821 authored by hbcui1984's avatar hbcui1984
Browse files
Options

添加文档过期提示

parent c8bd5942
Hide whitespace changes
Inline Side-by-side
Showing with 218 additions and 217 deletions
components/index.html
View file @ 2b3a6821
......@@ -86,6 +86,7 @@
</div>
<div class="container">
<div style="text-align:center;padding:25px 0;font-size:20px;color:red;font-weight:600">迫于墙造成的各种不稳定性，mui官网已迁回国内，这个站点不再更新，请前往<a href="http://dev.dcloud.net.cn/mui">新官网</a>查看文档</div>
<!-- Components -->
<div class="docs-components column-group platform-ios">
<div class="device-column column lg-units-5 mui-pull-right">
......@@ -95,20 +96,20 @@
<div class="device-content">
<div id="iwindow">
<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>
<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>
</div>
</div>
......@@ -124,20 +125,20 @@
<div class="component-example">
<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>
<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>
</div>
......@@ -248,14 +249,14 @@
<p class="component-description"></p>
<div class="component-example">
<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">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>
</div>
......@@ -277,14 +278,14 @@
<p class="component-description"></p>
<div class="component-example">
<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-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>
</div>
......@@ -306,7 +307,7 @@
<p class="component-description"></p>
<div class="component-example">
<h5 class="mui-content-padded">图标左对齐</h5>
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left">
......@@ -319,7 +320,7 @@
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-checkbox">
......@@ -727,11 +728,11 @@
</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>
<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>
<span class="mui-action mui-action-next mui-icon mui-icon-forward"></span>
</div>
</div>
</div>
......@@ -823,7 +824,7 @@
<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>
<span class="mui-icon mui-icon-home"></span>
<div class="mui-media-body">Home</div>
</a>
</li>
......@@ -835,43 +836,43 @@
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#">
<span class="mui-icon mui-icon-calendar"></span>
<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>
<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>
<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>
<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>
<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>
<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>
<span class="mui-icon mui-icon-cog"></span>
<div class="mui-media-body">Setting</div>
</a>
</li>
......@@ -1432,70 +1433,70 @@
<div class="component-example">
<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-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>
<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-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>
......@@ -1576,11 +1577,11 @@
<div class="component-example">
<div class="mui-content-padded">
<h5>默认搜索框：</h5>
<h5>默认搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder="">
</div>
<h5>语音输入搜索框：</h5>
<h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</div>
......@@ -1685,22 +1686,22 @@
<p class="component-description">Chevrons should be used to indicate that the item is linked. Just apply the classes <code>.mui-navigate-right</code> or <code>.mui-navigate-left</code> to use a chevron.</p>
<div class="component-example">
<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 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>
</div>
......@@ -2160,8 +2161,8 @@
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Title</h1>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Title</h1>
</header>
</div>
......@@ -2177,14 +2178,14 @@
<p class="component-description">Buttons in a mui-title mui-bar are left or right aligned and should be used for actions. Use the <code>.mui-pull-right</code> or <code>.mui-pull-left</code> utility classes to float the buttons. Also, be sure to place any floated elements before the mui-title.</p>
<div class="component-example">
<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 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>
</div>
......@@ -2206,10 +2207,10 @@
<p class="component-description">Icons can also be used for actions in toolbars. Again, be sure to use utility classes to float the icons into position.</p>
<div class="component-example">
<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 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>
</div>
......@@ -2265,24 +2266,24 @@
<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>
<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>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</a>
</li>
</ul>
</aside>
......@@ -2450,24 +2451,24 @@
<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>
<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>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</a>
</li>
</ul>
</aside>
......@@ -2630,166 +2631,166 @@
<p class="component-description"></p>
<div class="component-example">
<h5 class="mui-content-padded">分页(默认尺寸)</h5>
<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>
</a>
</li>
<li class="mui-active">
<a href="#">
1
</a>
</a>
</li>
<li>
<a href="#">
2
</a>
</a>
</li>
<li>
<a href="#">
3
</a>
</a>
</li>
<li>
<a href="#">
4
</a>
</a>
</li>
<li>
<a href="#">
5
</a>
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(大尺寸)</h5>
<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>
</a>
</li>
<li>
<a href="#">
1
</a>
</a>
</li>
<li>
<a href="#">
2
</a>
</a>
</li>
<li>
<a href="#">
3
</a>
</a>
</li>
<li>
<a href="#">
4
</a>
</a>
</li>
<li class="mui-active">
<a href="#">
5
</a>
</a>
</li>
<li class="mui-next mui-disabled">
<a href="#">
&raquo;
</a>
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">分页(小尺寸)</h5>
<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>
</a>
</li>
<li>
<a href="#">
1
</a>
</a>
</li>
<li>
<a href="#">
2
</a>
</a>
</li>
<li class="mui-active">
<a href="#">
3
</a>
</a>
</li>
<li>
<a href="#">
4
</a>
</a>
</li>
<li>
<a href="#">
5
</a>
</a>
</li>
<li class="mui-next">
<a href="#">
&raquo;
</a>
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(默认)</h5>
<h5 class="mui-content-padded">翻页(默认)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li>
<a href="#">
上一页
</a>
</a>
</li>
<li>
<a href="#">
下一页
</a>
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(对齐)</h5>
<h5 class="mui-content-padded">翻页(对齐)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-previous">
<a href="#">
上一页
</a>
</a>
</li>
<li class="mui-next">
<a href="#">
下一页
</a>
</a>
</li>
</ul>
</div>
<h5 class="mui-content-padded">翻页(禁用)</h5>
<h5 class="mui-content-padded">翻页(禁用)</h5>
<div class="mui-content-padded">
<ul class="mui-pager">
<li class="mui-disabled">
<span> 上一页 </span>
<span> 上一页 </span>
</li>
<li>
<a href="#">
下一页
</a>
</a>
</li>
</ul>
</div>
......@@ -3017,7 +3018,7 @@
<p class="component-description"></p>
<div class="component-example">
<h5 class="mui-content-padded">图标左对齐</h5>
<h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio mui-left">
......@@ -3030,7 +3031,7 @@
</div>
</form>
</div>
<h5 class="mui-content-padded">图标右对齐</h5>
<h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
......@@ -3083,13 +3084,13 @@
<div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile">
待办公文（8）
</a>
</a>
<a class="mui-control-item" href="#item2mobile">
已办公文
</a>
</a>
<a class="mui-control-item" href="#item3mobile">
全部公文
</a>
</a>
</div>
<div class="mui-content-padded">
<div id="item1mobile" class="mui-control-content mui-active">
......@@ -3150,7 +3151,7 @@
</ul>
</div>
</div>
<h5 class="mui-content-padded">Style</h5>
<h5 class="mui-content-padded">Style</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
......@@ -3163,7 +3164,7 @@
</div>
</form>
</div>
<h5 class="mui-content-padded">Color</h5>
<h5 class="mui-content-padded">Color</h5>
<div class="mui-card">
<form class="mui-input-group">
<div class="mui-input-row mui-radio">
......@@ -3492,11 +3493,11 @@
<p class="component-description">Switches can be used by sliding or tapping the control.</p>
<div class="component-example">
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
<div class="mui-switch">
<div class="mui-switch-handle"></div>
<div class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</div>
......@@ -3505,8 +3506,8 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-switch&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-switch-handle&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <p class="component-description">Switches.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<span class="nt">&lt;/div&gt;</span></code></pre></div> <p class="component-description">Switches.js binds an event to the document that returns a detail object and can be used to fire a callback.</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Only needed if you want to fire a callback</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;#myToggle&#39;</span><span class="p">).</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;toggle&#39;</span><span class="p">,</span> <span class="nx">myFunction</span><span class="p">)</span></code></pre></div>
......@@ -3598,16 +3599,16 @@
<p class="component-description">Use headings and paragraphs to mui-title and describe sections of your app. Apply or wrap elements with <code>.mui-content-padded</code> to give the content space around the screen.</p>
<div class="component-example">
<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 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>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment