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 @@ ...@@ -86,6 +86,7 @@
</div> </div>
<div class="container"> <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 --> <!-- Components -->
<div class="docs-components column-group platform-ios"> <div class="docs-components column-group platform-ios">
<div class="device-column column lg-units-5 mui-pull-right"> <div class="device-column column lg-units-5 mui-pull-right">
...@@ -95,20 +96,20 @@ ...@@ -95,20 +96,20 @@
<div class="device-content"> <div class="device-content">
<div id="iwindow"> <div id="iwindow">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>有底色</h5> <h5>有底色</h5>
<span class="mui-badge">1</span> <span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</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-success">123</span>
<span class="mui-badge mui-badge-warning">3</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-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span> <span class="mui-badge mui-badge-purple">456</span>
<h5>无底色（使用父元素背景色）</h5> <h5>无底色（使用父元素背景色）</h5>
<span class="mui-badge mui-badge-inverted">1</span> <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-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</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-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</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> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div> </div>
</div> </div>
</div> </div>
...@@ -124,20 +125,20 @@ ...@@ -124,20 +125,20 @@
<div class="component-example"> <div class="component-example">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>有底色</h5> <h5>有底色</h5>
<span class="mui-badge">1</span> <span class="mui-badge">1</span>
<span class="mui-badge mui-badge-primary">12</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-success">123</span>
<span class="mui-badge mui-badge-warning">3</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-danger">45</span>
<span class="mui-badge mui-badge-purple">456</span> <span class="mui-badge mui-badge-purple">456</span>
<h5>无底色（使用父元素背景色）</h5> <h5>无底色（使用父元素背景色）</h5>
<span class="mui-badge mui-badge-inverted">1</span> <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-primary mui-badge-inverted">2</span>
<span class="mui-badge mui-badge-success mui-badge-inverted">3</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-warning mui-badge-inverted">4</span>
<span class="mui-badge mui-badge-danger mui-badge-inverted">5</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> <span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
</div> </div>
</div> </div>
...@@ -248,14 +249,14 @@ ...@@ -248,14 +249,14 @@
<p class="component-description"></p> <p class="component-description"></p>
<div class="component-example"> <div class="component-example">
<button class="mui-btn">Badge button <span class="mui-badge">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-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-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-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">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-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-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-outlined mui-btn-negative">Badge button <span class="mui-badge mui-badge-negative mui-badge-inverted">1</span></button>
</div> </div>
...@@ -277,14 +278,14 @@ ...@@ -277,14 +278,14 @@
<p class="component-description"></p> <p class="component-description"></p>
<div class="component-example"> <div class="component-example">
<button class="mui-btn mui-btn-block">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-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-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-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-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-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-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> <button class="mui-btn mui-btn-negative mui-btn-block mui-btn-outlined">Block button</button>
</div> </div>
...@@ -306,7 +307,7 @@ ...@@ -306,7 +307,7 @@
<p class="component-description"></p> <p class="component-description"></p>
<div class="component-example"> <div class="component-example">
<h5 class="mui-content-padded">图标左对齐</h5> <h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-checkbox mui-left"> <div class="mui-input-row mui-checkbox mui-left">
...@@ -319,7 +320,7 @@ ...@@ -319,7 +320,7 @@
</div> </div>
</form> </form>
</div> </div>
<h5 class="mui-content-padded">图标右对齐</h5> <h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-checkbox"> <div class="mui-input-row mui-checkbox">
...@@ -727,11 +728,11 @@ ...@@ -727,11 +728,11 @@
</div> </div>
</div> </div>
<div class="mui-slider-indicator" style="position: static;background-color: #fff;"> <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"> <div class="mui-number">
<span>1</span> / 2 <span>1</span> / 2
</div> </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> </div>
</div> </div>
...@@ -823,7 +824,7 @@ ...@@ -823,7 +824,7 @@
<ul class="mui-table-view mui-grid-view mui-grid-9"> <ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Home</div>
</a> </a>
</li> </li>
...@@ -835,43 +836,43 @@ ...@@ -835,43 +836,43 @@
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Calendar</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Chat</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Sort</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Map</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Search</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Phone</div>
</a> </a>
</li> </li>
<li class="mui-table-view-cell mui-media mui-col-xs-4"> <li class="mui-table-view-cell mui-media mui-col-xs-4">
<a href="#"> <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> <div class="mui-media-body">Setting</div>
</a> </a>
</li> </li>
...@@ -1432,70 +1433,70 @@ ...@@ -1432,70 +1433,70 @@
<div class="component-example"> <div class="component-example">
<div class="mui-content-padded"> <div class="mui-content-padded">
<span class="mui-icon mui-icon-contact"></span> <span class="mui-icon mui-icon-contact"></span>
<span class="mui-icon mui-icon-person"></span> <span class="mui-icon mui-icon-person"></span>
<span class="mui-icon mui-icon-personadd"></span> <span class="mui-icon mui-icon-personadd"></span>
<span class="mui-icon mui-icon-phone"></span> <span class="mui-icon mui-icon-phone"></span>
<span class="mui-icon mui-icon-email"></span> <span class="mui-icon mui-icon-email"></span>
<span class="mui-icon mui-icon-chatbubble"></span> <span class="mui-icon mui-icon-chatbubble"></span>
<span class="mui-icon mui-icon-chatboxes"></span> <span class="mui-icon mui-icon-chatboxes"></span>
<span class="mui-icon mui-icon-weibo"></span> <span class="mui-icon mui-icon-weibo"></span>
<span class="mui-icon mui-icon-weixin"></span> <span class="mui-icon mui-icon-weixin"></span>
<span class="mui-icon mui-icon-pengyouquan"></span> <span class="mui-icon mui-icon-pengyouquan"></span>
<span class="mui-icon mui-icon-chat"></span> <span class="mui-icon mui-icon-chat"></span>
<span class="mui-icon mui-icon-videocam"></span> <span class="mui-icon mui-icon-videocam"></span>
<span class="mui-icon mui-icon-camera"></span> <span class="mui-icon mui-icon-camera"></span>
<span class="mui-icon mui-icon-image"></span> <span class="mui-icon mui-icon-image"></span>
<span class="mui-icon mui-icon-mic"></span> <span class="mui-icon mui-icon-mic"></span>
<span class="mui-icon mui-icon-micoff"></span> <span class="mui-icon mui-icon-micoff"></span>
<span class="mui-icon mui-icon-location"></span> <span class="mui-icon mui-icon-location"></span>
<span class="mui-icon mui-icon-map"></span> <span class="mui-icon mui-icon-map"></span>
<span class="mui-icon mui-icon-compose"></span> <span class="mui-icon mui-icon-compose"></span>
<span class="mui-icon mui-icon-trash"></span> <span class="mui-icon mui-icon-trash"></span>
<span class="mui-icon mui-icon-upload"></span> <span class="mui-icon mui-icon-upload"></span>
<span class="mui-icon mui-icon-download"></span> <span class="mui-icon mui-icon-download"></span>
<span class="mui-icon mui-icon-close"></span> <span class="mui-icon mui-icon-close"></span>
<span class="mui-icon mui-icon-closeempty"></span> <span class="mui-icon mui-icon-closeempty"></span>
<span class="mui-icon mui-icon-redo"></span> <span class="mui-icon mui-icon-redo"></span>
<span class="mui-icon mui-icon-undo"></span> <span class="mui-icon mui-icon-undo"></span>
<span class="mui-icon mui-icon-refresh"></span> <span class="mui-icon mui-icon-refresh"></span>
<span class="mui-icon mui-icon-refreshempty"></span> <span class="mui-icon mui-icon-refreshempty"></span>
<span class="mui-icon mui-icon-reload"></span> <span class="mui-icon mui-icon-reload"></span>
<span class="mui-icon mui-icon-loop"></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 mui-spin"></span>
<span class="mui-icon mui-icon-spinner-cycle 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-star"></span>
<span class="mui-icon mui-icon-starhalf"></span> <span class="mui-icon mui-icon-starhalf"></span>
<span class="mui-icon mui-icon-plus"></span> <span class="mui-icon mui-icon-plus"></span>
<span class="mui-icon mui-icon-plusempty"></span> <span class="mui-icon mui-icon-plusempty"></span>
<span class="mui-icon mui-icon-minus"></span> <span class="mui-icon mui-icon-minus"></span>
<span class="mui-icon mui-icon-checkmarkempty"></span> <span class="mui-icon mui-icon-checkmarkempty"></span>
<span class="mui-icon mui-icon-search"></span> <span class="mui-icon mui-icon-search"></span>
<span class="mui-icon mui-icon-home"></span> <span class="mui-icon mui-icon-home"></span>
<span class="mui-icon mui-icon-navigate"></span> <span class="mui-icon mui-icon-navigate"></span>
<span class="mui-icon mui-icon-gear"></span> <span class="mui-icon mui-icon-gear"></span>
<span class="mui-icon mui-icon-settings"></span> <span class="mui-icon mui-icon-settings"></span>
<span class="mui-icon mui-icon-list"></span> <span class="mui-icon mui-icon-list"></span>
<span class="mui-icon mui-icon-bars"></span> <span class="mui-icon mui-icon-bars"></span>
<span class="mui-icon mui-icon-paperplane"></span> <span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-icon mui-icon-info"></span> <span class="mui-icon mui-icon-info"></span>
<span class="mui-icon mui-icon-help"></span> <span class="mui-icon mui-icon-help"></span>
<span class="mui-icon mui-icon-locked"></span> <span class="mui-icon mui-icon-locked"></span>
<span class="mui-icon mui-icon-more"></span> <span class="mui-icon mui-icon-more"></span>
<span class="mui-icon mui-icon-locked"></span> <span class="mui-icon mui-icon-locked"></span>
<span class="mui-icon mui-icon-flag"></span> <span class="mui-icon mui-icon-flag"></span>
<span class="mui-icon mui-icon-paperclip"></span> <span class="mui-icon mui-icon-paperclip"></span>
<span class="mui-icon mui-icon-back"></span> <span class="mui-icon mui-icon-back"></span>
<span class="mui-icon mui-icon-forward"></span> <span class="mui-icon mui-icon-forward"></span>
<span class="mui-icon mui-icon-arrowup"></span> <span class="mui-icon mui-icon-arrowup"></span>
<span class="mui-icon mui-icon-arrowdown"></span> <span class="mui-icon mui-icon-arrowdown"></span>
<span class="mui-icon mui-icon-arrowleft"></span> <span class="mui-icon mui-icon-arrowleft"></span>
<span class="mui-icon mui-icon-arrowright"></span> <span class="mui-icon mui-icon-arrowright"></span>
<span class="mui-icon mui-icon-arrowthinup"></span> <span class="mui-icon mui-icon-arrowthinup"></span>
<span class="mui-icon mui-icon-arrowthindown"></span> <span class="mui-icon mui-icon-arrowthindown"></span>
<span class="mui-icon mui-icon-arrowthinleft"></span> <span class="mui-icon mui-icon-arrowthinleft"></span>
<span class="mui-icon mui-icon-arrowthinright"></span> <span class="mui-icon mui-icon-arrowthinright"></span>
<span class="mui-icon mui-icon-pulldown"></span> <span class="mui-icon mui-icon-pulldown"></span>
</div> </div>
</div> </div>
...@@ -1576,11 +1577,11 @@ ...@@ -1576,11 +1577,11 @@
<div class="component-example"> <div class="component-example">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h5>默认搜索框：</h5> <h5>默认搜索框：</h5>
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
<input type="search" class="mui-input-clear" placeholder=""> <input type="search" class="mui-input-clear" placeholder="">
</div> </div>
<h5>语音输入搜索框：</h5> <h5>语音输入搜索框：</h5>
<div class="mui-input-row mui-search"> <div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框"> <input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</div> </div>
...@@ -1685,22 +1686,22 @@ ...@@ -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> <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"> <div class="component-example">
<ul class="mui-table-view"> <ul class="mui-table-view">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -2160,8 +2161,8 @@ ...@@ -2160,8 +2161,8 @@
<p class="component-description">Title bars are full width and docked to the top of the viewport.</p> <p class="component-description">Title bars are full width and docked to the top of the viewport.</p>
<div class="component-example"> <div class="component-example">
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<h1 class="mui-title">Title</h1> <h1 class="mui-title">Title</h1>
</header> </header>
</div> </div>
...@@ -2177,14 +2178,14 @@ ...@@ -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> <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"> <div class="component-example">
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<button class="mui-btn mui-pull-left"> <button class="mui-btn mui-pull-left">
Left Left
</button> </button>
<button class="mui-btn mui-pull-right"> <button class="mui-btn mui-pull-right">
Right Right
</button> </button>
<h1 class="mui-title">Title</h1> <h1 class="mui-title">Title</h1>
</header> </header>
</div> </div>
...@@ -2206,10 +2207,10 @@ ...@@ -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> <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"> <div class="component-example">
<header class="mui-bar mui-bar-nav"> <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-left-nav mui-pull-left"></a>
<a class="mui-icon mui-icon-reply mui-pull-right"></a> <a class="mui-icon mui-icon-reply mui-pull-right"></a>
<h1 class="mui-title">Title</h1> <h1 class="mui-title">Title</h1>
</header> </header>
</div> </div>
...@@ -2265,24 +2266,24 @@ ...@@ -2265,24 +2266,24 @@
<header class="mui-bar mui-bar-nav"> <header class="mui-bar mui-bar-nav">
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a> <a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-left"></a>
<a class="mui-icon mui-icon-close mui-pull-right"></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> </header>
<aside id="offCanvas" class="mui-off-canvas-left"> <aside id="offCanvas" class="mui-off-canvas-left">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"> <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
</ul> </ul>
</aside> </aside>
...@@ -2450,24 +2451,24 @@ ...@@ -2450,24 +2451,24 @@
<header class="mui-bar mui-bar-nav"> <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-left-nav mui-pull-left"></a>
<a href="#offCanvas" class="mui-icon mui-icon-bars mui-pull-right"></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> </header>
<aside id="offCanvas" class="mui-off-canvas-right"> <aside id="offCanvas" class="mui-off-canvas-right">
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted"> <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 1 Item 1
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 2 Item 2
</a> </a>
</li> </li>
<li class="mui-table-view-cell"> <li class="mui-table-view-cell">
<a class="mui-navigate-right"> <a class="mui-navigate-right">
Item 3 Item 3
</a> </a>
</li> </li>
</ul> </ul>
</aside> </aside>
...@@ -2630,166 +2631,166 @@ ...@@ -2630,166 +2631,166 @@
<p class="component-description"></p> <p class="component-description"></p>
<div class="component-example"> <div class="component-example">
<h5 class="mui-content-padded">分页(默认尺寸)</h5> <h5 class="mui-content-padded">分页(默认尺寸)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pagination"> <ul class="mui-pagination">
<li class="mui-previous mui-disabled"> <li class="mui-previous mui-disabled">
<a href="#"> <a href="#">
&laquo; &laquo;
</a> </a>
</li> </li>
<li class="mui-active"> <li class="mui-active">
<a href="#"> <a href="#">
1 1
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
2 2
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
3 3
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
4 4
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
5 5
</a> </a>
</li> </li>
<li class="mui-next"> <li class="mui-next">
<a href="#"> <a href="#">
&raquo; &raquo;
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<h5 class="mui-content-padded">分页(大尺寸)</h5> <h5 class="mui-content-padded">分页(大尺寸)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-lg"> <ul class="mui-pagination mui-pagination-lg">
<li class="mui-previous"> <li class="mui-previous">
<a href="#"> <a href="#">
&laquo; &laquo;
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
1 1
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
2 2
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
3 3
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
4 4
</a> </a>
</li> </li>
<li class="mui-active"> <li class="mui-active">
<a href="#"> <a href="#">
5 5
</a> </a>
</li> </li>
<li class="mui-next mui-disabled"> <li class="mui-next mui-disabled">
<a href="#"> <a href="#">
&raquo; &raquo;
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<h5 class="mui-content-padded">分页(小尺寸)</h5> <h5 class="mui-content-padded">分页(小尺寸)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pagination mui-pagination-sm"> <ul class="mui-pagination mui-pagination-sm">
<li class="mui-previous"> <li class="mui-previous">
<a href="#"> <a href="#">
&laquo; &laquo;
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
1 1
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
2 2
</a> </a>
</li> </li>
<li class="mui-active"> <li class="mui-active">
<a href="#"> <a href="#">
3 3
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
4 4
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
5 5
</a> </a>
</li> </li>
<li class="mui-next"> <li class="mui-next">
<a href="#"> <a href="#">
&raquo; &raquo;
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<h5 class="mui-content-padded">翻页(默认)</h5> <h5 class="mui-content-padded">翻页(默认)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pager"> <ul class="mui-pager">
<li> <li>
<a href="#"> <a href="#">
上一页 上一页
</a> </a>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
下一页 下一页
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<h5 class="mui-content-padded">翻页(对齐)</h5> <h5 class="mui-content-padded">翻页(对齐)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pager"> <ul class="mui-pager">
<li class="mui-previous"> <li class="mui-previous">
<a href="#"> <a href="#">
上一页 上一页
</a> </a>
</li> </li>
<li class="mui-next"> <li class="mui-next">
<a href="#"> <a href="#">
下一页 下一页
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
<h5 class="mui-content-padded">翻页(禁用)</h5> <h5 class="mui-content-padded">翻页(禁用)</h5>
<div class="mui-content-padded"> <div class="mui-content-padded">
<ul class="mui-pager"> <ul class="mui-pager">
<li class="mui-disabled"> <li class="mui-disabled">
<span> 上一页 </span> <span> 上一页 </span>
</li> </li>
<li> <li>
<a href="#"> <a href="#">
下一页 下一页
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
...@@ -3017,7 +3018,7 @@ ...@@ -3017,7 +3018,7 @@
<p class="component-description"></p> <p class="component-description"></p>
<div class="component-example"> <div class="component-example">
<h5 class="mui-content-padded">图标左对齐</h5> <h5 class="mui-content-padded">图标左对齐</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-radio mui-left"> <div class="mui-input-row mui-radio mui-left">
...@@ -3030,7 +3031,7 @@ ...@@ -3030,7 +3031,7 @@
</div> </div>
</form> </form>
</div> </div>
<h5 class="mui-content-padded">图标右对齐</h5> <h5 class="mui-content-padded">图标右对齐</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-radio"> <div class="mui-input-row mui-radio">
...@@ -3083,13 +3084,13 @@ ...@@ -3083,13 +3084,13 @@
<div id="segmentedControl" class="mui-segmented-control"> <div id="segmentedControl" class="mui-segmented-control">
<a class="mui-control-item mui-active" href="#item1mobile"> <a class="mui-control-item mui-active" href="#item1mobile">
待办公文（8） 待办公文（8）
</a> </a>
<a class="mui-control-item" href="#item2mobile"> <a class="mui-control-item" href="#item2mobile">
已办公文 已办公文
</a> </a>
<a class="mui-control-item" href="#item3mobile"> <a class="mui-control-item" href="#item3mobile">
全部公文 全部公文
</a> </a>
</div> </div>
<div class="mui-content-padded"> <div class="mui-content-padded">
<div id="item1mobile" class="mui-control-content mui-active"> <div id="item1mobile" class="mui-control-content mui-active">
...@@ -3150,7 +3151,7 @@ ...@@ -3150,7 +3151,7 @@
</ul> </ul>
</div> </div>
</div> </div>
<h5 class="mui-content-padded">Style</h5> <h5 class="mui-content-padded">Style</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-radio"> <div class="mui-input-row mui-radio">
...@@ -3163,7 +3164,7 @@ ...@@ -3163,7 +3164,7 @@
</div> </div>
</form> </form>
</div> </div>
<h5 class="mui-content-padded">Color</h5> <h5 class="mui-content-padded">Color</h5>
<div class="mui-card"> <div class="mui-card">
<form class="mui-input-group"> <form class="mui-input-group">
<div class="mui-input-row mui-radio"> <div class="mui-input-row mui-radio">
...@@ -3492,11 +3493,11 @@ ...@@ -3492,11 +3493,11 @@
<p class="component-description">Switches can be used by sliding or tapping the control.</p> <p class="component-description">Switches can be used by sliding or tapping the control.</p>
<div class="component-example"> <div class="component-example">
<div class="mui-switch mui-active"> <div class="mui-switch mui-active">
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
<div class="mui-switch"> <div class="mui-switch">
<div class="mui-switch-handle"></div> <div class="mui-switch-handle"></div>
</div> </div>
</div> </div>
...@@ -3505,8 +3506,8 @@ ...@@ -3505,8 +3506,8 @@
<span class="nt">&lt;/div&gt;</span> <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&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</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> <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> <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 @@ ...@@ -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> <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="component-example">
<div class="mui-content-padded"> <div class="mui-content-padded">
<h1>h1. Heading</h1> <h1>h1. Heading</h1>
<h2>h2. Heading</h2> <h2>h2. Heading</h2>
<h3>h3. Heading</h3> <h3>h3. Heading</h3>
<h4>h4. Heading</h4> <h4>h4. Heading</h4>
<h5>h5. Heading</h5> <h5>h5. Heading</h5>
<h6>h6. Heading</h6> <h6>h6. Heading</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <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, tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p> quis nostrud exercitation ullamco.</p>
</div> </div>
</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