attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n Changelog\n ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){varl,n;a(44),l=a(46);vare=a(50);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t,a){"use strict";functionl(s){returns&&s.__esModule?s:{default:s}}t.__esModule=!0;varn=a(47),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){vars=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(varl=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){varv=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<ahref="https://github.com/$1"target="_blank">@$1</a
returne[s]||function(){thrownewError("Cannot find module '"+s+"'.")}()}vare={"./en-US/alert.md":52,"./en-US/badge.md":56,"./en-US/breadcrumb.md":61,"./en-US/button.md":64,"./en-US/card.md":69,"./en-US/carousel.md":77,"./en-US/checkbox.md":81,"./en-US/collapse.md":85,"./en-US/color.md":89,"./en-US/custom-theme.md":92,"./en-US/date-picker.md":95,"./en-US/datetime-picker.md":99,"./en-US/dialog.md":103,"./en-US/dropdown.md":107,"./en-US/form.md":111,"./en-US/home.md":117,"./en-US/i18n.md":122,"./en-US/icon.md":125,"./en-US/input-number.md":130,"./en-US/input.md":134,"./en-US/installation.md":140,"./en-US/layout.md":143,"./en-US/loading.md":146,"./en-US/menu.md":150,"./en-US/message-box.md":154,"./en-US/message.md":158,"./en-US/notification.md":162,"./en-US/pagination.md":166,"./en-US/popover.md":170,"./en-US/progress.md":174,"./en-US/quickstart.md":177,"./en-US/radio.md":180,"./en-US/rate.md":184,"./en-US/select.md":188,"./en-US/slider.md":192,"./en-US/steps.md":196,"./en-US/switch.md":200,"./en-US/table.md":204,"./en-US/tabs.md":208,"./en-US/tag.md":212,"./en-US/time-picker.md":218,"./en-US/tooltip.md":222,"./en-US/tree.md":228,"./en-US/typography.md":232,"./en-US/upload.md":235,"./zh-CN/alert.md":239,"./zh-CN/badge.md":245,"./zh-CN/breadcrumb.md":252,"./zh-CN/button.md":255,"./zh-CN/card.md":261,"./zh-CN/carousel.md":267,"./zh-CN/checkbox.md":273,"./zh-CN/collapse.md":279,"./zh-CN/color.md":285,"./zh-CN/custom-theme.md":290,"./zh-CN/date-picker.md":293,"./zh-CN/datetime-picker.md":299,"./zh-CN/dialog.md":305,"./zh-CN/dropdown.md":311,"./zh-CN/form.md":317,"./zh-CN/home.md":323,"./zh-CN/i18n.md":327,"./zh-CN/icon.md":332,"./zh-CN/input-number.md":338,"./zh-CN/input.md":344,"./zh-CN/installation.md":350,"./zh-CN/layout.md":353,"./zh-CN/loading.md":358,"./zh-CN/menu.md":364,"./zh-CN/message-box.md":370,"./zh-CN/message.md":374,"./zh-CN/notification.md":378,"./zh-CN/pagination.md":382,"./zh-CN/popover.md":388,"./zh-CN/progress.md":394,"./zh-CN/quickstart.md":399,"./zh-CN/radio.md":402,"./zh-CN/rate.md":406,"./zh-CN/select.md":412,"./zh-CN/slider.md":418,"./zh-CN/steps.md":424,"./zh-CN/switch.md":428,"./zh-CN/table.md":434,"./zh-CN/tabs.md":440,"./zh-CN/tag.md":444,"./zh-CN/time-picker.md":450,"./zh-CN/tooltip.md":456,"./zh-CN/tree.md":462,"./zh-CN/typography.md":468,"./zh-CN/upload.md":473};l.keys=function(){returnObject.keys(e)},l.resolve=n,s.exports=l,l.id=51},function(s,t,a){s.exports=a(53)},function(s,t,a){varl,n;l=a(54);vare=a(55);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-alert title="success alert" type="success">\n </el-alert>\n <el-alert title="info alert" type="info">\n </el-alert>\n <el-alert title="warning alert" type="warning">\n </el-alert>\n <el-alert title="error alert" type="error">\n </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v
staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n <el-button size="small">comments</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n <el-button size="small">replies</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n margin-top: 10px;\n margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badgevalue="new"class="item">\n<el-b
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n <el-button type="primary" icon="arrow-left">Previous Page</el-button>\n <el-button type="primary">Next Page<i class="el-icon-arrow-right el-icon-right"></i></el-button>\n</el-button-group>\n<el-button-group>\n <el-button type="primary" icon="edit"></el-button>\n <el-button type="primary" icon="share"></el-button>\n <el-button type="primary" icon="delete"></el-button>\n</el-button-group>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hl
},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n }\n \n "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n };\n }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(78)},function(s,t,a){varl,n;l=a(79);vare=a(80);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){vars=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n<divclass="block">\n<spanclass="demonstration">Switchwhenindicatorishovered(default)</span>\n<el-carouselheight="150px">\n<el-carousel-itemv-for="itemin4">\n<h3>{{item}}</h3>\n</el-carousel-item>\n</el-carousel>\n</div>\n<divclass="block">\n<spanclass="demonstrati
slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` should be true or false -->")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n };\n }\n };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Disabled state for checkbox.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n\n',script:"\n export default {\n data() {\n return {\n checked1: false,\n checked2: true\n };\n }\n };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked1,expression:"checked1"}],attrs:{disabled:""},domProps:{value:s.checked1},on:{input:function(t){s.checked1=t}}},[s._v("Option")]),a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked2,expression:"checked2"}],attrs:{disabled:""},domProps:{value:s.checked2},on:{input:function(t){s.checked2=t}}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s.
script:"\n export default {\n data() {\n return {\n activeName: '1'\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],attrs:{accordion:""},domProps:{value:s.activeName},on:{input:function(t){s.activeName=t}}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{stat
staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[s._v("-o")]),s._v(". Importing your own theme is just like importing the default theme, only this time you import the file you just built:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n {\n "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n }\n ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(96)},function(s,t,a){varl,n;l=a(97);vare=a(98);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",newDate)}},{text:"Yesterday",onClick:function(s){vart=newDate;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){vart=newDate;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:"",value4:"",value5:"",value6:"",value7:""}}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("demo-block",{sta
},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(100)},function(s,t,a){varl,n;l=a(101);vare=a(102);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"Today",onClick:function(s){s.$emit("pick",newDate)}},{text:"Yesterday",onClick:function(s){vart=newDate;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"A week ago",onClick:function(s){vart=newDate;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"Last week",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"Last month",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"Last 3 months",onClick:function(s){vart=newDate,a=newDate;a.setTime(a.getTime()-7776e6),s.$emit("pick",[a,t])}}]},value1:"",value2:"",value3:newDate,value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{js
slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("v-model")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. This example explicitly changes the value of "),a("code",[s._v("v-model")]),s._v(" to toggle Dialog. In addition, we also provide "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" method, which you can call to open/close the Dialog.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v
},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n <el-button type="primary">\n Dropdown List<i class="el-icon-caret-bottom el-icon--right"></i>\n </el-button>\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n Dropdown List\n <el-dropdown-menu slot="dropdown">\n <el-dropdown-item>Action 1</el-dropdown-item>\n <el-dropdown-item>Action 2</el-dropdown-item>\n <el-dropdown-item>Action 3</el-dropdown-item>\n <el-dropdown-item>Action 4</el-dropdown-item>\n <el-dropdown-item>Action 5</el-dropdown-item>\n </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n Dropdown List\n "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("code",[s._v("split-button")]),s._v(" to split the triggering element into a button group with the left button being a normal button and right one the actual triggering target. If you wanna insert a separator line between item three and item four, just add a class "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-
},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(112)},function(s,t,a){varl,n;a(113),l=a(115);vare=a(116);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){vars=this,t=function(s,t,a){returnt?voidsetTimeout(function(){Number.isInteger(t)?t<18?a(newError("Age must be greater than 18")):a():a(newError("Please input digits"))},1e3):a(newError("Please input the age"))},a=function(t,a,l){""===a?l(newError("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(newError("Please input the password again")):a!==s.ruleForm2.pass?l(newError("Two inputs don't match!")):l()};return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formInline:{user:"",region:""},labelPosition:"right",formLabelAlign:{name:"",region:"",type:""},ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},ruleForm2:{pass:"",checkPass:"",age:""},formLabelWidth:"80px",options:[],rules:{name:[{required:!0,message:"Please input Activity name",trigger:"blur"},{min:3,max:5,message:"Length should be 3 to 5",trigger:"blur"}],region:[{required:!0,message:"Please select Activity zone",trigger:"change"}],date1:[{type:"date",required:!0,message:"Please pick a date",trigger:"change"}],date2:[{type:"date",required:!0,message:"Please pick a time",trigger:"change"}],type:[{type:"array",required:!0,message:"Please select at least one activity type",trigger:"change"}],resource:[{required:!0,message:"Please select activity resource",trigger:"change"}],desc:[{required:!0,message:"Please input activity form",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{key:Date.now(),value:""}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},onRuleFormSubmit:function(){console.log("onRuleFormSubmit")},submitForm:funct
staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n }\n }\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n onSubmit() {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n }\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n <el-radio-button label="left">Left</el-radio-button>\n <el-radio-button label="right">Right</el-radio-button>\n <el-radio-button label="top">Top</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign">\n <el-form-item label="Name">\n <el-input v-model="formLabelAlign.name"></el-input>\n </el-form-item>\n <el-form-item label="Activity zone">\n <el-input v-model="formLabelAlign.region"></el-input>\n </el-form-item>\n <el-form-item label="Activity form">\n <el-input v-model="formLabelAlign.type"></el-input>\n </el-form-item>\n</el-form>\n\n',script:"\n export default {\n data() {\n return {\n labelPosition: 'right',\n formLabelAlign: {\n name: '',\n region: '',\n type: ''\n }\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.labelPosition,expression:"labelPosition"}],attrs:{size:"small"},domProps:{value:s.labelPosition},on:{input:function(t){s.labelPosition=t}}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.name,expression:"formLabelAlign.name"}],domProps:{value:s.formLabelAlign.name},on:{input:function(t){s.formLabelAlign.name=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.region,expression:"formLabelAlign.region"}],domProps:{value:s.formLabelAlign.region},on:{input:function(t){s.formLabelAlign.region=t}}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.type,expression:"formLabelAlign.type"}],domProps:{value:s.formLabelAlign.type},on:{input:function(t){s.formLabelAlign.type=t}}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highligh
},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("the DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(151)},function(s,t,a){varl,n;l=a(152);vare=a(153);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleOpen:function(s,t){console.log(s,t)},handleClose:function(s,t){console.log(s,t)},handleSelect:function(s,t){console.log(s,t)}}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-menutheme="dark"default-active="1"class="el-menu-dem
style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("code",[s._v("cancelButtonText")]),s._v(" to customize the button text (the confirm button also has these fields, and a complete list of fields can be found at the end of this documentation). This example also uses the "),a("code",[s._v("beforeClose")]),s._v(" attribute. It is a method and will be triggered when the MessageBox instance will be closed, and its execution will stop the instance from closing. It has three parameters: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n open4() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("
},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){varl,n;l=a(164);vare=a(165);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";s.exports={methods:{open:function(){vars=this.$createElement;this.$notify({title:"Title",message:s("p",{style:"color: red"},"This is a reminder")})},open2:function(){this.$notify({title:"Prompt",message:"This is a message that does not automatically close",duration:0})},open3:function(){this.$notify({title:"Success",message:"This is a success message",type:"success"})},open4:function(){this.$notify({title:"Warning",message:"This is a warning message",type:"warning"})},open5:function(){this.$notify.info({title:"Info",message:"This is an info message"})},open6:function(){this.$notify.error({title:"Error",message:"This is an error message"})},open7:function(){this.$notify.success({title:"Success",message:"This is a success message",offset:100})},onClose:function(){console.log("Notification is closed")}}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n <el-button plain @click="open">\n Closes automatically\n </el-button>\n <el-button plain @click="open2">\n Won\'t close automatically\n </el-button>\n</template>\n\n\n',script:"\nexportdefault{\nmethods:{\nopen(){\n
staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._
},[s._v("true")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n },\n "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n }\n }),\n "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n }\n })\n ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v(", we can import components we actually need, making the project smaller than otherwise.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"h
"aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(185)},function(s,t,a){varl,n;l=a(186);vare=a(187);n=l=l||{},"object"!=typeofl.default&&"function"!=typeofl.default||(n=l=l.default),"function"==typeofn&&(n=n.options),n.render=e.render,n.staticRenderFns=e.staticRenderFns,s.exports=l},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){vars=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n <span class="demonstration">Default</span>\n <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n <span class="demonstration">Color for different levels</span>\n <el-rate v-model="value2" :colors="[\'#99A9BF\', \'#F7BA2A\', \'#FF9900\']">\n </el-rate>\n</div>\n\n\n',script:"\n export default {\n data() {\n return {\n value1: null,\n value2: null\n }\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]),a("p",[s._v("Rate divides rating scores into three levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them to reflect three levels using the "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")
returna("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons")]),a("td",[s._v("string")]),
}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){vars=this,t=s.$createElement,a=s._self._c||t;returna("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[s._v("auto")]),s._v(" height. If its value is a number, the height is measured in pixels; if its value is a string, the height is affected by external styles")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxHeight")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("t
staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n <el-tab-pane>\n <span slot="label"><i class="el-icon-date"></i> Route</span>\n Route\n </el-tab-pane>\n <el-tab-pane label="Config">Config</el-tab-pane>\n <el-tab-pane label="Role">Role</el-tab-pane>\n <el-tab-pane label="Task">Task</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n Route\n ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n
}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n selectableRange: '18:30:00 - 20:30:00'\n }\"")]),s._v("\n "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n };\n }\n }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n <el-time-select placeholder=\"Start time\" v-model=\"startTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30'\n }\">\n </el-time-select>\n <el-time-select placeholder=\"End time\" v-model=\"endTime\" :picker-options=\"{\n start: '08:30',\n step: '00:15',\n end: '18:30',\n minTime: startTime\n }\">\n </el-time-select>\n</template>\n\n\n",script:"\n export default {\n data() {\n return {\n startTime: '',\n endTime: ''\n };\n }\n }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){s.endTime=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v
