select.a1466fb5.js

webpackJsonp([7,34],{480:function(e,t,o){o(593);var a=o(0)(o(508),o(557),"data-v-380ff36e",null);e.exports=a.exports},508:function(e,t,o){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{movie:"godfather",country:"",font:"",food:"",users:["jim_halpert","michael_scott"]}},methods:{setPulpFiction:function(){this.movie="pulp_fiction"}}},e.exports=t.default},525:function(e,t,o){t=e.exports=o(4)(),t.push([e.i,".field-group[data-v-380ff36e]{display:-ms-flexbox;display:flex}.md-input-container[data-v-380ff36e]{max-width:300px}.md-input-container+.md-input-container[data-v-380ff36e]{margin-left:4px}.multiple[data-v-380ff36e]{height:300px}",""])},557:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("page-content",{attrs:{"page-title":"Components - Select"}},[o("docs-component",[o("div",{slot:"description"},[o("p",[e._v("A dropdown button selects between multiple selections. The select displays the current state and a down arrow.")])]),e._v(" "),o("div",{slot:"api"},[o("api-table",{attrs:{name:"md-select"}},[o("md-table",{slot:"properties"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[e._v("Name")]),e._v(" "),o("md-table-head",[e._v("Type")]),e._v(" "),o("md-table-head",[e._v("Description")])],1)],1),e._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[e._v("v-model")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("name")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("The name of the select")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("id")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("The id of the select")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("disabled")]),e._v(" "),o("md-table-cell",[o("code",[e._v("Boolean")])]),e._v(" "),o("md-table-cell",[e._v("Disable the input and prevent his actions. Default "),o("code",[e._v("false")])])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("required")]),e._v(" "),o("md-table-cell",[o("code",[e._v("Boolean")])]),e._v(" "),o("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),o("code",[e._v("false")])])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("placeholder")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("md-menu-class")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("The css class to be applied on the opened select holder")])],1)],1)],1),e._v(" "),o("md-table",{slot:"events"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[e._v("Name")]),e._v(" "),o("md-table-head",[e._v("Value")]),e._v(" "),o("md-table-head",[e._v("Description")])],1)],1),e._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[e._v("selected|change")]),e._v(" "),o("md-table-cell",[e._v("Receives the value of the model")]),e._v(" "),o("md-table-cell",[e._v("Triggered when the model changes.")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("opened")]),e._v(" "),o("md-table-cell",[e._v("none")]),e._v(" "),o("md-table-cell",[e._v("Triggered the select is opened.")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("closed")]),e._v(" "),o("md-table-cell",[e._v("none")]),e._v(" "),o("md-table-cell",[e._v("Triggered the select is closed.")])],1)],1)],1)],1),e._v(" "),o("api-table",{attrs:{name:"md-option"}},[o("p",[e._v("Displays a single item inside the select.")]),e._v(" "),o("div",{slot:"properties"},[o("md-table",[o("md-table-header",[o("md-table-row",[o("md-table-head",[e._v("Name")]),e._v(" "),o("md-table-head",[e._v("Type")]),e._v(" "),o("md-table-head",[e._v("Description")])],1)],1),e._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[e._v("value")]),e._v(" "),o("md-table-cell",[o("code",[e._v("String")])]),e._v(" "),o("md-table-cell",[e._v("The value of the option to be binded on the v-model")])],1),e._v(" "),o("md-table-row",[o("md-table-cell",[e._v("disabled")]),e._v(" "),o("md-table-cell",[o("code",[e._v("Boolean")])]),e._v(" "),o("md-table-cell",[e._v("Disable the button and prevent his actions. Default "),o("code",[e._v("false")])])],1)],1)],1)],1),e._v(" "),o("md-table",{slot:"events"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[e._v("Name")]),e._v(" "),o("md-table-head",[e._v("Value")]),e._v(" "),o("md-table-head",[e._v("Description")])],1)],1),e._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[e._v("selected")]),e._v(" "),o("md-table-cell",[e._v("Receives the "),o("code",[e._v("$event")])]),e._v(" "),o("md-table-cell",[e._v("Triggered when the item receives a click.")])],1)],1)],1)],1)],1),e._v(" "),o("div",{slot:"example"},[o("example-box",{attrs:{"card-title":"Default"}},[o("div",{slot:"demo"},[o("div",{staticClass:"field-group"},[o("md-input-container",[o("label",{attrs:{for:"movie"}},[e._v("Movie")]),e._v(" "),o("md-select",{directives:[{name:"model",rawName:"v-model",value:e.movie,expression:"movie"}],attrs:{name:"movie",id:"movie"},domProps:{value:e.movie},on:{input:function(t){e.movie=t}}},[o("md-option",{attrs:{value:"fight_club"}},[e._v("Fight Club")]),e._v(" "),o("md-option",{attrs:{value:"godfather"}},[e._v("Godfather")]),e._v(" "),o("md-option",{attrs:{value:"godfather_ii"}},[e._v("Godfather II")]),e._v(" "),o("md-option",{attrs:{value:"godfather_iii"}},[e._v("Godfather III")]),e._v(" "),o("md-option",{attrs:{value:"godfellas"}},[e._v("Godfellas")]),e._v(" "),o("md-option",{attrs:{value:"pulp_fiction"}},[e._v("Pulp Fiction")]),e._v(" "),o("md-option",{attrs:{value:"scarface"}},[e._v("Scarface")])],1)],1),e._v(" "),o("md-input-container",[o("label",{attrs:{for:"country"}},[e._v("Country")]),e._v(" "),o("md-select",{directives:[{name:"model",rawName:"v-model",value:e.country,expression:"country"}],attrs:{name:"country",id:"country"},domProps:{value:e.country},on:{input:function(t){e.country=t}}},[o("md-option",{attrs:{value:"australia"}},[e._v("Australia")]),e._v(" "),o("md-option",{attrs:{value:"brazil"}},[e._v("Brazil")]),e._v(" "),o("md-option",{attrs:{value:"japan"}},[e._v("Japan")]),e._v(" "),o("md-option",{attrs:{value:"united_states"}},[e._v("United States")])],1)],1),e._v(" "),o("md-input-container",[o("label",{attrs:{for:"font"}},[e._v("Font")]),e._v(" "),o("md-select",{directives:[{name:"model",rawName:"v-model",value:e.font,expression:"font"}],attrs:{name:"font",id:"font"},domProps:{value:e.font},on:{input:function(t){e.font=t}}},[o("md-option",{attrs:{value:"arial"}},[e._v("Arial")]),e._v(" "),o("md-option",{attrs:{value:"calibri"}},[e._v("Calibri")]),e._v(" "),o("md-option",{attrs:{value:"cambria"}},[e._v("Cambria")]),e._v(" "),o("md-option",{attrs:{value:"comic_sans"}},[e._v("Comic Sans")]),e._v(" "),o("md-option",{attrs:{value:"consolas"}},[e._v("Consolas")]),e._v(" "),o("md-option",{attrs:{value:"courier"}},[e._v("Courier")]),e._v(" "),o("md-option",{attrs:{value:"droid_sans"}},[e._v("Droid Sans")]),e._v(" "),o("md-option",{attrs:{value:"georgia"}},[e._v("Georgia")]),e._v(" "),o("md-option",{attrs:{value:"helvetica"}},[e._v("Helvetica")]),e._v(" "),o("md-option",{attrs:{value:"impact"}},[e._v("Impact")]),e._v(" "),o("md-option",{attrs:{value:"roboto"}},[e._v("Roboto")]),e._v(" "),o("md-option",{attrs:{value:"segoe_ui"}},[e._v("Segoe UI")]),e._v(" "),o("md-option",{attrs:{value:"times_new_roman"}},[e._v("Times New Roman")]),e._v(" "),o("md-option",{attrs:{value:"ubuntu"}},[e._v("Ubuntu")]),e._v(" "),o("md-option",{attrs:{value:"verdana"}},[e._v("Verdana")])],1)],1),e._v(" "),o("md-input-container",[o("label",{attrs:{for:"food"}},[e._v("Food")]),e._v(" "),o("md-select",{directives:[{name:"model",rawName:"v-model",value:e.food,expression:"food"}],attrs:{name:"food",id:"food"},domProps:{value:e.food},on:{input:function(t){e.food=t}}},[o("md-subheader",[e._v("Fruits")]),e._v(" "),o("md-option",{attrs:{value:"apples"}},[e._v("Apples")]),e._v(" "),o("md-option",{attrs:{value:"bananas"}},[e._v("Bananas")]),e._v(" "),o("md-option",{attrs:{value:"peaches"}},[e._v("Peaches")]),e._v(" "),o("md-option",{attrs:{value:"oranges"}},[e._v("Oranges")]),e._v(" "),o("md-subheader",[e._v("Vegetables")]),e._v(" "),o("md-option",{attrs:{value:"carrots"}},[e._v("Carrots")]),e._v(" "),o("md-option",{attrs:{value:"cucumbers"}},[e._v("Cucumbers")]),e._v(" "),o("md-subheader",[e._v("Baked Goods")]),e._v(" "),o("md-option",{attrs:{value:"apple_pie"}},[e._v("Apple Pie")]),e._v(" "),o("md-option",{attrs:{value:"chocolate_cake"}},[e._v("Chocolate Cake")])],1)],1)],1),e._v(" "),o("md-button",{staticClass:"md-raised md-primary",nativeOn:{click:function(t){e.setPulpFiction(t)}}},[e._v("Set Pulp Fiction")])],1),e._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[e._v('\n            <div class="field-group">\n              <md-input-container>\n                <label for="movie">Movie</label>\n                <md-select name="movie" id="movie" v-model="movie">\n                  <md-option value="fight_club">Fight Club</md-option>\n                  <md-option value="godfather">Godfather</md-option>\n                  <md-option value="godfather_ii">Godfather II</md-option>\n                  <md-option value="godfather_iii">Godfather III</md-option>\n                  <md-option value="godfellas">Godfellas</md-option>\n                  <md-option value="pulp_fiction">Pulp Fiction</md-option>\n                  <md-option value="scarface">Scarface</md-option>\n                </md-select>\n              </md-input-container>\n\n              <md-input-container>\n                <label for="country">Country</label>\n                <md-select name="country" id="country" v-model="country">\n                  <md-option value="australia">Australia</md-option>\n                  <md-option value="brazil">Brazil</md-option>\n                  <md-option value="japan">Japan</md-option>\n                  <md-option value="united_states">United States</md-option>\n                </md-select>\n              </md-input-container>\n\n              <md-input-container>\n                <label for="font">Font</label>\n                <md-select name="font" id="font" v-model="font">\n                  <md-option value="arial">Arial</md-option>\n                  <md-option value="calibri">Calibri</md-option>\n                  <md-option value="cambria">Cambria</md-option>\n                  <md-option value="comic_sans">Comic Sans</md-option>\n                  <md-option value="consolas">Consolas</md-option>\n                  <md-option value="courier">Courier</md-option>\n                  <md-option value="droid_sans">Droid Sans</md-option>\n                  <md-option value="georgia">Georgia</md-option>\n                  <md-option value="helvetica">Helvetica</md-option>\n                  <md-option value="impact">Impact</md-option>\n                  <md-option value="roboto">Roboto</md-option>\n                  <md-option value="segoe_ui">Segoe UI</md-option>\n                  <md-option value="times_new_roman">Times New Roman</md-option>\n                  <md-option value="ubuntu">Ubuntu</md-option>\n                  <md-option value="verdana">Verdana</md-option>\n                </md-select>\n              </md-input-container>\n\n              <md-input-container>\n                <label for="food">Food</label>\n                <md-select name="food" id="food" v-model="food">\n                  <md-subheader>Fruits</md-subheader>\n                  <md-option value="apples">Apples</md-option>\n                  <md-option value="bananas">Bananas</md-option>\n                  <md-option value="peaches">Peaches</md-option>\n                  <md-option value="oranges">Oranges</md-option>\n\n                  <md-subheader>Vegetables</md-subheader>\n                  <md-option value="carrots">Carrots</md-option>\n                  <md-option value="cucumbers">Cucumbers</md-option>\n\n                  <md-subheader>Baked Goods</md-subheader>\n                  <md-option value="apple_pie">Apple Pie</md-option>\n                  <md-option value="chocolate_cake">Chocolate Cake</md-option>\n                </md-select>\n              </md-input-container>\n            </div>\n\n            <md-button class="md-raised md-primary" @click.native="setPulpFiction">Set Pulp Fiction</md-button>\n          ')]),e._v(" "),o("code-block",{attrs:{lang:"javascript"}},[e._v("\n            export default {\n              data: () => ({\n                movie: 'godfather',\n                country: '',\n                font: ''\n              }),\n              methods: {\n                setPulpFiction() {\n                  this.movie = 'pulp_fiction';\n                }\n              }\n            };\n          ")])],1)]),e._v(" "),o("example-box",{attrs:{"card-title":"Multiple"}},[o("div",{staticClass:"multiple",slot:"demo"},[o("div",{staticClass:"field-group"},[o("md-input-container",[o("label",{attrs:{for:"users"}},[e._v("Users")]),e._v(" "),o("md-select",{directives:[{name:"model",rawName:"v-model",value:e.users,expression:"users"}],attrs:{name:"users",id:"users",multiple:""},domProps:{value:e.users},on:{input:function(t){e.users=t}}},[o("md-subheader",[e._v("Managers")]),e._v(" "),o("md-option",{attrs:{value:"jim_halpert"}},[e._v("Jim Halpert")]),e._v(" "),o("md-option",{attrs:{value:"dwight_schrute"}},[e._v("Dwight Schrute")]),e._v(" "),o("md-option",{attrs:{value:"michael_scott"}},[e._v("Michael Scott")]),e._v(" "),o("md-subheader",[e._v("Employees")]),e._v(" "),o("md-option",{attrs:{value:"pam_beesly"}},[e._v("Pam Beesly")]),e._v(" "),o("md-option",{attrs:{value:"angela_martin"}},[e._v("Angela Martin")]),e._v(" "),o("md-option",{attrs:{value:"kelly_kapoor"}},[e._v("Kelly Kapoor")]),e._v(" "),o("md-option",{attrs:{value:"ryan_howard"}},[e._v("Ryan Howard")]),e._v(" "),o("md-option",{attrs:{value:"kevin_malone"}},[e._v("Kevin Malone")]),e._v(" "),o("md-option",{attrs:{value:"creed_bratton"}},[e._v("Creed Bratton")]),e._v(" "),o("md-option",{attrs:{value:"oscar_nunez"}},[e._v("Oscar Nunez")]),e._v(" "),o("md-option",{attrs:{value:"toby_flenderson"}},[e._v("Toby Flenderson")]),e._v(" "),o("md-option",{attrs:{value:"stanley_hudson"}},[e._v("Stanley Hudson")]),e._v(" "),o("md-option",{attrs:{value:"meredith_palmer"}},[e._v("Meredith Palmer")]),e._v(" "),o("md-option",{attrs:{value:"phyllis_lapin_vance"}},[e._v("Phyllis Lapin-Vance")])],1)],1)],1),e._v(" "),o("div",[e._v("Selected users: "+e._s(e.users))])]),e._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[e._v('\n            <md-input-container>\n              <label for="users">Users</label>\n              <md-select name="users" id="users" multiple v-model="users">\n                <md-subheader>Managers</md-subheader>\n                <md-option value="jim_halpert">Jim Halpert</md-option>\n                <md-option value="dwight_schrute">Dwight Schrute</md-option>\n                <md-option value="michael_scott">Michael Scott</md-option>\n\n                <md-subheader>Employees</md-subheader>\n                <md-option value="pam_beesly">Pam Beesly</md-option>\n                <md-option value="angela_martin">Angela Martin</md-option>\n                <md-option value="kelly_kapoor">Kelly Kapoor</md-option>\n                <md-option value="ryan_howard">Ryan Howard</md-option>\n                <md-option value="kevin_malone">Kevin Malone</md-option>\n                <md-option value="creed_bratton">Creed Bratton</md-option>\n                <md-option value="oscar_nunez">Oscar Nunez</md-option>\n                <md-option value="toby_flenderson">Toby Flenderson</md-option>\n                <md-option value="stanley_hudson">Stanley Hudson</md-option>\n                <md-option value="meredith_palmer">Meredith Palmer</md-option>\n                <md-option value="phyllis_lapin_vance">Phyllis Lapin-Vance</md-option>\n              </md-select>\n            </md-input-container>\n\n            <div>Selected users: '+e._s(e.users)+"</div>\n          ")]),e._v(" "),o("code-block",{attrs:{lang:"javascript"}},[e._v("\n            export default {\n              data: () => ({\n                food: '',\n                users: [\n                  'jim_halpert',\n                  'michael_scott'\n                ]\n              })\n            };\n          ")])],1)])],1)])],1)},staticRenderFns:[]}},593:function(e,t,o){var a=o(525);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);o(5)("36ebadfb",a,!0)}});