Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-03-16 22:10:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ability to use icon for select. Also provide a new md-menu-options prop to pass options to menu within select.

Browse source
This commit is contained in:
Patrick 2017-05-14 04:09:50 +00:00
parent c36b1834b2
commit 75b0079fd5
3 changed files with 100 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
docs/src/pages/components/Select.vue
View file

@ -407,6 +407,80 @@
</code-block>
</div>
</example-box>
<example-box card-title="Icon">
<div slot="demo">
<div class="field-group select-icon">
<md-select name="users" id="usersIcon" multiple v-model="usersIcon" md-align-trigger :md-menu-options="iconMenuOptions">
<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>
<div>Selected users: {{ usersIcon }}</div>
</div>
<div slot="code">
<code-block lang="xml">
&lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger slot=&quot;icon&quot;&gt;
&lt;md-icon&gt;people&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-subheader&gt;Managers&lt;/md-subheader&gt;
&lt;md-option value=&quot;jim_halpert&quot;&gt;Jim Halpert&lt;/md-option&gt;
&lt;md-option value=&quot;dwight_schrute&quot;&gt;Dwight Schrute&lt;/md-option&gt;
&lt;md-option value=&quot;michael_scott&quot;&gt;Michael Scott&lt;/md-option&gt;
&lt;md-subheader&gt;Employees&lt;/md-subheader&gt;
&lt;md-option value=&quot;pam_beesly&quot;&gt;Pam Beesly&lt;/md-option&gt;
&lt;md-option value=&quot;angela_martin&quot;&gt;Angela Martin&lt;/md-option&gt;
&lt;md-option value=&quot;kelly_kapoor&quot;&gt;Kelly Kapoor&lt;/md-option&gt;
&lt;md-option value=&quot;ryan_howard&quot;&gt;Ryan Howard&lt;/md-option&gt;
&lt;md-option value=&quot;kevin_malone&quot;&gt;Kevin Malone&lt;/md-option&gt;
&lt;md-option value=&quot;creed_bratton&quot;&gt;Creed Bratton&lt;/md-option&gt;
&lt;md-option value=&quot;oscar_nunez&quot;&gt;Oscar Nunez&lt;/md-option&gt;
&lt;md-option value=&quot;toby_flenderson&quot;&gt;Toby Flenderson&lt;/md-option&gt;
&lt;md-option value=&quot;stanley_hudson&quot;&gt;Stanley Hudson&lt;/md-option&gt;
&lt;md-option value=&quot;meredith_palmer&quot;&gt;Meredith Palmer&lt;/md-option&gt;
&lt;md-option value=&quot;phyllis_lapin_vance&quot;&gt;Phyllis Lapin-Vance&lt;/md-option&gt;
&lt;/md-select&gt;
&lt;div&gt;Selected users: {{ users }}&lt;/div&gt;
</code-block>
<code-block lang="javascript">
export default {
data: () => ({
food: '',
users: [
'jim_halpert',
'michael_scott'
]
})
};
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>
@ -426,7 +500,11 @@
}
.multiple {
height: 300px;
height: 150px;
}
.select-icon {
margin-bottom: 20px;
}
</style>
@ -445,7 +523,11 @@
{ id: 4, name: 'd' },
{ id: 5, name: 'e' }
],
items: []
items: [],
usersIcon: [],
iconMenuOptions: {
mdAlignTrigger: true
}
}),
methods: {
setPulpFiction() {

2
src/components/mdSelect/mdSelect.scss
View file

@ -12,7 +12,7 @@ $select-height: 32px;
outline: none;
}
&:after {
&:not(.md-select-icon):after {
margin-top: 2px;
position: absolute;
top: 50%;

19
src/components/mdSelect/mdSelect.vue
View file

@ -1,7 +1,8 @@
<template>
<div class="md-select" :class="[themeClass, classes]">
<md-menu :md-close-on-select="!multiple" @opened="$emit('open')" @closed="$emit('close')">
<span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || placeholder }}</span>
<md-menu :md-close-on-select="!multiple" @opened="$emit('open')" @closed="$emit('close')" v-bind="mdMenuOptions">
<slot name="icon"></slot>
<span class="md-select-value" md-menu-trigger ref="value" :style="valueStyle">{{ selectedText || placeholder }}</span>
<md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
<slot></slot>
@ -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: {