mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-19 22:31:03 +00:00
Update subheader examples
This commit is contained in:
Marcos Moura
parent
449a390fa5
commit
174998bc9d
1 changed files with 139 additions and 149 deletions
|
|
@ -1,173 +1,163 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="md-title">Subheader</h2>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="With Lists">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-subheader>Navigation</md-subheader>
|
||||
|
||||
<div v-md-theme="'blue'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Single Line</h2>
|
||||
</md-toolbar>
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list>
|
||||
<md-subheader>Navigation</md-subheader>
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Outbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Outbox</span>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
<md-subheader>Contacts</md-subheader>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-subheader>Contacts</md-subheader>
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<md-subheader>Today</md-subheader>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<md-subheader>Today</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-list {
|
||||
.md-list-action {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 16px;
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Subheader';
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue