+
+
+
+
+ people
+
+
+ Managers
+ Jim Halpert
+ Dwight Schrute
+ Michael Scott
+
+ Employees
+ Pam Beesly
+ Angela Martin
+ Kelly Kapoor
+ Ryan Howard
+ Kevin Malone
+ Creed Bratton
+ Oscar Nunez
+ Toby Flenderson
+ Stanley Hudson
+ Meredith Palmer
+ Phyllis Lapin-Vance
+
+
+
+
Selected users: {{ usersIcon }}
+
+
+
+
+ <md-select name="users" id="users" multiple v-model="users">
+ <md-button class="md-icon-button" md-menu-trigger slot="icon">
+ <md-icon>people</md-icon>
+ </md-button>
+
+ <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>
+
+ <div>Selected users: {{ users }}</div>
+
+
+
+ export default {
+ data: () => ({
+ food: '',
+ users: [
+ 'jim_halpert',
+ 'michael_scott'
+ ]
+ })
+ };
+
+
+
@@ -426,7 +500,11 @@
}
.multiple {
- height: 300px;
+ height: 150px;
+ }
+
+ .select-icon {
+ margin-bottom: 20px;
}
@@ -445,7 +523,11 @@
{ id: 4, name: 'd' },
{ id: 5, name: 'e' }
],
- items: []
+ items: [],
+ usersIcon: [],
+ iconMenuOptions: {
+ mdAlignTrigger: true
+ }
}),
methods: {
setPulpFiction() {
diff --git a/src/components/mdSelect/mdSelect.scss b/src/components/mdSelect/mdSelect.scss
index 70803ca..307c002 100644
--- a/src/components/mdSelect/mdSelect.scss
+++ b/src/components/mdSelect/mdSelect.scss
@@ -12,7 +12,7 @@ $select-height: 32px;
outline: none;
}
- &:after {
+ &:not(.md-select-icon):after {
margin-top: 2px;
position: absolute;
top: 50%;
diff --git a/src/components/mdSelect/mdSelect.vue b/src/components/mdSelect/mdSelect.vue
index c5ce819..a8d798b 100644
--- a/src/components/mdSelect/mdSelect.vue
+++ b/src/components/mdSelect/mdSelect.vue
@@ -1,7 +1,8 @@
-
- {{ selectedText || placeholder }}
+
+
+ {{ selectedText || placeholder }}
@@ -31,7 +32,8 @@
value: [String, Number, Array],
disabled: Boolean,
placeholder: String,
- mdMenuClass: String
+ mdMenuClass: String,
+ mdMenuOptions: Object
},
mixins: [theme],
data() {
@@ -46,7 +48,8 @@
computed: {
classes() {
return {
- 'md-disabled': this.disabled
+ 'md-disabled': this.disabled,
+ 'md-select-icon': this.hasIcon
};
},
contentClasses() {
@@ -55,6 +58,14 @@
}
return this.mdMenuClass;
+ },
+ hasIcon() {
+ return this.$slots['icon'];
+ },
+ valueStyle() {
+ return this.hasIcon ? {
+ display: 'none'
+ } : {};
}
},
watch: {