mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-05 14:04:44 +00:00
Create optgroups
This commit is contained in:
Marcos Moura
parent
6ee230d324
commit
5cac33b2c3
6 changed files with 131 additions and 42 deletions
|
|
@ -1,10 +1,12 @@
|
|||
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));
|
||||
|
||||
window.VueMaterial.styles.push(mdSelectTheme);
|
||||
}
|
||||
|
|
|
|||
18
src/components/mdSelect/mdOptgroup.vue
Normal file
18
src/components/mdSelect/mdOptgroup.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="md-option-group">
|
||||
<span class="md-option-group-label">{{ label }}</span>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: {
|
||||
type: [String],
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<li class="md-option" @click="selectOption" v-md-ink-ripple>
|
||||
<slot></slot>
|
||||
</li>
|
||||
<div class="md-option" @click="selectOption" v-md-ink-ripple>
|
||||
<span>
|
||||
<slot></slot>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -12,13 +14,26 @@
|
|||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
parent: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selectOption() {
|
||||
this.$parent.selectOption(this.value);
|
||||
if (this.$parent.$el.classList.contains('md-select')) {
|
||||
this.$parent.selectOption(this.value);
|
||||
} else {
|
||||
this.$parent.$parent.selectOption(this.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
if (!this.$parent.$el.classList.contains('md-select')) {
|
||||
let parentClasses = this.$parent.$el.classList;
|
||||
|
||||
this.parent = this.$parent;
|
||||
|
||||
if (!parentClasses.contains('md-select') && !parentClasses.contains('md-option-group')) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-option in a md-select');
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
min-width: 128px;
|
||||
height: 32px;
|
||||
position: relative;
|
||||
color: rgba(#212121, .87);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
|
|
@ -105,7 +106,7 @@
|
|||
.md-option {
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
padding: 0 4px 0 16px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
|
|
@ -121,4 +122,23 @@
|
|||
&:hover {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
|
||||
span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.md-option-group:first-child {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.md-option-group-label {
|
||||
padding: 16px;
|
||||
display: block;
|
||||
color: rgba(#757575, .87);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
<span class="md-select-value" @click="showMenu">{{ model }}</span>
|
||||
|
||||
<div class="md-select-menu" tabindex="-1">
|
||||
<ul class="md-select-menu-container">
|
||||
<div class="md-select-menu-container">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<select v-model="model" :name="name" :id="id" :required="required" tabindex="-1">
|
||||
|
|
|
|||
|
|
@ -2,36 +2,73 @@
|
|||
<section>
|
||||
<h2 class="title">Select</h2>
|
||||
|
||||
<validator name="validation">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="movie">Movie</label>
|
||||
<md-select :model.sync="movie" :name="movie" id="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 :model.sync="movie" :name="movie" id="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 :model.sync="country" name="country" id="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>
|
||||
<label for="country">Country</label>
|
||||
<md-select :model.sync="country" name="country" id="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>
|
||||
|
||||
<span class="md-error">Validation message</span>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</form>
|
||||
</validator>
|
||||
<md-input-container>
|
||||
<label for="font">Font</label>
|
||||
<md-select :model.sync="font" name="font" id="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>
|
||||
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select :model.sync="food" name="food" id="food">
|
||||
<md-optgroup label="Fruits">
|
||||
<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-optgroup>
|
||||
|
||||
<md-optgroup label="Vegetables">
|
||||
<md-option value="Carrots">Carrots</md-option>
|
||||
<md-option value="Cucumbers">Cucumbers</md-option>
|
||||
</md-optgroup>
|
||||
|
||||
<md-optgroup label="Baked Goods">
|
||||
<md-option value="Apple Pie">Apple Pie</md-option>
|
||||
<md-option value="Chocolate Cake">Chocolate Cake</md-option>
|
||||
</md-optgroup>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -54,13 +91,10 @@
|
|||
data() {
|
||||
return {
|
||||
movie: 'Godfather',
|
||||
country: ''
|
||||
country: '',
|
||||
font: '',
|
||||
food: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log('Submit');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue