Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-04 21:44:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add better examples to list page #457

Browse source
This commit is contained in:
Marcos Moura 2017-02-08 20:05:27 -02:00
parent 52d77ffd38
commit 516102ebd3
2 changed files with 85 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
docs/src/pages/components/List.vue
View file

@ -848,9 +848,81 @@
</div>
</example-box>
<example-box card-title="Expansion Lists">
<example-box card-title="Controls">
<div slot="demo">
<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>
<div class="phone-viewport">
<md-toolbar md-theme="white">
<span class="md-title">Single Expand</span>
</md-toolbar>
<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>
</md-list-expand>
</md-list-item>
<md-list-item>
<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-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>
<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>
@ -960,7 +1032,7 @@
<style lang="sass" scoped>
.phone-viewport {
height: 400px;
height: 480px;
}
.custom-list {
@ -969,3 +1041,13 @@
}
}
</style>
<script>
export default {
methods: {
openAlert() {
window.alert('...');
}
}
};
</script>

2
src/components/mdList/mdListItemLink.vue
View file

@ -13,7 +13,7 @@
name: 'md-list-item',
props: {
href: String,
target: Boolean,
target: String,
disabled: Boolean
},
computed: {