Skip to content

M
mui
Commit 5bb2e3fd authored by fxy060608's avatar fxy060608
Browse files
Options

components

parent 195c3432
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 17 deletions
components/index.html
View file @ 5bb2e3fd
...@@ -1152,7 +1152,7 @@ ...@@ -1152,7 +1152,7 @@
<article class="component" id="popovers"> <article class="component" id="popovers">
<h3 class="component-title">Popovers</h3> <h3 class="component-title">Popovers</h3>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;popover&quot;</span> <span class="na">class=</span><span class="s">&quot;popover&quot;</span><span class="nt">&gt;</span> <div class="highlight"><pre><code class="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;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 title<span class="nt">&lt;/h1&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 title<span class="nt">&lt;/h1&gt;</span>
<span class="nt">&lt;/header&gt;</span> <span class="nt">&lt;/header&gt;</span>
...@@ -1170,7 +1170,7 @@ ...@@ -1170,7 +1170,7 @@
</code></pre> </code></pre>
</div> </div>
<p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a popover, like so:</p> <p class="component-description">Popovers are designed to only fire from <a href="#bars">title bars</a>. Set the value of the title href to the id of a mui-popover, like so:</p>
<div class="highlight"><pre><code class="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="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;a</span> <span class="na">href=</span><span class="s">&quot;#myPopover&quot;</span><span class="nt">&gt;</span>
...@@ -1224,39 +1224,39 @@ ...@@ -1224,39 +1224,39 @@
<p class="component-description">Can be used with any number of slides with any type of content.</p> <p class="component-description">Can be used with any number of slides with any type of content.</p>
<div class="component-example component-example-fullbleed"> <div class="component-example component-example-fullbleed">
<div class="slider" id="mySlider"> <div class="mui-slider" id="mySlider">
<div class="slide-group"> <div class="mui-slider-group">
<div class="slide"> <div class="slide">
<img src="/mui/assets/img/slide-1.jpg" alt="Mountain and sky"> <img src="/mui/assets/img/mui-slider-1.jpg" alt="Mountain and sky">
<span class="slide-text"> <span class="mui-slider-text">
<span class="mui-icon mui-icon-left-nav"></span> <span class="mui-icon mui-icon-left-nav"></span>
Slide me Slide me
</span> </span>
</div> </div>
<div class="slide"> <div class="slide">
<img src="/mui/assets/img/slide-2.jpg" alt="Giant mecha"> <img src="/mui/assets/img/mui-slider-2.jpg" alt="Giant mecha">
</div> </div>
<div class="slide"> <div class="slide">
<img src="/mui/assets/img/slide-3.jpg" alt="Big Ben"> <img src="/mui/assets/img/mui-slider-3.jpg" alt="Big Ben">
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;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="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;slide-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-group&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/slide-1.jpg&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/mui-slider-1.jpg&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;slide-text&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;mui-slider-text&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> <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>
Slide me Slide me
<span class="nt">&lt;/span&gt;</span> <span class="nt">&lt;/span&gt;</span>
<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;slide&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/slide-2.jpg&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/mui-slider-2.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</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;slide&quot;</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/slide-3.jpg&quot;</span><span class="nt">&gt;</span> <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;/mui/assets/img/mui-slider-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> <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span>
...@@ -1286,7 +1286,7 @@ ...@@ -1286,7 +1286,7 @@
<p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p> <p class="component-note">This will use push to replace everything in the .content div with the .content of two.html. Also, it will either update or remove .bar-nav and .bar-tab according to their presences in two.html.</p>
<p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>slide-in</code>, or <code>slide-out</code>.</p> <p class="component-description">Now that pages are being loaded through push, it's easy to specify transitions for animations between pages. There are three different transitions to chose from: <code>fade</code>, <code>mui-slider-in</code>, or <code>mui-slider-out</code>.</p>
<div class="highlight"><pre><code class="html"><span class="c">&lt;!-- An one.html link that animates to two.html --&gt;</span> <div class="highlight"><pre><code class="html"><span class="c">&lt;!-- An one.html link that animates to two.html --&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;fade&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;fade&quot;</span><span class="nt">&gt;</span>Two<span class="nt">&lt;/a&gt;</span>
...@@ -1303,7 +1303,7 @@ ...@@ -1303,7 +1303,7 @@
<div class="mui-card"> <div class="mui-card">
<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" href="/two.html" data-transition="slide-in"> <a class="mui-navigate-right" href="/two.html" data-transition="mui-slider-in">
Load new page with push Load new page with push
</a> </a>
</li> </li>
...@@ -1319,7 +1319,7 @@ ...@@ -1319,7 +1319,7 @@
<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</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;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;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="na">href=</span><span class="s">&quot;../two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;slide-in&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="na">href=</span><span class="s">&quot;../two.html&quot;</span> <span class="na">data-transition=</span><span class="s">&quot;mui-slider-in&quot;</span><span class="nt">&gt;</span>
Load new page with push Load new page with push
<span class="nt">&lt;/a&gt;</span> <span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/li&gt;</span> <span class="nt">&lt;/li&gt;</span>
......
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