Skip to content

Commit b8cc4ac

Browse files
author
Pablo Henrique
authored
Merge pull request vuematerial#746 from pml984/select-icon
Add ability to use icon for select component.
2 parents 96142cd + 75b0079 commit b8cc4ac

File tree

3 files changed

+100
-7
lines changed

3 files changed

+100
-7
lines changed

‎docs/src/pages/components/Select.vue

Lines changed: 84 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -407,6 +407,80 @@
407407
</code-block>
408408
</div>
409409
</example-box>
410+
411+
<example-box card-title="Icon">
412+
<div slot="demo">
413+
<div class="field-group select-icon">
414+
<md-select name="users" id="usersIcon" multiple v-model="usersIcon" md-align-trigger :md-menu-options="iconMenuOptions">
415+
<md-button class="md-icon-button" md-menu-trigger slot="icon">
416+
<md-icon>people</md-icon>
417+
</md-button>
418+
419+
<md-subheader>Managers</md-subheader>
420+
<md-option value="jim_halpert">Jim Halpert</md-option>
421+
<md-option value="dwight_schrute">Dwight Schrute</md-option>
422+
<md-option value="michael_scott">Michael Scott</md-option>
423+
424+
<md-subheader>Employees</md-subheader>
425+
<md-option value="pam_beesly">Pam Beesly</md-option>
426+
<md-option value="angela_martin">Angela Martin</md-option>
427+
<md-option value="kelly_kapoor">Kelly Kapoor</md-option>
428+
<md-option value="ryan_howard">Ryan Howard</md-option>
429+
<md-option value="kevin_malone">Kevin Malone</md-option>
430+
<md-option value="creed_bratton">Creed Bratton</md-option>
431+
<md-option value="oscar_nunez">Oscar Nunez</md-option>
432+
<md-option value="toby_flenderson">Toby Flenderson</md-option>
433+
<md-option value="stanley_hudson">Stanley Hudson</md-option>
434+
<md-option value="meredith_palmer">Meredith Palmer</md-option>
435+
<md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option>
436+
</md-select>
437+
</div>
438+
439+
<div>Selected users: {{ usersIcon }}</div>
440+
</div>
441+
442+
<div slot="code">
443+
<code-block lang="xml">
444+
&lt;md-select name=&quot;users&quot; id=&quot;users&quot; multiple v-model=&quot;users&quot;&gt;
445+
&lt;md-button class=&quot;md-icon-button&quot; md-menu-trigger slot=&quot;icon&quot;&gt;
446+
&lt;md-icon&gt;people&lt;/md-icon&gt;
447+
&lt;/md-button&gt;
448+
449+
&lt;md-subheader&gt;Managers&lt;/md-subheader&gt;
450+
&lt;md-option value=&quot;jim_halpert&quot;&gt;Jim Halpert&lt;/md-option&gt;
451+
&lt;md-option value=&quot;dwight_schrute&quot;&gt;Dwight Schrute&lt;/md-option&gt;
452+
&lt;md-option value=&quot;michael_scott&quot;&gt;Michael Scott&lt;/md-option&gt;
453+
454+
&lt;md-subheader&gt;Employees&lt;/md-subheader&gt;
455+
&lt;md-option value=&quot;pam_beesly&quot;&gt;Pam Beesly&lt;/md-option&gt;
456+
&lt;md-option value=&quot;angela_martin&quot;&gt;Angela Martin&lt;/md-option&gt;
457+
&lt;md-option value=&quot;kelly_kapoor&quot;&gt;Kelly Kapoor&lt;/md-option&gt;
458+
&lt;md-option value=&quot;ryan_howard&quot;&gt;Ryan Howard&lt;/md-option&gt;
459+
&lt;md-option value=&quot;kevin_malone&quot;&gt;Kevin Malone&lt;/md-option&gt;
460+
&lt;md-option value=&quot;creed_bratton&quot;&gt;Creed Bratton&lt;/md-option&gt;
461+
&lt;md-option value=&quot;oscar_nunez&quot;&gt;Oscar Nunez&lt;/md-option&gt;
462+
&lt;md-option value=&quot;toby_flenderson&quot;&gt;Toby Flenderson&lt;/md-option&gt;
463+
&lt;md-option value=&quot;stanley_hudson&quot;&gt;Stanley Hudson&lt;/md-option&gt;
464+
&lt;md-option value=&quot;meredith_palmer&quot;&gt;Meredith Palmer&lt;/md-option&gt;
465+
&lt;md-option value=&quot;phyllis_lapin_vance&quot;&gt;Phyllis Lapin-Vance&lt;/md-option&gt;
466+
&lt;/md-select&gt;
467+
468+
&lt;div&gt;Selected users: {{ users }}&lt;/div&gt;
469+
</code-block>
470+
471+
<code-block lang="javascript">
472+
export default {
473+
data: () => ({
474+
food: '',
475+
users: [
476+
'jim_halpert',
477+
'michael_scott'
478+
]
479+
})
480+
};
481+
</code-block>
482+
</div>
483+
</example-box>
410484
</div>
411485
</docs-component>
412486
</page-content>
@@ -426,7 +500,11 @@
426500
}
427501
428502
.multiple {
429-
height: 300px;
503+
height: 150px;
504+
}
505+
506+
.select-icon {
507+
margin-bottom: 20px;
430508
}
431509
</style>
432510

@@ -445,7 +523,11 @@
445523
{ id: 4, name: 'd' },
446524
{ id: 5, name: 'e' }
447525
],
448-
items: []
526+
items: [],
527+
usersIcon: [],
528+
iconMenuOptions: {
529+
mdAlignTrigger: true
530+
}
449531
}),
450532
methods: {
451533
setPulpFiction() {

‎src/components/mdSelect/mdSelect.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $select-height: 32px;
1212
outline: none;
1313
}
1414

15-
&:after {
15+
&:not(.md-select-icon):after {
1616
margin-top: 2px;
1717
position: absolute;
1818
top: 50%;

‎src/components/mdSelect/mdSelect.vue

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
<template>
22
<div class="md-select" :class="[themeClass, classes]">
3-
<md-menu :md-close-on-select="!multiple" @opened="$emit('open')" @closed="$emit('close')">
4-
<span class="md-select-value" md-menu-trigger ref="value">{{ selectedText || placeholder }}</span>
3+
<md-menu :md-close-on-select="!multiple" @opened="$emit('open')" @closed="$emit('close')" v-bind="mdMenuOptions">
4+
<slot name="icon"></slot>
5+
<span class="md-select-value" md-menu-trigger ref="value" :style="valueStyle">{{ selectedText || placeholder }}</span>
56

67
<md-menu-content class="md-select-content" :class="[themeClass, contentClasses]">
78
<slot></slot>
@@ -31,7 +32,8 @@
3132
value: [String, Number, Array],
3233
disabled: Boolean,
3334
placeholder: String,
34-
mdMenuClass: String
35+
mdMenuClass: String,
36+
mdMenuOptions: Object
3537
},
3638
mixins: [theme],
3739
data() {
@@ -46,7 +48,8 @@
4648
computed: {
4749
classes() {
4850
return {
49-
'md-disabled': this.disabled
51+
'md-disabled': this.disabled,
52+
'md-select-icon': this.hasIcon
5053
};
5154
},
5255
contentClasses() {
@@ -55,6 +58,14 @@
5558
}
5659
5760
return this.mdMenuClass;
61+
},
62+
hasIcon() {
63+
return this.$slots['icon'];
64+
},
65+
valueStyle() {
66+
return this.hasIcon ? {
67+
display: 'none'
68+
} : {};
5869
}
5970
},
6071
watch: {

0 commit comments

Comments
 (0)