mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-15 12:21:06 +00:00
Add example for several components
This commit is contained in:
Marcos Moura
parent
9091bc16a3
commit
14dbd8e7ff
27 changed files with 1085 additions and 560 deletions
|
|
@ -53,6 +53,14 @@ $avatar-large-icon: 40px;
|
|||
display: block;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: 50%;
|
||||
|
||||
.md-ripple.md-active {
|
||||
animation-duration: .9s;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tooltip {
|
||||
&.md-tooltip-top {
|
||||
margin-top: -8px;
|
||||
|
|
|
|||
|
|
@ -87,6 +87,7 @@
|
|||
}
|
||||
|
||||
.md-icon {
|
||||
transition: $swift-ease-out;
|
||||
transition: $swift-ease-out,
|
||||
color $swift-linear-duration $swift-linear-timing-function;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
.THEME_NAME {
|
||||
.md-bottom-bar,
|
||||
&.md-bottom-bar {
|
||||
&:not(.md-shift) {
|
||||
.md-active {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
&.md-fixed {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -11,14 +17,48 @@
|
|||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
background-color: transparent;
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdShift && 'md-shift';
|
||||
return this.mdShift ? 'md-shift' : 'md-fixed';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ $button-icon-size: 40px;
|
|||
min-width: $button-width;
|
||||
min-height: $button-height;
|
||||
margin: 6px 8px;
|
||||
padding: 0 16px;
|
||||
padding: 0 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
|
@ -61,19 +61,6 @@ $button-icon-size: 40px;
|
|||
background-color: rgba(#999, .4);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(#000, .26);
|
||||
cursor: default;
|
||||
|
||||
&.md-raised {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
&.md-raised:not([disabled]) {
|
||||
box-shadow: $material-shadow-2dp;
|
||||
}
|
||||
|
|
@ -93,11 +80,11 @@ $button-icon-size: 40px;
|
|||
}
|
||||
|
||||
&.md-dense {
|
||||
min-width: $button-dense-height;
|
||||
height: $button-dense-height;
|
||||
min-height: $button-dense-height;
|
||||
padding: 0;
|
||||
line-height: $button-dense-height;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.md-tooltip {
|
||||
|
|
@ -196,6 +183,24 @@ $button-icon-size: 40px;
|
|||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(#000, .26);
|
||||
cursor: default;
|
||||
|
||||
&.md-raised,
|
||||
&.md-fab {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
|
||||
&.md-fab {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: $button-radius;
|
||||
background-clip: padding-box;
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@
|
|||
.md-checkbox-container {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
border-color: #{'ACCENT-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
|
|
@ -16,6 +20,36 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.md-primary.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
border-color: #{'PRIMARY-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
border-color: #{'WARN-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@invalid="onInvalid"
|
||||
@valid="onValid"
|
||||
@focus="onFocus"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ $input-size: 32px;
|
|||
|
||||
.md-input-container {
|
||||
min-height: 48px;
|
||||
margin: 4px 0 20px;
|
||||
margin: 4px 0 24px;
|
||||
padding-top: 16px;
|
||||
position: relative;
|
||||
|
||||
|
|
|
|||
|
|
@ -19,16 +19,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
.md-radio-container {
|
||||
border-color: rgba(#000, .26);
|
||||
|
||||
&:after {
|
||||
background-color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
.md-radio-container:after {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
|
|
@ -60,5 +50,21 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
.md-radio-container {
|
||||
border-color: rgba(#000, .26);
|
||||
|
||||
&:after {
|
||||
background-color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-checked {
|
||||
.md-radio-container {
|
||||
border-color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,6 @@
|
|||
<router-link to="/checkbox">Checkbox</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link to="/divider">Divider</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link to="/icon">Icon</router-link>
|
||||
</md-list-item>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<md-whiteframe class="demo-example" :class="classes" :style="{ height: height + 'px' }">
|
||||
<md-toolbar v-md-theme="titleTheme">
|
||||
<md-toolbar v-md-theme="titleTheme" class="demo-example-toolbar">
|
||||
<h2 class="md-title">{{ label }}</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<section v-md-theme="bodyTheme">
|
||||
<section v-md-theme="bodyTheme" class="demo-example-body">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
|
|
@ -41,6 +41,10 @@
|
|||
+ .demo-example {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.demo-example-body {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@ Vue.use(VueMaterial.MdTheme, {
|
|||
},
|
||||
accent: 'indigo'
|
||||
},
|
||||
brown: {
|
||||
primary: 'brown',
|
||||
accent: 'green'
|
||||
},
|
||||
indigo: {
|
||||
primary: 'indigo',
|
||||
accent: 'blue'
|
||||
|
|
|
|||
|
|
@ -1,83 +1,61 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="main-content">
|
||||
<md-whiteframe>
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Default</h2>
|
||||
</md-toolbar>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<section>
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
<md-avatar class="md-avatar-icon md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
<md-avatar class="md-avatar-icon md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
<md-avatar class="md-avatar-icon md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</demo-example>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
<demo-example label="Large" size="2">
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-whiteframe>
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Large</h2>
|
||||
</md-toolbar>
|
||||
<md-avatar class="md-avatar-icon md-large md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<section>
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
<md-avatar class="md-avatar-icon md-large md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
<md-avatar class="md-avatar-icon md-large md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</demo-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-whiteframe-1dp {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -1,60 +1,118 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<div class="main-content">
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Default</h2>
|
||||
</md-toolbar>
|
||||
<demo-example label="Shifting">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</md-whiteframe>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-accent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Shifting</h2>
|
||||
</md-toolbar>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-warn" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<md-bottom-bar md-shift v-md-theme="'teal'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</md-whiteframe>
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-transparent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div class="phone-viewport" v-md-theme="'indigo'">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'orange'">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'green'">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport" v-md-theme="'brown'">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cell-phone {
|
||||
width: 360px;
|
||||
height: 480px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.md-bottom-bar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.phone-viewport {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: darken(#fafafa, 5%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,225 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="title">Button Toggle</h2>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Multiple" size="2">
|
||||
<md-button-toggle class="md-button-group">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button-toggle class="md-button-group">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary" style="margin-top: 24px">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_underline</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
<md-button-toggle class="md-button-group md-accent">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_underline</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_underline</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
<md-button-toggle class="md-button-group md-warn">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
</section>
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle" disabled>
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-toggle">Works</md-button>
|
||||
<md-button class="md-toggle">With</md-button>
|
||||
<md-button>Text</md-button>
|
||||
<md-button>Too</md-button>
|
||||
</md-button-toggle>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Single Selection" size="2">
|
||||
<md-button-toggle type="radio" class="md-button-group">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-accent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-warn">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button>Works</md-button>
|
||||
<md-button class="md-toggle">With</md-button>
|
||||
<md-button>Text</md-button>
|
||||
<md-button>Too</md-button>
|
||||
</md-button-toggle>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-button-group + .md-button-group {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Buttom Toggle';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,146 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Flat">
|
||||
<md-button @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-accent">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<div class="main-content">
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Buttons</h2>
|
||||
</md-toolbar>
|
||||
<demo-example label="Raised">
|
||||
<md-button class="md-raised" @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-raised md-accent">Accent</md-button>
|
||||
<md-button class="md-raised md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-raised md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<section v-md-theme="'indigo'">
|
||||
<md-button @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-primary md-raised">Raised</md-button>
|
||||
<md-button class="md-accent md-raised">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-raised md-dense md-accent">Dense</md-button>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
<demo-example label="Themed">
|
||||
<md-button class="md-raised md-primary" @click="disablePrimaryButton" v-md-theme="'indigo'">Default</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="buttonDisabled" v-md-theme="'teal'">Primary</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'green'">Accent</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'white'">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled" v-md-theme="'grey'">Disabled</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'orange'">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">Links</h2>
|
||||
</md-toolbar>
|
||||
<demo-example label="Links">
|
||||
<md-button href="#/button" class="md-raised" @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button href="#/button" class="md-raised md-accent">Accent</md-button>
|
||||
<md-button href="#/button" class="md-raised md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<section v-md-theme="'indigo'">
|
||||
<md-button href="#/button" @click="disablePrimaryButton">Button</md-button>
|
||||
<md-button href="#/button" class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button href="#/button" class="md-primary md-raised">Raised</md-button>
|
||||
<md-button href="#/button" class="md-accent md-raised">Accent</md-button>
|
||||
<md-button href="#/button" class="md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense md-accent">Dense</md-button>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
<demo-example label="Icons - Flat">
|
||||
<md-button class="md-icon-button" @click="disablePrimaryButton">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-whiteframe class="cell-phone">
|
||||
<md-toolbar v-md-theme="'grey'">
|
||||
<h2 class="md-title">FAB</h2>
|
||||
</md-toolbar>
|
||||
<md-button class="md-icon-button md-primary" :disabled="buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<section v-md-theme="'indigo'">
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
<md-button class="md-icon-button md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
<md-button class="md-icon-button" :disabled="!buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Icons - Raised">
|
||||
<md-button class="md-icon-button md-raised" @click="disablePrimaryButton">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-primary" :disabled="buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised" :disabled="!buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Floating Action Button" height="360">
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-left md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary md-mini">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cell-phone {
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,36 +1,49 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="title">Checkbox</h2>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Regular Checkbox</md-checkbox>
|
||||
<md-checkbox id="my-test2" name="my-test2" v-model="checkbox" class="md-primary">Primary Color</md-checkbox>
|
||||
<md-checkbox id="my-test3" name="my-test3" v-model="checkbox" class="md-warn">Warn Color</md-checkbox>
|
||||
<md-checkbox id="my-test4" name="my-test4" v-model="checkbox" disabled>Disabled</md-checkbox>
|
||||
</demo-example>
|
||||
|
||||
<div>
|
||||
<md-checkbox id="my-test0" name="my-test0" v-model="checkbox">My beautiful checkbox</md-checkbox>
|
||||
<demo-example label="Themed">
|
||||
<div class="themed" v-md-theme="'orange'">
|
||||
<md-checkbox id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'green'">
|
||||
<md-checkbox id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'light-blue'">
|
||||
<md-checkbox id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'indigo'">
|
||||
<md-checkbox id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'brown'">
|
||||
<md-checkbox id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'indigo'">
|
||||
<md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Themed</md-checkbox>
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'blue'">
|
||||
<md-checkbox id="my-test2" name="my-test2" v-model="checkbox">Accent Color</md-checkbox>
|
||||
</div>
|
||||
<div slot="api">
|
||||
|
||||
<div v-md-theme="'orange'">
|
||||
<md-checkbox id="my-test3" name="my-test3" v-model="checkbox">Fancy colors</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-checkbox id="my-test4" name="my-test4" v-model="checkbox2">Really simple</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-checkbox id="my-test5" name="my-test5" v-model="checkbox" disabled>Disabled</md-checkbox>
|
||||
</div>
|
||||
</section>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
padding: 0 24px;
|
||||
.themed {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -41,6 +54,9 @@
|
|||
checkbox: true,
|
||||
checkbox2: false
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Checkbox';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<section>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.md-divider {
|
||||
margin-top: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,3 +3,11 @@
|
|||
<h1>Error 404</h1>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Error';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,35 @@
|
|||
<template>
|
||||
<section>
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-primary">home</md-icon>
|
||||
<md-icon class="md-accent">home</md-icon>
|
||||
<md-icon class="md-warn">home</md-icon>
|
||||
</section>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-primary">home</md-icon>
|
||||
<md-icon class="md-accent">home</md-icon>
|
||||
<md-icon class="md-warn">home</md-icon>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="2">
|
||||
<md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Icon';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,83 +1,130 @@
|
|||
<template>
|
||||
<section>
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Initial value</label>
|
||||
<md-input v-model="initialValue"></md-input>
|
||||
</md-input-container>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Regular fields" size="4">
|
||||
<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>
|
||||
<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 md-inline>
|
||||
<label>Inline field</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Required</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label>Number</label>
|
||||
<md-input type="number"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error</label>
|
||||
<md-input required></md-input>
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
|
||||
<span class="md-error">Validation message</span>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label>Disabled</label>
|
||||
<md-input disabled></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
|
||||
<md-input-container>
|
||||
<label>Disabled</label>
|
||||
<md-input disabled></md-input>
|
||||
</md-input-container>
|
||||
<demo-example label="Password" size="4">
|
||||
<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>Passwords</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>
|
||||
</demo-example>
|
||||
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
<demo-example label="Required and Errors" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Required</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Character counter - Textarea</label>
|
||||
<md-textarea maxlength="70"></md-textarea>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Character counter - Input</label>
|
||||
<md-input maxlength="20"></md-input>
|
||||
</md-input-container>
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error with message</label>
|
||||
<md-input required></md-input>
|
||||
|
||||
<md-input-container v-md-theme="'green'">
|
||||
<label>Themable - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
<span class="md-error">Validation message</span>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container v-md-theme="'orange'">
|
||||
<label>Themable - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</section>
|
||||
<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>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Character counter" size="4">
|
||||
<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>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="4">
|
||||
<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>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initialValue: 'My initial value'
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Input';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,8 @@
|
|||
<template>
|
||||
<div class="page-content">
|
||||
<md-whiteframe md-elevation="2">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button>Examples</md-button>
|
||||
<md-button>Code</md-button>
|
||||
<md-button>API</md-button>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="main-content">
|
||||
<section>
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Single Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Single Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
|
|
@ -72,11 +60,7 @@
|
|||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Dense - Single Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
|
|
@ -133,14 +117,10 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-md-theme="'indigo'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Double Line</h2>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Double Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-double-line">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
|
@ -186,11 +166,7 @@
|
|||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Dense - Double Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-double-line md-dense">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
|
@ -235,14 +211,10 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section v-md-theme="'orange'">
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Normal - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Triple Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
|
|
@ -318,11 +290,7 @@
|
|||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="cell-phone scrollable">
|
||||
<md-toolbar>
|
||||
<h2 class="md-title">Dense - Triple Line</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line md-dense">
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
|
|
@ -397,10 +365,10 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</section>
|
||||
</demo-example>
|
||||
|
||||
<section>
|
||||
<div class="cell-phone complete-example">
|
||||
<demo-example label="Complete Example">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="3">
|
||||
<md-toolbar class="md-extended" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
|
|
@ -542,8 +510,8 @@
|
|||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-sidenav v-md-theme="'blue'" class="md-left" ref="sidebar">
|
||||
<md-toolbar class="md-account-header">
|
||||
<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">
|
||||
|
|
@ -574,7 +542,7 @@
|
|||
</md-list>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list>
|
||||
<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>
|
||||
|
|
@ -597,20 +565,31 @@
|
|||
</md-list>
|
||||
</md-sidenav>
|
||||
</div>
|
||||
</section>
|
||||
</demo-example>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.cell-phone {
|
||||
.phone-viewport {
|
||||
width: 360px;
|
||||
max-height: 540px;
|
||||
min-height: 540px;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid #ccc;
|
||||
height: 540px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(#000, .12);
|
||||
}
|
||||
|
||||
.custom-list {
|
||||
|
|
@ -628,7 +607,7 @@
|
|||
}
|
||||
|
||||
.complete-example {
|
||||
height: auto;
|
||||
height: 480px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
|
|
@ -669,8 +648,14 @@
|
|||
color: rgba(#fff, .54);
|
||||
}
|
||||
|
||||
.md-account-header .md-list-item:hover .md-button:hover {
|
||||
background-color: inherit;
|
||||
.md-account-header {
|
||||
.md-list-item:hover .md-button:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.md-avatar-list .md-list-item-container:hover {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,99 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
<md-radio v-model="radio1" id="my-test1" name="my-test-group1" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test2" name="my-test-group1" md-value="2">Another radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test3" name="my-test-group1" md-value="3">Another another radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio2" id="my-test4" name="my-test-group2" md-value="1" class="md-primary">Primary radio</md-radio>
|
||||
<md-radio v-model="radio2" id="my-test5" name="my-test-group2" md-value="2" class="md-primary">Another primary radio</md-radio>
|
||||
<md-radio v-model="radio2" id="my-test6" name="my-test-group2" md-value="3" class="md-primary">Another another primary radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio3" id="my-test7" name="my-test-group3" md-value="1" class="md-warn">Warn radio</md-radio>
|
||||
<md-radio v-model="radio3" id="my-test8" name="my-test-group3" md-value="2" class="md-warn">Another warn radio</md-radio>
|
||||
<md-radio v-model="radio3" id="my-test9" name="my-test-group3" md-value="3" class="md-warn">Another another warn radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio4" id="my-test10" name="my-test-group3" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio4" id="my-test11" name="my-test-group3" md-value="2" disabled>Disabled</md-radio>
|
||||
<md-radio v-model="radio4" id="my-test12" name="my-test-group3" md-value="3">Another radio</md-radio>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-radio v-model="radio5" id="my-test13" name="my-test-group4" md-value="1" class="md-primary">Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test14" name="my-test-group4" md-value="2" class="md-primary">Another Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test15" name="my-test-group4" md-value="3" class="md-primary">Another another Orange radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-radio v-model="radio6" id="my-test16" name="my-test-group4" md-value="1" class="md-primary">Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test17" name="my-test-group4" md-value="2" class="md-primary">Another Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test18" name="my-test-group4" md-value="3" class="md-primary">Another another Brown radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-radio v-model="radio7" id="my-test19" name="my-test-group6" md-value="1" class="md-primary">Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test20" name="my-test-group6" md-value="2" class="md-primary">Another Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test21" name="my-test-group6" md-value="3" class="md-primary">Another another Green radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-radio v-model="radio8" id="my-test22" name="my-test-group3" md-value="1" class="md-primary">Teal radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test23" name="my-test-group3" md-value="2" class="md-primary" disabled>Teal disabled radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test24" name="my-test-group3" md-value="3" class="md-primary">Another another Teal radio</md-radio>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.themed {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: 2,
|
||||
radio2: 1,
|
||||
radio3: 1,
|
||||
radio4: 1,
|
||||
radio5: 2,
|
||||
radio6: 3,
|
||||
radio7: 1,
|
||||
radio8: 2
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Radio';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <template>
|
||||
<section>
|
||||
<h2 class="title">Radio</h2>
|
||||
|
||||
|
|
@ -34,25 +129,4 @@
|
|||
<md-radio v-model="radio6" id="my-test14" name="my-test-group6" md-value="3">Another another radio</md-radio>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
padding: 0 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: 2,
|
||||
radio2: 1,
|
||||
radio3: 1,
|
||||
radio4: 1,
|
||||
radio5: 2,
|
||||
radio6: 3
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
</template> -->
|
||||
|
|
|
|||
|
|
@ -1,21 +1,57 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="title">Ripple</h2>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<div class="has-ripple" v-md-ink-ripple>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<div>
|
||||
<md-avatar v-md-ink-ripple>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar v-md-ink-ripple class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #4CAF50;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Ripple';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,89 @@
|
|||
<template>
|
||||
<section>
|
||||
<h2 class="title">Select</h2>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="movie">Movie</label>
|
||||
<md-select name="movie" id="movie" v-model="movie">
|
||||
<md-option value="Fight Club">Fight Club</md-option>
|
||||
<md-option value="Godfather II">Godfather II</md-option>
|
||||
<md-option value="Godfather III">Godfather III</md-option>
|
||||
<md-option value="Godfather">Godfather</md-option>
|
||||
<md-option value="Godfellas">Godfellas</md-option>
|
||||
<md-option value="Pulp Fiction">Pulp Fiction</md-option>
|
||||
<md-option value="Scarface">Scarface</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="movie">Movie</label>
|
||||
<md-select name="movie" id="movie" v-model="movie">
|
||||
<md-option value="Fight Club">Fight Club</md-option>
|
||||
<md-option value="Godfather II">Godfather II</md-option>
|
||||
<md-option value="Godfather III">Godfather III</md-option>
|
||||
<md-option value="Godfather">Godfather</md-option>
|
||||
<md-option value="Godfellas">Godfellas</md-option>
|
||||
<md-option value="Pulp Fiction">Pulp Fiction</md-option>
|
||||
<md-option value="Scarface">Scarface</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label for="country">Country</label>
|
||||
<md-select name="country" id="country" v-model="country">
|
||||
<md-option value="Australia">Australia</md-option>
|
||||
<md-option value="Brazil">Brazil</md-option>
|
||||
<md-option value="Japan">Japan</md-option>
|
||||
<md-option value="United States">United States</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="country">Country</label>
|
||||
<md-select name="country" id="country" v-model="country">
|
||||
<md-option value="Australia">Australia</md-option>
|
||||
<md-option value="Brazil">Brazil</md-option>
|
||||
<md-option value="Japan">Japan</md-option>
|
||||
<md-option value="United States">United States</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<md-input-container>
|
||||
<label for="font">Font</label>
|
||||
<md-select name="font" id="font" v-model="font">
|
||||
<md-option value="Arial">Arial</md-option>
|
||||
<md-option value="Calibri">Calibri</md-option>
|
||||
<md-option value="Cambria">Cambria</md-option>
|
||||
<md-option value="Comic Sans">Comic Sans</md-option>
|
||||
<md-option value="Consolas">Consolas</md-option>
|
||||
<md-option value="Courier">Courier</md-option>
|
||||
<md-option value="Droid Sans">Droid Sans</md-option>
|
||||
<md-option value="Georgia">Georgia</md-option>
|
||||
<md-option value="Helvetica">Helvetica</md-option>
|
||||
<md-option value="Impact">Impact</md-option>
|
||||
<md-option value="Roboto">Roboto</md-option>
|
||||
<md-option value="Segoe UI">Segoe UI</md-option>
|
||||
<md-option value="Times New Roman">Times New Roman</md-option>
|
||||
<md-option value="Ubuntu">Ubuntu</md-option>
|
||||
<md-option value="Verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<md-input-container>
|
||||
<label for="font">Font</label>
|
||||
<md-select name="font" id="font" v-model="font">
|
||||
<md-option value="Arial">Arial</md-option>
|
||||
<md-option value="Calibri">Calibri</md-option>
|
||||
<md-option value="Cambria">Cambria</md-option>
|
||||
<md-option value="Comic Sans">Comic Sans</md-option>
|
||||
<md-option value="Consolas">Consolas</md-option>
|
||||
<md-option value="Courier">Courier</md-option>
|
||||
<md-option value="Droid Sans">Droid Sans</md-option>
|
||||
<md-option value="Georgia">Georgia</md-option>
|
||||
<md-option value="Helvetica">Helvetica</md-option>
|
||||
<md-option value="Impact">Impact</md-option>
|
||||
<md-option value="Roboto">Roboto</md-option>
|
||||
<md-option value="Segoe UI">Segoe UI</md-option>
|
||||
<md-option value="Times New Roman">Times New Roman</md-option>
|
||||
<md-option value="Ubuntu">Ubuntu</md-option>
|
||||
<md-option value="Verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<demo-example label="Groups">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="Apples">Apples</md-option>
|
||||
<md-option value="Bananas">Bananas</md-option>
|
||||
<md-option value="Peaches">Peaches</md-option>
|
||||
<md-option value="Oranges">Oranges</md-option>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="Apples">Apples</md-option>
|
||||
<md-option value="Bananas">Bananas</md-option>
|
||||
<md-option value="Peaches">Peaches</md-option>
|
||||
<md-option value="Oranges">Oranges</md-option>
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="Carrots">Carrots</md-option>
|
||||
<md-option value="Cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="Carrots">Carrots</md-option>
|
||||
<md-option value="Cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="Apple Pie">Apple Pie</md-option>
|
||||
<md-option value="Chocolate Cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="Apple Pie">Apple Pie</md-option>
|
||||
<md-option value="Chocolate Cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -92,6 +102,9 @@
|
|||
font: '',
|
||||
food: ''
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$root.pageTitle = 'Select';
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<demo-page>
|
||||
<div slot="examples">
|
||||
<div slot="examples" class="examples">
|
||||
<demo-example label="Default - Grey Theme" size="3" body-theme="grey">
|
||||
<md-tabs>
|
||||
<md-tab id="movies" md-label="Movies">
|
||||
|
|
@ -162,28 +162,17 @@
|
|||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.page-tabs {
|
||||
.cell-phone {
|
||||
width: 100%;
|
||||
max-width: 412px;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
max-height: none;
|
||||
margin-right: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.md-subheader {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
.md-subheader {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.examples .demo-example .demo-example-body {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
@ -192,8 +181,8 @@
|
|||
return {
|
||||
playground: {
|
||||
color: '3',
|
||||
fixed: false,
|
||||
centered: true,
|
||||
fixed: true,
|
||||
centered: false,
|
||||
shadow: 0,
|
||||
tabs: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import BottomBar from './pages/BottomBar';
|
|||
import Buttons from './pages/Buttons';
|
||||
import ButtonToggle from './pages/ButtonToggle';
|
||||
import Checkbox from './pages/Checkbox';
|
||||
import Divider from './pages/Divider';
|
||||
import Icon from './pages/Icon';
|
||||
import Input from './pages/Input';
|
||||
import List from './pages/List';
|
||||
|
|
@ -52,11 +51,6 @@ const routes = [
|
|||
name: 'checkbox',
|
||||
component: Checkbox
|
||||
},
|
||||
{
|
||||
path: '/divider',
|
||||
name: 'divider',
|
||||
component: Divider
|
||||
},
|
||||
{
|
||||
path: '/icon',
|
||||
name: 'icon',
|
||||
|
|
|
|||
Loading…
Reference in a new issue