mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-03-16 22:10:27 +00:00
Merge pull request #750 from vuematerial/issue#486
List.vue enhanced with examples
This commit is contained in:
commit
0734305b3d
1 changed files with 108 additions and 28 deletions
|
|
@ -848,7 +848,7 @@
|
|||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Controls">
|
||||
<example-box card-title="Multiple Options">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport">
|
||||
<md-toolbar md-theme="white">
|
||||
|
|
@ -864,7 +864,30 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="phone-viewport">
|
||||
<md-toolbar md-theme="white">
|
||||
<span class="md-title">Multiple options</span>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list>
|
||||
<md-list-item>Plain Text</md-list-item>
|
||||
<md-list-item target="_blank" href="https://google.com">Link</md-list-item>
|
||||
<md-list-item @click.native="openAlert">Button</md-list-item>
|
||||
<md-list-item>
|
||||
<router-link to="/components/list">Router View</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</code-block>
|
||||
</div>
|
||||
</example-box>
|
||||
|
||||
<example-box card-title="Expand List">
|
||||
<div slot="demo">
|
||||
<div class="phone-viewport">
|
||||
<md-toolbar md-theme="white">
|
||||
<span class="md-title">Single Expand</span>
|
||||
|
|
@ -975,52 +998,109 @@
|
|||
<div slot="code">
|
||||
<code-block lang="xml">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>whatshot</md-icon>
|
||||
<span>News</span>
|
||||
<md-toolbar md-theme="white">
|
||||
<span class="md-title">Single Expand</span>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>whatshot</md-icon>
|
||||
<span>News</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">World</md-list-item>
|
||||
<md-list-item class="md-inset">Americas</md-list-item>
|
||||
<md-list-item class="md-inset">Europe</md-list-item>
|
||||
<md-list-item class="md-inset">World</md-list-item>
|
||||
<md-list-item class="md-inset">Americas</md-list-item>
|
||||
<md-list-item class="md-inset">Europe</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>videogame_asset</md-icon>
|
||||
<span>Games</span>
|
||||
<md-icon>videogame_asset</md-icon>
|
||||
<span>Games</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Console</md-list-item>
|
||||
<md-list-item class="md-inset">PC</md-list-item>
|
||||
<md-list-item class="md-inset">Phone</md-list-item>
|
||||
<md-list-item class="md-inset">Console</md-list-item>
|
||||
<md-list-item class="md-inset">PC</md-list-item>
|
||||
<md-list-item class="md-inset">Phone</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>video_library</md-icon>
|
||||
<span>Video</span>
|
||||
<md-icon>video_library</md-icon>
|
||||
<span>Video</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Humor</md-list-item>
|
||||
<md-list-item class="md-inset">Music</md-list-item>
|
||||
<md-list-item class="md-inset">Movies</md-list-item>
|
||||
<md-list-item class="md-inset">TV Shows</md-list-item>
|
||||
<md-list-item class="md-inset">Humor</md-list-item>
|
||||
<md-list-item class="md-inset">Music</md-list-item>
|
||||
<md-list-item class="md-inset">Movies</md-list-item>
|
||||
<md-list-item class="md-inset">TV Shows</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>shopping_basket</md-icon>
|
||||
<span>Shop</span>
|
||||
<md-icon>shopping_basket</md-icon>
|
||||
<span>Shop</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-toolbar md-theme="white">
|
||||
<span class="md-title">Multiple Expand</span>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list>
|
||||
<md-list-item md-expand-multiple>
|
||||
<md-icon>whatshot</md-icon>
|
||||
<span>News</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">World</md-list-item>
|
||||
<md-list-item class="md-inset">Americas</md-list-item>
|
||||
<md-list-item class="md-inset">Europe</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item md-expand-multiple>
|
||||
<md-icon>videogame_asset</md-icon>
|
||||
<span>Games</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Console</md-list-item>
|
||||
<md-list-item class="md-inset">PC</md-list-item>
|
||||
<md-list-item class="md-inset">Phone</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item md-expand-multiple>
|
||||
<md-icon>video_library</md-icon>
|
||||
<span>Video</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Humor</md-list-item>
|
||||
<md-list-item class="md-inset">Music</md-list-item>
|
||||
<md-list-item class="md-inset">Movies</md-list-item>
|
||||
<md-list-item class="md-inset">TV Shows</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>shopping_basket</md-icon>
|
||||
<span>Shop</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</code-block>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue