vue-material/input.60138429.js

webpackJsonp([11,37],{814:function(e,t,l){function a(e){l(907)}var n=l(1)(l(846),l(945),a,"data-v-53f2ef70",null);e.exports=n.exports},846:function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var n=l(52),d=a(n);t.default={data:function(){return{autocompleteValue:"",initialValue:"My initial value",listAutocomplete:[{name:"oi"},{name:"hello"},{name:"salut"}]}},methods:{fetchAutocomplete:function(e){var t={method:"GET",headers:new Headers,mode:"cors",cache:"default"},l="https://typeahead-js-twitter-api-proxy.herokuapp.com/demo/search",a=(0,d.default)(e)[0],n=e[a],o=l+"?"+a+"="+n;return window.fetch(o,t).then((function(e){return e.json()}))},filterList:function(e,t){return e.filter((function(e){return e.name.indexOf(t)!==-1}))}}},e.exports=t.default},874:function(e,t,l){t=e.exports=l(795)(),t.push([e.i,"",""])},907:function(e,t,l){var a=l(874);"string"==typeof a&&(a=[[e.i,a,""]]),a.locals&&(e.exports=a.locals);l(796)("cc1b8ffc",a,!0)},945:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,l=e._self._c||t;return l("page-content",{attrs:{"page-title":"Components - Input"}},[l("docs-component",[l("div",{slot:"description"},[l("p",[e._v("Inputs allow users to input text and usually appear in forms. Users may enter text, numbers, or mixed-format types of input.")])]),e._v(" "),l("div",{slot:"api"},[l("api-table",{attrs:{name:"md-input-container"}},[l("md-table",{slot:"properties"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Type")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("md-inline")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Create inline field with a label or placeholder. Default "),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("md-has-password")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Show a button to toggle the password visibility. Default "),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("md-clearable")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Show a button to clear the input. Default "),l("code",[e._v("false")])])],1)],1)],1),e._v(" "),l("md-table",{slot:"classes"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("md-input-invalid")]),e._v(" "),l("md-table-cell",[e._v("Set the error class")])],1)],1)],1)],1),e._v(" "),l("api-table",{attrs:{name:"md-input"}},[l("md-table",{slot:"properties"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Type")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("v-model")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("type")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("Sets the type. Default "),l("code",[e._v("text")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("debounce")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Debounce the "),l("code",[e._v("change")]),e._v(" and "),l("code",[e._v("input")]),e._v(" events emission. Default "),l("code",[e._v("300")]),e._v("ms")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("disabled")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Disable the input and prevent its actions. Default "),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("required")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("placeholder")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("maxlength")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Sets the maxlength and enable the text counter.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("readonly")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Sets the component to read only mode.")])],1)],1)],1)],1),e._v(" "),l("api-table",{attrs:{name:"md-autocomplete"}},[l("md-table",{slot:"properties"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Type")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("v-model")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("debounce")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Sets the debounce time. Default "),l("code",[e._v("1000")]),e._v(" milliseconds")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("fetch")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Function")])]),e._v(" "),l("md-table-cell",[e._v("Sets the fetch function mdAutocomplete will call after the debounce is reached. Chosing "),l("code",[e._v("fetch")]),e._v(" prop "),l("strong",[e._v("disables")]),e._v(" the use of either "),l("code",[e._v("list")]),e._v(" and "),l("code",[e._v("filterList")]),e._v(" props.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("list")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Array")])]),e._v(" "),l("md-table-cell",[e._v("Sets an array of possible values. Default "),l("code",[e._v("[]")]),e._v(". MdAutocomplete will only search in this list if it's set. Chosing "),l("code",[e._v("list")]),e._v(" prop "),l("strong",[e._v("disables")]),e._v(" the use of "),l("code",[e._v("fetch")]),e._v(" prop.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("filter-list")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Function")])]),e._v(" "),l("md-table-cell",[e._v("Sets a filter function which will be used to filter the "),l("code",[e._v("list")]),e._v(" props. Chosing "),l("code",[e._v("filterList")]),e._v(" prop "),l("strong",[e._v("requires")]),e._v(" the use of "),l("code",[e._v("list")]),e._v(" props and "),l("strong",[e._v("disables")]),e._v(" the use of "),l("code",[e._v("fetch")]),e._v(" prop.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("min-chars")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Sets the minimum number of characters before making opening the autocomplete options or making a request. Default "),l("code",[e._v("3")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("prepare-response-data")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Function")])]),e._v(" "),l("md-table-cell",[e._v("This function will be called once the "),l("code",[e._v("fetch")]),e._v(" prop has a response. It can manipulate the data received from the server. The output should always be an "),l("code",[e._v("Array")]),e._v(".")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("print-attribute")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("This prop will be used to print values on the autocomplete list. It shall match an object key expected on the "),l("code",[e._v("fetch")]),e._v(" result list. Default "),l("code",[e._v("name")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("query-param")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("Sets the query parameter. Example: http//api.com/"),l("strong",[e._v("q")]),e._v("?=SOMETHING. Default "),l("code",[e._v("q")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("disabled")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Disable the input and prevent his actions. Default "),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("required")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("placeholder")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("maxlength")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Sets the maxlength and enable the text counter.")])],1)],1)],1),e._v(" "),l("md-table",{slot:"events"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Value")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("change")]),e._v(" "),l("md-table-cell",[e._v("The "),l("code",[e._v("String")]),e._v(" selected")]),e._v(" "),l("md-table-cell",[e._v("Triggered when the user selects an item from the autocomplete list")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("input")]),e._v(" "),l("md-table-cell",[e._v("The "),l("code",[e._v("String")]),e._v(" selected")]),e._v(" "),l("md-table-cell",[e._v("Triggered when the user selects an item from the autocomplete list")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("selected")]),e._v(" "),l("md-table-cell",[e._v("Emits the "),l("code",[e._v("Object")]),e._v(" as well as the "),l("code",[e._v("String")]),e._v(" selected.")]),e._v(" "),l("md-table-cell",[e._v("Triggered when the user selects an item from the autocomplete list")])],1)],1)],1)],1),e._v(" "),l("api-table",{attrs:{name:"md-textarea"}},[l("md-table",{slot:"properties"},[l("md-table-header",[l("md-table-row",[l("md-table-head",[e._v("Name")]),e._v(" "),l("md-table-head",[e._v("Type")]),e._v(" "),l("md-table-head",[e._v("Description")])],1)],1),e._v(" "),l("md-table-body",[l("md-table-row",[l("md-table-cell",[e._v("v-model")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("debounce")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Debounce the "),l("code",[e._v("change")]),e._v(" and "),l("code",[e._v("input")]),e._v(" events emission. Default "),l("code",[e._v("300")]),e._v("ms")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("disabled")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Disable the textarea and prevent its actions. Default "),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("required")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),l("code",[e._v("false")])])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("placeholder")]),e._v(" "),l("md-table-cell",[l("code",[e._v("String")])]),e._v(" "),l("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("maxlength")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Number")])]),e._v(" "),l("md-table-cell",[e._v("Sets the maxlength and enable the text counter.")])],1),e._v(" "),l("md-table-row",[l("md-table-cell",[e._v("readonly")]),e._v(" "),l("md-table-cell",[l("code",[e._v("Boolean")])]),e._v(" "),l("md-table-cell",[e._v("Sets the component to read only mode.")])],1)],1)],1)],1)],1),e._v(" "),l("div",{slot:"example"},[l("example-box",{attrs:{"card-title":"Regular fields"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",[l("label",[e._v("Initial value")]),e._v(" "),l("md-input",{model:{value:e.initialValue,callback:function(t){e.initialValue=t},expression:"initialValue"}})],1),e._v(" "),l("md-input-container",[l("label",[e._v("Initial value (read only)")]),e._v(" "),l("md-input",{attrs:{readonly:""},model:{value:e.initialValue,callback:function(t){e.initialValue=t},expression:"initialValue"}})],1),e._v(" "),l("md-input-container",[l("label",[e._v("Autocomplete (with fetch)")]),e._v(" "),l("md-autocomplete",{attrs:{fetch:e.fetchAutocomplete},model:{value:e.autocompleteValue,callback:function(t){e.autocompleteValue=t},expression:"autocompleteValue"}})],1),e._v(" "),l("md-input-container",[l("label",[e._v("With label")]),e._v(" "),l("md-input",{attrs:{placeholder:"My nice placeholder"}})],1),e._v(" "),l("md-input-container",{attrs:{"md-inline":""}},[l("label",[e._v("Inline field")]),e._v(" "),l("md-input")],1),e._v(" "),l("md-input-container",[l("label",[e._v("Number")]),e._v(" "),l("md-input",{attrs:{type:"number"}})],1),e._v(" "),l("md-input-container",[l("label",[e._v("Textarea")]),e._v(" "),l("md-textarea")],1),e._v(" "),l("md-input-container",[l("label",[e._v("Disabled")]),e._v(" "),l("md-input",{attrs:{disabled:""}})],1),e._v(" "),l("md-input-container",{attrs:{"md-clearable":""}},[l("label",[e._v("Clearable")]),e._v(" "),l("md-input",{model:{value:e.initialValue,callback:function(t){e.initialValue=t},expression:"initialValue"}})],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container>\n                <label>Initial value</label>\n                <md-input v-model="initialValue"></md-input>\n              </md-input-container>\n\n              <md-input-container>\n                <label>Autocomplete (with fetch)</label>\n                <md-input v-model="autocompleteValue" :fetch="fetchFunction"></md-input>\n              </md-input-container>\n\n              <md-input-container>\n                <label>With label</label>\n                <md-input placeholder="My nice placeholder"></md-input>\n              </md-input-container>\n\n              <md-input-container md-inline>\n                <label>Inline field</label>\n                <md-input></md-input>\n              </md-input-container>\n\n              <md-input-container>\n                <label>Number</label>\n                <md-input type="number"></md-input>\n              </md-input-container>\n\n              <md-input-container>\n                <label>Textarea</label>\n                <md-textarea></md-textarea>\n              </md-input-container>\n\n              <md-input-container>\n                <label>Disabled</label>\n                <md-input disabled></md-input>\n              </md-input-container>\n\n              <md-input-container md-clearable>\n                <label>Clearable</label>\n                <md-input v-model="initialValue"></md-input>\n              </md-input-container>\n            </form>\n          ')]),e._v(" "),l("code-block",{attrs:{lang:"javascript"}},[e._v("\n            export default {\n              data() {\n                return {\n                  initialValue: 'My initial value'\n                };\n              },\n              methods: {\n                fetchFunction(param) {\n                  // param = { queryParam: query }\n\n                  // 'fetchAutocomplete' should return a Promise.\n\n                  // md-autocomplete will call fetchAutocomplete and pass\n                  // 'param' as an argument.\n                  // the 'param' is composed by a query param and\n                  // a query.\n                },\n              },\n            };\n          ")])],1)]),e._v(" "),l("example-box",{attrs:{"card-title":"Passwords"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",[l("label",[e._v("Regular Password")]),e._v(" "),l("md-input",{attrs:{type:"password"}})],1),e._v(" "),l("md-input-container",{attrs:{"md-has-password":""}},[l("label",[e._v("Password Reveal")]),e._v(" "),l("md-input",{attrs:{type:"password"}})],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container>\n                <label>Regular Password</label>\n                <md-input type="password"></md-input>\n              </md-input-container>\n\n              <md-input-container md-has-password>\n                <label>Password Reveal</label>\n                <md-input type="password"></md-input>\n              </md-input-container>\n            </form>\n          ')])],1)]),e._v(" "),l("example-box",{attrs:{"card-title":"Icons"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",[l("md-icon",{staticClass:"md-warn"},[e._v("\n                warning\n                "),l("md-tooltip",[e._v("Be careful. You're almost broken!")])],1),e._v(" "),l("label",[e._v("Money")]),e._v(" "),l("md-input",{attrs:{type:"number"}}),e._v(" "),l("md-icon",[e._v("attach_money")])],1),e._v(" "),l("md-input-container",[l("md-icon",[e._v("phone")]),e._v(" "),l("label",[e._v("Phone")]),e._v(" "),l("md-input",{attrs:{type:"tel"}})],1),e._v(" "),l("md-input-container",[l("md-icon",[e._v("speaker_notes")]),e._v(" "),l("label",[e._v("Notes")]),e._v(" "),l("md-textarea")],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container>\n                <md-icon class="md-warn">\n                  warning\n                  <md-tooltip>Be careful. You\'re almost broken!</md-tooltip>\n                </md-icon>\n                <label>Money</label>\n                <md-input type="text"></md-input>\n                <md-icon>attach_money</md-icon>\n              </md-input-container>\n\n              <md-input-container>\n                <md-icon>phone</md-icon>\n                <label>Phone</label>\n                <md-input type="tel"></md-input>\n              </md-input-container>\n\n              <md-input-container>\n                <md-icon>speaker_notes</md-icon>\n                <label>Notes</label>\n                <md-textarea></md-textarea>\n              </md-input-container>\n            </form>\n          ')])],1)]),e._v(" "),l("example-box",{attrs:{"card-title":"Required and Errors"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",[l("label",[e._v("Required")]),e._v(" "),l("md-input",{attrs:{required:""}})],1),e._v(" "),l("md-input-container",{staticClass:"md-input-invalid"},[l("label",[e._v("Error")]),e._v(" "),l("md-input",{attrs:{required:""}})],1),e._v(" "),l("md-input-container",{staticClass:"md-input-invalid"},[l("label",[e._v("Error with message")]),e._v(" "),l("md-input",{attrs:{required:""}}),e._v(" "),l("span",{staticClass:"md-error"},[e._v("Validation message")])],1),e._v(" "),l("md-input-container",{staticClass:"md-input-invalid"},[l("label",[e._v("Textarea with error")]),e._v(" "),l("md-textarea"),e._v(" "),l("span",{staticClass:"md-error"},[e._v("Textarea validation message")])],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container>\n                <label>Required</label>\n                <md-input required></md-input>\n              </md-input-container>\n\n              <md-input-container class="md-input-invalid">\n                <label>Error</label>\n                <md-input required></md-input>\n              </md-input-container>\n\n              <md-input-container class="md-input-invalid">\n                <label>Error with message</label>\n                <md-input required></md-input>\n\n                <span class="md-error">Validation message</span>\n              </md-input-container>\n\n              <md-input-container class="md-input-invalid">\n                <label>Textarea with error</label>\n                <md-textarea></md-textarea>\n\n                <span class="md-error">Textarea validation message</span>\n              </md-input-container>\n            </form>\n          ')])],1)]),e._v(" "),l("example-box",{attrs:{"card-title":"Character counter"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",[l("label",[e._v("Textarea")]),e._v(" "),l("md-textarea",{attrs:{maxlength:"70"}})],1),e._v(" "),l("md-input-container",[l("label",[e._v("Input")]),e._v(" "),l("md-input",{attrs:{maxlength:"20"}})],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container>\n                <label>Textarea</label>\n                <md-textarea maxlength="70"></md-textarea>\n              </md-input-container>\n\n              <md-input-container>\n                <label>Input</label>\n                <md-input maxlength="20"></md-input>\n              </md-input-container>\n            </form>\n          ')])],1)]),e._v(" "),l("example-box",{attrs:{"card-title":"Themes"}},[l("div",{slot:"demo"},[l("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[l("md-input-container",{attrs:{"md-theme":"green"}},[l("label",[e._v("Green - Input")]),e._v(" "),l("md-input")],1),e._v(" "),l("md-input-container",{attrs:{"md-theme":"red"}},[l("label",[e._v("Red - Textarea")]),e._v(" "),l("md-textarea")],1)],1)]),e._v(" "),l("div",{slot:"code"},[l("code-block",{attrs:{lang:"xml"}},[e._v('\n            <form novalidate @submit.stop.prevent="submit">\n              <md-input-container md-theme="green">\n                <label>Green - Input</label>\n                <md-input></md-input>\n              </md-input-container>\n\n              <md-input-container md-theme="red">\n                <label>Red - Textarea</label>\n                <md-textarea></md-textarea>\n              </md-input-container>\n            </form>\n          ')])],1)])],1)])],1)},staticRenderFns:[]}}});