vue-material/input.76e80edc.js

webpackJsonp([10,34],{475:function(e,t,a){a(599);var n=a(0)(a(504),a(565),"data-v-53f2ef70",null);e.exports=n.exports},504:function(e,t,a){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{initialValue:"My initial value"}}},e.exports=t.default},531:function(e,t,a){t=e.exports=a(4)(),t.push([e.i,"",""])},565:function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("page-content",{attrs:{"page-title":"Components - Input"}},[a("docs-component",[a("div",{slot:"description"},[a("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(" "),a("div",{slot:"api"},[a("api-table",{attrs:{name:"md-input-container"}},[a("md-table",{slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Type")]),e._v(" "),a("md-table-head",[e._v("Description")])],1)],1),e._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[e._v("md-inline")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v("Create inline field with a label or placeholder. Default "),a("code",[e._v("false")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("md-has-password")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v("Show a button to toggle the password visibility. Default "),a("code",[e._v("false")])])],1)],1)],1),e._v(" "),a("md-table",{slot:"classes"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Description")])],1)],1),e._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[e._v("md-input-invalid")]),e._v(" "),a("md-table-cell",[e._v("Set the error class")])],1)],1)],1)],1),e._v(" "),a("api-table",{attrs:{name:"md-input"}},[a("md-table",{slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Type")]),e._v(" "),a("md-table-head",[e._v("Description")])],1)],1),e._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[e._v("v-model")]),e._v(" "),a("md-table-cell",[a("code",[e._v("String")])]),e._v(" "),a("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("type")]),e._v(" "),a("md-table-cell",[a("code",[e._v("String")])]),e._v(" "),a("md-table-cell",[e._v("Sets the type. Default "),a("code",[e._v("text")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("disabled")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v("Disable the input and prevent his actions. Default "),a("code",[e._v("false")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("required")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),a("code",[e._v("false")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("placeholder")]),e._v(" "),a("md-table-cell",[a("code",[e._v("String")])]),e._v(" "),a("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("maxlength")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Number")])]),e._v(" "),a("md-table-cell",[e._v("Sets the maxlength and enable the text counter.")])],1)],1)],1)],1),e._v(" "),a("api-table",{attrs:{name:"md-textarea"}},[a("md-table",{slot:"properties"},[a("md-table-header",[a("md-table-row",[a("md-table-head",[e._v("Name")]),e._v(" "),a("md-table-head",[e._v("Type")]),e._v(" "),a("md-table-head",[e._v("Description")])],1)],1),e._v(" "),a("md-table-body",[a("md-table-row",[a("md-table-cell",[e._v("v-model")]),e._v(" "),a("md-table-cell",[a("code",[e._v("String")])]),e._v(" "),a("md-table-cell",[e._v("A required model object to bind the value.")])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("disabled")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v("Disable the textarea and prevent his actions. Default "),a("code",[e._v("false")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("required")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Boolean")])]),e._v(" "),a("md-table-cell",[e._v('Apply the required rule to style the label with an "*". Default '),a("code",[e._v("false")])])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("placeholder")]),e._v(" "),a("md-table-cell",[a("code",[e._v("String")])]),e._v(" "),a("md-table-cell",[e._v("Sets the placeholder.")])],1),e._v(" "),a("md-table-row",[a("md-table-cell",[e._v("maxlength")]),e._v(" "),a("md-table-cell",[a("code",[e._v("Number")])]),e._v(" "),a("md-table-cell",[e._v("Sets the maxlength and enable the text counter.")])],1)],1)],1)],1)],1),e._v(" "),a("div",{slot:"example"},[a("example-box",{attrs:{"card-title":"Regular fields"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",[a("label",[e._v("Initial value")]),e._v(" "),a("md-input",{directives:[{name:"model",rawName:"v-model",value:e.initialValue,expression:"initialValue"}],domProps:{value:e.initialValue},on:{input:function(t){e.initialValue=t}}})],1),e._v(" "),a("md-input-container",[a("label",[e._v("With label")]),e._v(" "),a("md-input",{attrs:{placeholder:"My nice placeholder"}})],1),e._v(" "),a("md-input-container",{attrs:{"md-inline":""}},[a("label",[e._v("Inline field")]),e._v(" "),a("md-input")],1),e._v(" "),a("md-input-container",[a("label",[e._v("Number")]),e._v(" "),a("md-input",{attrs:{type:"number"}})],1),e._v(" "),a("md-input-container",[a("label",[e._v("Textarea")]),e._v(" "),a("md-textarea")],1),e._v(" "),a("md-input-container",[a("label",[e._v("Disabled")]),e._v(" "),a("md-input",{attrs:{disabled:""}})],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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>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            </form>\n          ')]),e._v(" "),a("code-block",{attrs:{lang:"javascript"}},[e._v("\n            export default {\n              data() {\n                return {\n                  initialValue: 'My initial value'\n                };\n              }\n            };\n          ")])],1)]),e._v(" "),a("example-box",{attrs:{"card-title":"Passwords"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",[a("label",[e._v("Regular Password")]),e._v(" "),a("md-input",{attrs:{type:"password"}})],1),e._v(" "),a("md-input-container",{attrs:{"md-has-password":""}},[a("label",[e._v("Password Reveal")]),e._v(" "),a("md-input",{attrs:{type:"password"}})],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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(" "),a("example-box",{attrs:{"card-title":"Icons"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",[a("md-icon",{staticClass:"md-warn"},[e._v("\n                warning\n                "),a("md-tooltip",[e._v("Be careful. You're almost broken!")])],1),e._v(" "),a("label",[e._v("Money")]),e._v(" "),a("md-input",{attrs:{type:"number"}}),e._v(" "),a("md-icon",[e._v("attach_money")])],1),e._v(" "),a("md-input-container",[a("md-icon",[e._v("phone")]),e._v(" "),a("label",[e._v("Phone")]),e._v(" "),a("md-input",{attrs:{type:"tel"}})],1),e._v(" "),a("md-input-container",[a("md-icon",[e._v("speaker_notes")]),e._v(" "),a("label",[e._v("Notes")]),e._v(" "),a("md-textarea")],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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(" "),a("example-box",{attrs:{"card-title":"Required and Errors"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",[a("label",[e._v("Required")]),e._v(" "),a("md-input",{attrs:{required:""}})],1),e._v(" "),a("md-input-container",{staticClass:"md-input-invalid"},[a("label",[e._v("Error")]),e._v(" "),a("md-input",{attrs:{required:""}})],1),e._v(" "),a("md-input-container",{staticClass:"md-input-invalid"},[a("label",[e._v("Error with message")]),e._v(" "),a("md-input",{attrs:{required:""}}),e._v(" "),a("span",{staticClass:"md-error"},[e._v("Validation message")])],1),e._v(" "),a("md-input-container",{staticClass:"md-input-invalid"},[a("label",[e._v("Textarea with error")]),e._v(" "),a("md-textarea"),e._v(" "),a("span",{staticClass:"md-error"},[e._v("Textarea validation message")])],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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(" "),a("example-box",{attrs:{"card-title":"Character counter"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",[a("label",[e._v("Textarea")]),e._v(" "),a("md-textarea",{attrs:{maxlength:"70"}})],1),e._v(" "),a("md-input-container",[a("label",[e._v("Input")]),e._v(" "),a("md-input",{attrs:{maxlength:"20"}})],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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(" "),a("example-box",{attrs:{"card-title":"Themes"}},[a("div",{slot:"demo"},[a("form",{attrs:{novalidate:""},on:{submit:function(t){t.stopPropagation(),t.preventDefault(),e.submit(t)}}},[a("md-input-container",{attrs:{"md-theme":"green"}},[a("label",[e._v("Green - Input")]),e._v(" "),a("md-input")],1),e._v(" "),a("md-input-container",{attrs:{"md-theme":"red"}},[a("label",[e._v("Red - Textarea")]),e._v(" "),a("md-textarea")],1)],1)]),e._v(" "),a("div",{slot:"code"},[a("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:[]}},599:function(e,t,a){var n=a(531);"string"==typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);a(5)("637efd80",n,!0)}});