mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-04-24 16:44:51 +00:00
Merge remote-tracking branch 'origin/develop' into components/mdTable
* origin/develop: Remove users array Add highlight color and add code example
This commit is contained in:
Marcos Moura
commit
c47e4cd12c
5 changed files with 80 additions and 59 deletions
|
|
@ -51,7 +51,7 @@
|
|||
<md-button class="md-raised md-primary" @click="setPulpFiction">Set Pulp Fiction</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Groups" height="350">
|
||||
<demo-example label="Groups & Multiple" height="350">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
|
|
@ -71,11 +71,7 @@
|
|||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Multiple" height="350">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
|
|
@ -111,44 +107,44 @@
|
|||
<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-option value="fight_club">Fight Club</md-option>
|
||||
<md-option value="godfather">Godfather</md-option>
|
||||
<md-option value="godfather_ii">Godfather II</md-option>
|
||||
<md-option value="godfather_iii">Godfather III</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-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-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>
|
||||
|
|
@ -162,18 +158,41 @@
|
|||
<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-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-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-option value="apple_pie">Apple Pie</md-option>
|
||||
<md-option value="chocolate_cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="users">Users</label>
|
||||
<md-select name="users" id="users" multiple v-model="users">
|
||||
<md-subheader>Managers</md-subheader>
|
||||
<md-option value="jim_halpert">Jim Halpert</md-option>
|
||||
<md-option value="dwight_schrute">Dwight Schrute</md-option>
|
||||
<md-option value="michael_scott">Michael Scott</md-option>
|
||||
|
||||
<md-subheader>Employees</md-subheader>
|
||||
<md-option value="pam_beesly">Pam Beesly</md-option>
|
||||
<md-option value="angela_martin">Angela Martin</md-option>
|
||||
<md-option value="kelly_kapoor">Kelly Kapoor</md-option>
|
||||
<md-option value="ryan_howard">Ryan Howard</md-option>
|
||||
<md-option value="kevin_malone">Kevin Malone</md-option>
|
||||
<md-option value="creed_bratton">Creed Bratton</md-option>
|
||||
<md-option value="oscar_nunez">Oscar Nunez</md-option>
|
||||
<md-option value="toby_flenderson">Toby Flenderson</md-option>
|
||||
<md-option value="stanley_hudson">Stanley Hudson</md-option>
|
||||
<md-option value="meredith_palmer">Meredith Palmer</md-option>
|
||||
<md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import mdSelect from './mdSelect.vue';
|
||||
import mdOption from './mdOption.vue';
|
||||
import mdOptgroup from './mdOptgroup.vue';
|
||||
import mdSelectTheme from './mdSelect.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-select', Vue.extend(mdSelect));
|
||||
Vue.component('md-option', Vue.extend(mdOption));
|
||||
Vue.component('md-optgroup', Vue.extend(mdOptgroup));
|
||||
|
||||
Vue.material.styles.push(mdSelectTheme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<div class="md-option-group">
|
||||
<span class="md-option-group-label">{{ label }}</span>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label']
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<md-menu-item
|
||||
class="md-option"
|
||||
:class="classes"
|
||||
@click="selectOption"
|
||||
tabindex="-1">
|
||||
<md-checkbox v-model="check" v-if="parentSelect.multiple">
|
||||
<md-checkbox class="md-primary" v-model="check" v-if="parentSelect.multiple">
|
||||
<span ref="item">
|
||||
<slot></slot>
|
||||
</span>
|
||||
|
|
@ -27,6 +28,17 @@
|
|||
check: false,
|
||||
index: 0
|
||||
}),
|
||||
computed: {
|
||||
isSelected() {
|
||||
return this.value === this.parentSelect.value;
|
||||
},
|
||||
classes() {
|
||||
return {
|
||||
'md-selected': this.isSelected,
|
||||
'md-checked': this.check
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectOption() {
|
||||
if (!this.parentSelect.multiple) {
|
||||
|
|
@ -36,7 +48,7 @@
|
|||
}
|
||||
},
|
||||
selectIfValueMatches() {
|
||||
if (this.value === this.parentSelect.value) {
|
||||
if (this.isSelected) {
|
||||
this.selectOption();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
.THEME_NAME {
|
||||
.md-select,
|
||||
&.md-select {
|
||||
|
||||
.md-select-content,
|
||||
&.md-select-content {
|
||||
.md-menu-item {
|
||||
&.md-selected,
|
||||
&.md-checked {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue