mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-17 19:51:06 +00:00
Add code example
This commit is contained in:
Marcos Moura
parent
06bd8932bc
commit
1be664056a
4 changed files with 1267 additions and 20 deletions
|
|
@ -107,7 +107,129 @@
|
|||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
<demo-example label="Regular fields">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Initial value</label>
|
||||
<md-input v-model="initialValue"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>With label</label>
|
||||
<md-input placeholder="My nice placeholder"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-inline>
|
||||
<label>Inline field</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Number</label>
|
||||
<md-input type="number"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Disabled</label>
|
||||
<md-input disabled></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initialValue: 'My initial value'
|
||||
};
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Password">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Regular Password</label>
|
||||
<md-input type="password"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-has-password>
|
||||
<label>Password Reveal</label>
|
||||
<md-input type="password"></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Required and Errors">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Required</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error with message</label>
|
||||
<md-input required></md-input>
|
||||
|
||||
<span class="md-error">Validation message</span>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Textarea with error</label>
|
||||
<md-textarea></md-textarea>
|
||||
|
||||
<span class="md-error">Textarea validation message</span>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Character counter">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea maxlength="70"></md-textarea>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Input</label>
|
||||
<md-input maxlength="20"></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="4">
|
||||
<code-block lang="xml">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container v-md-theme="'green'">
|
||||
<label>Themable - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container v-md-theme="'brown'">
|
||||
<label>Themable - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
|
|||
|
|
@ -367,7 +367,7 @@
|
|||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Controls">
|
||||
<demo-example label="Expansion List">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
|
|
@ -620,7 +620,704 @@
|
|||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
<demo-example label="Single Line">
|
||||
<code-block lang="xml">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Sent Mail</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<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>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Sent Mail</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<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>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Double Line">
|
||||
<code-block lang="xml">
|
||||
<md-list class="md-double-line">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">email</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>aliconnors@example.com</span>
|
||||
<span>Personal</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>ali_connors@example.com</span>
|
||||
<span>Work</span>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-list class="md-double-line md-dense">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">email</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>aliconnors@example.com</span>
|
||||
<span>Personal</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>ali_connors@example.com</span>
|
||||
<span>Work</span>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Triple Line">
|
||||
<code-block lang="xml">
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-list class="custom-list md-triple-line md-dense">
|
||||
<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>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.custom-list {
|
||||
.md-list-action {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 16px;
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Expansion List">
|
||||
<code-block lang="xml">
|
||||
<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>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Complete Example">
|
||||
<code-block lang="xml">
|
||||
<div class="complete-example">
|
||||
<md-whiteframe md-elevation="3">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
<md-subheader class="md-inset">Folders</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Photos</span>
|
||||
<p>Jan 9, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Recipes</span>
|
||||
<p>Jan 17, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Work</span>
|
||||
<p>Jan 28, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-subheader class="md-inset">Files</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
|
||||
<md-icon>insert_drive_file</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Vacation Itinerary</span>
|
||||
<p>Jan 20, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Kitchen Remodel</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
|
||||
<md-icon>view_list</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Grocery Shop</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Weekend Pictures</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-sidenav class="md-left" ref="sidebar">
|
||||
<md-toolbar class="md-account-header" v-md-theme="'blue'">
|
||||
<md-list class="md-transparent">
|
||||
<md-list-item class="md-avatar-list">
|
||||
<md-avatar class="md-large">
|
||||
<img src="https://placeimg.com/64/64/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/3" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/4" alt="People">
|
||||
</md-avatar>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<div class="md-list-text-container">
|
||||
<span>John Doe</span>
|
||||
<span>johndoe@email.com</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>arrow_drop_down</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list v-md-theme="'blue'">
|
||||
<md-list-item @click="toggleSidenav" class="md-primary">
|
||||
<md-icon>insert_drive_file</md-icon> <span>My files</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>people</md-icon> <span>Shared with me</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>access_time</md-icon> <span>Recent</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>start</md-icon> <span>Starred</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-sidenav>
|
||||
</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.complete-example {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.md-fab {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 16px;
|
||||
box-shadow: $material-shadow-5dp;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
.md-icon {
|
||||
color: #014e70;
|
||||
}
|
||||
}
|
||||
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-list {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.md-list-action .md-icon {
|
||||
color: rgba(#000, .26);
|
||||
}
|
||||
|
||||
.md-avatar-icon .md-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-sidenav .md-list-text-container > :nth-child(2) {
|
||||
color: rgba(#fff, .54);
|
||||
}
|
||||
|
||||
.md-account-header {
|
||||
.md-list-item:hover .md-button:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.md-avatar-list .md-list-item-container:hover {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$refs.sidebar.toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
@ -713,11 +1410,6 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sidenavVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$refs.sidebar.toggle();
|
||||
|
|
|
|||
|
|
@ -151,11 +151,212 @@
|
|||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<demo-example label="Default - Grey Theme" body-theme="grey">
|
||||
<code-block lang="xml">
|
||||
<md-tabs>
|
||||
<md-tab id="movies" md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="music" md-label="Music">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="books" md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="pictures" md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Fixed - Accent Color">
|
||||
<code-block lang="xml">
|
||||
<md-tabs md-fixed class="md-accent">
|
||||
<md-tab md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Music">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="With icons and text - Teal Theme" body-theme="teal">
|
||||
<code-block lang="xml">
|
||||
<md-tabs md-fixed>
|
||||
<md-tab md-label="Movies" md-icon="ondemand_video">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Music" md-icon="music_note">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Books" md-icon="books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Pictures" md-icon="photo">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Centered with only icon - Transparent Color">
|
||||
<code-block lang="xml">
|
||||
<md-tabs md-centered class="md-transparent">
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="favorite">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Fixed with only icon - Default Theme">
|
||||
<code-block lang="xml">
|
||||
<md-tabs md-fixed>
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="favorite">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Playground">
|
||||
<code-block lang="xml">
|
||||
<div class="playground">
|
||||
<md-subheader>Tabs Attributes</md-subheader>
|
||||
<md-checkbox id="fixed" v-model="playground.fixed">Fixed</md-checkbox>
|
||||
<md-checkbox id="centered" v-model="playground.centered">Centered</md-checkbox>
|
||||
<md-input-container>
|
||||
<label for="shadow">Shadow</label>
|
||||
<md-input type="number" id="shadow" v-model="playground.shadow" min="0" max="24"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-subheader>Theme</md-subheader>
|
||||
<md-radio v-model="playground.theme" id="theme1" name="theme" md-value="default">Default</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme2" name="theme" md-value="green">Green</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme3" name="theme" md-value="cyan">Cyan</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme4" name="theme" md-value="brown">Brown</md-radio>
|
||||
|
||||
<md-subheader>Colors</md-subheader>
|
||||
<md-radio v-model="playground.color" id="color1" name="color" md-value="0">Default</md-radio>
|
||||
<md-radio v-model="playground.color" id="color2" name="color" md-value="1">Accent</md-radio>
|
||||
<md-radio v-model="playground.color" id="color3" name="color" md-value="2">Warn</md-radio>
|
||||
<md-radio v-model="playground.color" id="color4" name="color" md-value="3">Transparent</md-radio>
|
||||
|
||||
<md-subheader>Second Tab</md-subheader>
|
||||
<md-checkbox id="disabled" v-model="playground.tabs[1].disabled">Disabled</md-checkbox>
|
||||
<md-checkbox id="active" v-model="playground.tabs[1].active">Active</md-checkbox>
|
||||
</div>
|
||||
|
||||
<md-tabs
|
||||
:class="{
|
||||
'md-accent': playground.color === '1',
|
||||
'md-warn': playground.color === '2',
|
||||
'md-transparent': playground.color === '3'
|
||||
}"
|
||||
:md-fixed="playground.fixed"
|
||||
:md-centered="playground.centered"
|
||||
:md-elevation="playground.shadow"
|
||||
v-md-theme="playground.theme">
|
||||
<md-tab v-for="(tab, index) in playground.tabs" :md-label="tab.label" :md-icon="tab.icon" :md-disabled="tab.disabled" :md-active="tab.active">
|
||||
<md-input-container>
|
||||
<label :for="'label' + index">Label</label>
|
||||
<md-input type="text" :id="'label' + index" v-model="tab.label"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label :for="'icon' + index">Icon</label>
|
||||
<md-input type="text" :id="'icon' + index" v-model="tab.icon"></md-input>
|
||||
</md-input-container>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.md-subheader {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playground: {
|
||||
color: '3',
|
||||
fixed: true,
|
||||
centered: false,
|
||||
shadow: 0,
|
||||
theme: 'default',
|
||||
tabs: [
|
||||
{
|
||||
label: 'Phone',
|
||||
icon: 'phone',
|
||||
active: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: 'Favorites',
|
||||
icon: 'favorite',
|
||||
active: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: 'Near me',
|
||||
icon: 'near_me',
|
||||
active: true,
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
firstTabName: 'Movies'
|
||||
};
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
|
|||
|
|
@ -197,7 +197,239 @@
|
|||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
<demo-example label="Default">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Dense">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Medium">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-medium">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1;">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Large">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-large">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Accent, Warn and Transparent Colors">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-accent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-warn">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button>Add</md-button>
|
||||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-transparent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-raised">Add</md-button>
|
||||
<md-button class="md-raised md-warn">Remove</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<code-block lang="xml">
|
||||
<md-toolbar v-md-theme="'green'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-toolbar class="md-large" v-md-theme="'brown'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-toolbar v-md-theme="'orange'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button>Add</md-button>
|
||||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-toolbar v-md-theme="'blue'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-raised">Add</md-button>
|
||||
<md-button class="md-raised md-warn">Remove</md-button>
|
||||
</md-toolbar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Complete Example" class="example">
|
||||
<code-block lang="xml">
|
||||
<div class="example">
|
||||
<md-toolbar class="md-large" v-md-theme="'green'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</div>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="scss">
|
||||
.example {
|
||||
.md-button.md-fab {
|
||||
margin: 0;
|
||||
right: 56px;
|
||||
bottom: -26px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
|
@ -211,13 +443,13 @@
|
|||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.md-button.md-fab {
|
||||
margin: 0;
|
||||
right: 56px;
|
||||
bottom: -26px;
|
||||
}
|
||||
|
||||
.example {
|
||||
.md-button.md-fab {
|
||||
margin: 0;
|
||||
right: 56px;
|
||||
bottom: -26px;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue