Skip to content

M
mui
Commit 04c7a363 authored by fxy060608's avatar fxy060608
Browse files
Options

mui docs

parent 7366d060
Show whitespace changes
Inline Side-by-side
Showing with 1217 additions and 1203 deletions
components/index.html
View file @ 04c7a363
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<title>CSS组件 &middot; MUI</title>
<meta name="description" content="MUI: 最接近原生APP体验的高性能前端框架">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="http://dcloudio.github.io/mui/favicon.ico">
......@@ -114,9 +114,9 @@
</header>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
......@@ -136,7 +136,7 @@
</header>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-pull-left&quot;</span><span class="nt">&gt;</span>
Left
<span class="nt">&lt;/button&gt;</span>
......@@ -144,7 +144,7 @@
Right
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
......@@ -160,11 +160,11 @@
</header>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-left-nav mui-pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-compose mui-pull-right&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
......@@ -186,7 +186,7 @@
</header>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-link mui-btn-nav mui-pull-left&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-left-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Left
......@@ -196,7 +196,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-right-nav&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
......@@ -220,7 +220,7 @@
</header>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-pull-left&quot;</span><span class="nt">&gt;</span>
Left
<span class="nt">&lt;/button&gt;</span>
......@@ -232,7 +232,7 @@
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span><span class="nt">&gt;</span>Three<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
......@@ -242,53 +242,44 @@
<div class="component-example component-example-fullbleed">
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">Label</span>
</a>
<a class="mui-tab-item" href="#">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">Label</span>
<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="#">
<span class="mui-icon mui-icon-star-filled"></span>
<span class="mui-tab-label">Label</span>
<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="#">
<span class="mui-icon mui-icon-search"></span>
<span class="mui-tab-label">Label</span>
<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="#">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">Label</span>
<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>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-tab&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-home&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>Home<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-person&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>Profile<span class="nt">&lt;/span&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-tab&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#tabbar&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-phone&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>电话咨询<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-star-filled&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>Favorites<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#tabbar-with-chat&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-chat&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>在线咨询<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>Search<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#tabbar-with-sms&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-sms&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>短信咨询<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-gear&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>Settings<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#tabbar-with-map&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-map&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-tab-label&quot;</span><span class="nt">&gt;</span>查看地图<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
</article>
<article class="component">
......@@ -309,7 +300,7 @@
</nav>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-tab&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-tab&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
Label
<span class="nt">&lt;/a&gt;</span>
......@@ -319,7 +310,7 @@
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-tab-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#&quot;</span><span class="nt">&gt;</span>
Label
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<span class="nt">&lt;/nav&gt;</span></code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
</article>
......@@ -344,30 +335,30 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Segmented control in standard mui-bar fixed to top --&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="c">&lt;!-- Segmented control in standard mui-bar fixed to top --&gt;</span>
<span class="nt">&lt;nav</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item mui-active&quot;</span><span class="nt">&gt;</span>Thing one<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span><span class="nt">&gt;</span>Thing two<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span><span class="nt">&gt;</span>Thing three<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/nav&gt;</span>
<span class="c">&lt;!-- Block button in standard mui-bar fixed below top mui-bar --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-header-secondary&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Block button in standard mui-bar fixed below top mui-bar --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-header-secondary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block&quot;</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Block button in standard mui-bar fixed above the footer --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-footer-secondary&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Block button in standard mui-bar fixed above the footer --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-footer-secondary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block&quot;</span><span class="nt">&gt;</span>Block level button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="c">&lt;!-- Icons in standard mui-bar fixed to the bottom of the screen --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-footer&quot;</span><span class="nt">&gt;</span>
<span class="c">&lt;!-- Icons in standard mui-bar fixed to the bottom of the screen --&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-standard mui-bar-footer&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-compose mui-pull-left&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-gear mui-pull-right&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
......@@ -384,23 +375,19 @@
<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>
<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>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1&gt;</span>h1. Heading<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;h2&gt;</span>h2. Heading<span class="nt">&lt;/h2&gt;</span>
<span class="nt">&lt;h3&gt;</span>h3. Heading<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;h4&gt;</span>h4. Heading<span class="nt">&lt;/h4&gt;</span>
<span class="nt">&lt;h5&gt;</span>h5. Heading<span class="nt">&lt;/h5&gt;</span>
<span class="nt">&lt;h6&gt;</span>h6. Heading<span class="nt">&lt;/h6&gt;</span>
<span class="nt">&lt;p&gt;</span>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.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;p&gt;</span>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.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
......@@ -418,12 +405,12 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell mui-table-view-divider&quot;</span><span class="nt">&gt;</span>Divider<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -451,7 +438,7 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-navigate-right&quot;</span><span class="nt">&gt;</span>
Item 1
......@@ -467,7 +454,7 @@
Item 3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<p class="component-note touch-only"><strong>Note:</strong> Table views with the Android theme don't have chevrons to comply with Android Design guidelines. More information can be found <a href="http://developer.android.com/design/patterns/pure-android.html">here</a>.</p>
</article>
......@@ -477,17 +464,23 @@
<div class="component-example component-example-fullbleed">
<ul class="mui-table-view">
<li class="mui-table-view-cell">Item 1 <span class="mui-badge">4</span></li>
<li class="mui-table-view-cell">Item 2 <span class="mui-badge">1</span></li>
<li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span></li>
<li class="mui-table-view-cell">Item 1 <span class="mui-badge">4</span>
</li>
<li class="mui-table-view-cell">Item 2 <span class="mui-badge">1</span>
</li>
<li class="mui-table-view-cell">Item 3 <span class="mui-badge">5</span>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3 <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -518,7 +511,7 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>5<span class="nt">&lt;/span&gt;</span>
......@@ -537,7 +530,7 @@
Item 3
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -577,7 +570,7 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell mui-media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">&quot;mui-media-object mui-pull-left&quot;</span> <span class="na">src=</span><span class="s">&quot;http://placehold.it/42x42&quot;</span><span class="nt">&gt;</span>
......@@ -605,7 +598,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -642,7 +635,7 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell mui-media&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-navigate-right&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-media-object mui-pull-left mui-icon mui-icon-trash&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
......@@ -667,7 +660,7 @@
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -676,19 +669,35 @@
<div class="component-example component-example-fullbleed">
<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 <button class="mui-btn mui-btn-positive">Button</button></li>
<li class="mui-table-view-cell">Item 4 <button class="mui-btn mui-btn-negative">Button</button></li>
<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
<button class="mui-btn mui-btn-positive">Button</button>
</li>
<li class="mui-table-view-cell">Item 4
<button class="mui-btn mui-btn-negative">Button</button>
</li>
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 4 <span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 4
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -718,7 +727,7 @@
</ul>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>
Item 1
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-switch&quot;</span><span class="nt">&gt;</span>
......@@ -737,7 +746,7 @@
<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>
<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
<span class="nt">&lt;/ul&gt;</span></code></pre></div>
</article>
......@@ -757,7 +766,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">&quot;mui-table-view&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/li&gt;</span>
......@@ -765,7 +774,7 @@
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item 4<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
......@@ -787,16 +796,16 @@
<button class="mui-btn mui-btn-negative mui-btn-outlined">Button</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-link&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-link&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Button<span class="nt">&lt;/button&gt;</span></code></pre></div>
</article>
......@@ -828,26 +837,26 @@
</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-search&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-link&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-link&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-left&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
Button
<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;/button&gt;</span></code></pre></div>
</article>
......@@ -855,21 +864,33 @@
<h3 class="component-title">Buttons with badges</h3>
<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">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>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-primary&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-positive&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-outlined mui-btn-negative&quot;</span><span class="nt">&gt;</span>Badge button <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/button&gt;</span></code></pre></div>
</article>
......@@ -888,15 +909,15 @@
<button class="mui-btn mui-btn-negative mui-btn-block mui-btn-outlined">Block button</button>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-block&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span></code></pre></div>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-primary mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-negative mui-btn-block mui-btn-outlined&quot;</span><span class="nt">&gt;</span>Block button<span class="nt">&lt;/button&gt;</span></code></pre></div>
</article>
......@@ -924,7 +945,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-segmented-control&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-segmented-control&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item mui-active&quot;</span> <span class="na">href=</span><span class="s">&quot;#item1mobile&quot;</span><span class="nt">&gt;</span>
Thing one
<span class="nt">&lt;/a&gt;</span>
......@@ -934,12 +955,12 @@
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-control-item&quot;</span> <span class="na">href=</span><span class="s">&quot;#item3mobile&quot;</span><span class="nt">&gt;</span>
Thing three
<span class="nt">&lt;/a&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-card&quot;</span><span class="nt">&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-card&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item1mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content mui-active&quot;</span><span class="nt">&gt;</span>Item 1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item2mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>Item 2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">id=</span><span class="s">&quot;item3mobile&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-control-content&quot;</span><span class="nt">&gt;</span>Item 3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
......@@ -959,15 +980,15 @@
<span class="mui-badge mui-badge-negative mui-badge-inverted">4</span>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary mui-badge-inverted&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive mui-badge-inverted&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative mui-badge-inverted&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span></code></pre></div>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-inverted&quot;</span><span class="nt">&gt;</span>1<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-primary mui-badge-inverted&quot;</span><span class="nt">&gt;</span>2<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-positive mui-badge-inverted&quot;</span><span class="nt">&gt;</span>3<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-badge mui-badge-negative mui-badge-inverted&quot;</span><span class="nt">&gt;</span>4<span class="nt">&lt;/span&gt;</span></code></pre></div>
</article>
......@@ -984,12 +1005,12 @@
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Full name&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;search&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Search&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;textarea</span> <span class="na">rows=</span><span class="s">&quot;5&quot;</span><span class="nt">&gt;&lt;/textarea&gt;</span>
<span class="nt">&lt;button</span> <span class="na">class=</span><span class="s">&quot;mui-btn mui-btn-positive mui-btn-block&quot;</span><span class="nt">&gt;</span>Choose existing<span class="nt">&lt;/button&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
</article>
......@@ -1005,11 +1026,11 @@
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Full name&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;email&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Email&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Username&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
</article>
......@@ -1034,7 +1055,7 @@
</form>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;form</span> <span class="na">class=</span><span class="s">&quot;mui-input-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-input-row&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;label&gt;</span>Full name<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Mister Ratchet&quot;</span><span class="nt">&gt;</span>
......@@ -1047,7 +1068,7 @@
<span class="nt">&lt;label&gt;</span>Username<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;goRatchet&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
<span class="nt">&lt;/form&gt;</span></code></pre></div>
</article>
......@@ -1062,27 +1083,23 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-switch mui-active&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-switch mui-active&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>
<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&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>
<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="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>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Only needed if you want to fire a callback document .querySelector(&#39;#myToggle&#39;) .addEventListener(&#39;toggle&#39;, myFunction)</span></code></pre></div>
</article>
<!-- Popovers -->
<article class="component" id="mui-popovers">
<h3 class="component-title">Popovers</h3>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;mui-popover&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-popover&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;mui-popover&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-popover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Popover mui-title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span>
......@@ -1096,18 +1113,18 @@
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item7<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">&quot;mui-table-view-cell&quot;</span><span class="nt">&gt;</span>Item8<span class="nt">&lt;/li&gt;</span>
<span class="nt">&lt;/ul&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">Popovers are designed to only fire from <a href="#bars">mui-title bars</a>. Set the value of the mui-title href to the id of a mui-popover, like so:</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#myPopover&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>
Tap mui-title
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-caret&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
<span class="nt">&lt;/header&gt;</span></code></pre></div>
</article>
<!-- Modals -->
......@@ -1126,8 +1143,8 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Open modal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-modal&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;#myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-btn&quot;</span><span class="nt">&gt;</span>Open modal<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;myModalexample&quot;</span> <span class="na">class=</span><span class="s">&quot;mui-modal&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;header</span> <span class="na">class=</span><span class="s">&quot;mui-bar mui-bar-nav&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-close mui-pull-right&quot;</span> <span class="na">href=</span><span class="s">&quot;#myModalexample&quot;</span><span class="nt">&gt;&lt;/a&gt;</span>
<span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">&quot;mui-title&quot;</span><span class="nt">&gt;</span>Modal<span class="nt">&lt;/h1&gt;</span>
......@@ -1136,7 +1153,7 @@
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>The contents of my mui-modal go here. 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 laboris nisi ut.<span class="nt">&lt;/p&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
......@@ -1167,7 +1184,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span> <span class="na">id=</span><span class="s">&quot;mySlider&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider&quot;</span> <span class="na">id=</span><span class="s">&quot;mySlider&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-slider-item&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;http://dcloudio.github.io/mui/assets/img/slide-1.jpg&quot;</span><span class="nt">&gt;</span>
......@@ -1183,14 +1200,11 @@
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;http://dcloudio.github.io/mui/assets/img/slide-3.jpg&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<p class="component-description">Sliders.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;#mySlider&#39;</span><span class="p">)</span>
<span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;slide&#39;</span><span class="p">,</span> <span class="nx">myFunction</span><span class="p">)</span></code></pre></div>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="c1">// Only needed if you want to fire a callback document .querySelector(&#39;#mySlider&#39;) .addEventListener(&#39;slide&#39;, myFunction)</span></code></pre></div>
</article>
......@@ -1275,7 +1289,7 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;mui-content-padded&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-spinner mui-spin&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-spinner-cycle mui-spin&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-weibo&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
......@@ -1311,7 +1325,7 @@
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-phone-solid&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-phone-filled&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-icon mui-icon-close-cycle&quot;</span><span class="nt">&gt;&lt;/span&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
</article>
......
sitemap.xml
View file @ 04c7a363
......@@ -2,7 +2,7 @@
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://dcloudio.github.io/mui/</loc>
<lastmod>2014-08-29T23:07:30+08:00</lastmod>
<lastmod>2014-08-29T23:13:28+08:00</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
......@@ -10,7 +10,7 @@
<url>
<loc>http://dcloudio.github.io/mui/about/</loc>
<lastmod>2014-08-29T23:07:30+08:00</lastmod>
<lastmod>2014-08-29T23:13:28+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -19,7 +19,7 @@
<url>
<loc>http://dcloudio.github.io/mui/components/</loc>
<lastmod>2014-08-29T23:07:30+08:00</lastmod>
<lastmod>2014-08-29T23:13:28+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -28,7 +28,7 @@
<url>
<loc>http://dcloudio.github.io/mui/getting-started/</loc>
<lastmod>2014-08-29T23:07:30+08:00</lastmod>
<lastmod>2014-08-29T23:13:28+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......@@ -39,7 +39,7 @@
<url>
<loc>http://dcloudio.github.io/mui/javascript/</loc>
<lastmod>2014-08-29T23:07:30+08:00</lastmod>
<lastmod>2014-08-29T23:13:28+08:00</lastmod>
<changefreq>weekly</changefreq>
<priority>0.7</priority>
</url>
......
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