(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{392:function(e,t,n){var a={"./changelog.vue":535,"./component.vue":554,"./design.vue":813,"./guide.vue":555,"./index.vue":556,"./nav.vue":557,"./resource.vue":814,"./theme-nav.vue":815,"./theme-preview.vue":558,"./theme.vue":559};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=392},396:function(e,t,n){var a={"./fr-FR/alert.md":743,"./fr-FR/avatar.md":744,"./fr-FR/backtop.md":745,"./fr-FR/badge.md":746,"./fr-FR/border.md":747,"./fr-FR/breadcrumb.md":748,"./fr-FR/button.md":749,"./fr-FR/calendar.md":750,"./fr-FR/card.md":751,"./fr-FR/carousel.md":752,"./fr-FR/cascader.md":753,"./fr-FR/checkbox.md":754,"./fr-FR/collapse.md":755,"./fr-FR/color-picker.md":756,"./fr-FR/color.md":757,"./fr-FR/container.md":758,"./fr-FR/custom-theme.md":828,"./fr-FR/date-picker.md":759,"./fr-FR/datetime-picker.md":760,"./fr-FR/descriptions.md":761,"./fr-FR/dialog.md":762,"./fr-FR/divider.md":763,"./fr-FR/drawer.md":764,"./fr-FR/dropdown.md":765,"./fr-FR/empty.md":766,"./fr-FR/form.md":767,"./fr-FR/i18n.md":829,"./fr-FR/icon.md":768,"./fr-FR/image.md":769,"./fr-FR/infiniteScroll.md":770,"./fr-FR/input-number.md":771,"./fr-FR/input.md":772,"./fr-FR/installation.md":830,"./fr-FR/layout.md":773,"./fr-FR/link.md":774,"./fr-FR/loading.md":775,"./fr-FR/menu.md":776,"./fr-FR/message-box.md":777,"./fr-FR/message.md":778,"./fr-FR/notification.md":779,"./fr-FR/page-header.md":780,"./fr-FR/pagination.md":781,"./fr-FR/popconfirm.md":782,"./fr-FR/popover.md":783,"./fr-FR/progress.md":784,"./fr-FR/quickstart.md":831,"./fr-FR/radio.md":785,"./fr-FR/rate.md":786,"./fr-FR/result.md":787,"./fr-FR/select.md":788,"./fr-FR/skeleton.md":789,"./fr-FR/slider.md":790,"./fr-FR/steps.md":791,"./fr-FR/switch.md":792,"./fr-FR/table.md":793,"./fr-FR/tabs.md":794,"./fr-FR/tag.md":795,"./fr-FR/time-picker.md":796,"./fr-FR/timeline.md":797,"./fr-FR/tooltip.md":798,"./fr-FR/transfer.md":799,"./fr-FR/transition.md":800,"./fr-FR/tree.md":801,"./fr-FR/typography.md":802,"./fr-FR/upload.md":803};function l(e){var t=r(e);return n(t)}function r(e){var t=a[e];if(t+1)return t;var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}l.keys=function(){return Object.keys(a)},l.resolve=r,(e.exports=l).id=396},467:function(e,t,n){},468:function(e,t,n){},469:function(e,t,n){},470:function(e,t,n){},471:function(e,t,n){},472:function(e,t,n){},473:function(e,t,n){},474:function(e,t,n){},475:function(e,t,n){},523:function(e,t,n){"use strict";var a=n(467);n.n(a).a},524:function(e,t,n){"use strict";var a=n(468);n.n(a).a},525:function(e,t,n){"use strict";var a=n(469);n.n(a).a},526:function(e,t,n){"use strict";var a=n(470);n.n(a).a},527:function(e,t,n){"use strict";var a=n(471);n.n(a).a},528:function(e,t,n){"use strict";var a=n(472);n.n(a).a},529:function(e,t,n){"use strict";var a=n(473);n.n(a).a},530:function(e,t,n){"use strict";var a=n(474);n.n(a).a},531:function(e,t,n){"use strict";var a=n(475);n.n(a).a},535:function(e,t,n){"use strict";n.r(t);var a=n(0),l={components:{ChangeLog:Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"changelog"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changelog")]),n("h3",{attrs:{id:"2-15-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.10")]),n("p",[n("em",[e._v("2022-09-13")])]),n("h4",{attrs:{id:"bug-fixes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix props placement error (#21908 by @lqzhgood)")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Fix sticky DOM error (#22087 by @zzjjhh001)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix Popover docs (#22083 by @lm312)")]),n("li",[e._v("Fix Skeleton docs (#22092 by @lm312)")]),n("li",[e._v("Fix DatePicker docs (#21970 by @guojiongwei)")])])]),n("li",[e._v("Tree:\n"),n("ul",[n("li",[e._v("fix lazy-load default check problem (#21934 by @kiss-yu)")])])])]),n("h4",{attrs:{id:"optimization"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add translation of Sinhalese (#21936 by @sayuri-gi)")]),n("li",[e._v("Update translation of Spanish (#21924 by @jcardus)")]),n("li",[e._v("Add translation of Malaysian (#22028 by @iorange0411)")]),n("li",[e._v("Update translation of Swahili (#21904 by @Cholowao)")])])]),n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("update date-util.js (#22099 by @Due07)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("add months And years type (#21918 by @akiko123456)")])])])]),n("h3",{attrs:{id:"2-15-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.9")]),n("p",[n("em",[e._v("2022-06-02")])]),n("h4",{attrs:{id:"bug-fixes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix Tabl-header shake bug (#21863 by @bofeng)")]),n("li",[e._v("Fix when partial import  show "),n("code",[e._v("el-checkbox not imported")]),e._v(" error (#21828 by @bobohuochai)")])])]),n("li",[e._v("FormItem\n"),n("ul",[n("li",[e._v("Fix  change rules  verification not reset bug (#21892 by @bofeng)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Fix change options unexpect error (#21759 by @louiebb)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix Popover docs (#21843 by @lod61)")]),n("li",[e._v("Fix Calendar docs (#21814 by @GoJam11)")]),n("li",[e._v("Fix TimePicker docs (#21803 by @Alanscut)")]),n("li",[e._v("Fix DatePicker docs (#21877 by @Nirvanaiu)")])])]),n("li",[e._v("Other\n"),n("ul",[n("li",[e._v("Fix codepen display bug (#21863 by @bofeng)")])])])]),n("h4",{attrs:{id:"optimization-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Add translation of Swahili (#21895 by @quilltouch)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Use launch-editor-middleware in dev environment (#21633 by @polemices)")])])]),n("li",[e._v("DatePicker & Cascader\n"),n("ul",[n("li",[e._v("Optimize the dropdown animation direction (#21806 by @XivLaw)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Optimize "),n("code",[e._v("getFirstElement")]),e._v(" code (#21886 by @zhankang)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Optimize scss code (#21558 by @cheese-git)")])])])]),n("h3",{attrs:{id:"2-15-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.8")]),n("p",[n("em",[e._v("2022-04-12")])]),n("h4",{attrs:{id:"bug-fixes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("Fix appendToBody failure problem (#21264 by @cs1707)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Fix toggling value problem(#19473 by @EdwinBetanc0urt)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix input docs (#21723 by @justforuse)")]),n("li",[e._v("Fix DatePicker docs (#21663 by @justforuse)")]),n("li",[e._v("Fix Skeleton docs (#21601 by @yanwydxf)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("Fix vue version (#21736 by @ckvv)")])])])]),n("h4",{attrs:{id:"optimization-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("add translation of Azerbaijani (#21012 by @ricardotondello)")]),n("li",[e._v("update translation of Slovenian (#21729 by @patik123)")]),n("li",[e._v("update translation of Slovak (#21711 by @sjaustirni )")]),n("li",[e._v("add translation of Icelandic (#21709 by @aronhr)")]),n("li",[e._v("add translation of Bengali (#21485 by @llwwtt)")])])])]),n("h4",{attrs:{id:"others"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#others","aria-hidden":"true"}},[e._v("¶")]),e._v(" Others")]),n("ul",[n("li",[e._v("Due to compatibility considerations, the PR on node-sass (#21019 by @linxsbox) of 2.15.7 release has been withdrawn and will be published in an appropriate version after re-evaluation.")])]),n("h3",{attrs:{id:"2-15-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.7")]),n("p",[n("em",[e._v("2021-11-18")])]),n("h4",{attrs:{id:"bug-fixes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("fix click icon triggering dropdown (#21314 by @dennyak47)")]),n("li",[e._v("fix keydown event when composition (#21336 by @bchen1029)")])])]),n("li",[e._v("Badge\n"),n("ul",[n("li",[e._v("fix type class when is-dot (#21308 by @adaex)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("validate method reject error info (#21374 by @cs1707)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("fix resizeObserver loop limit exceeded (#21255 by @tomieric)")]),n("li",[e._v("fix toggleAllSelection bug when table is empty (#21456 by @cs1707)")]),n("li",[e._v("optimize performance (#21330 by @cs1707)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("fix disabled priority (#21375 by @cs1707)")])])]),n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("fix label slot bug (#21462 by @cs1707)")])])]),n("li",[e._v("SASS\n"),n("ul",[n("li",[e._v("replace node-sass with dart-sass (#21019 by @linxsbox)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("fix skeleton typos (#21408 by @zhhbstudio)")])])])]),n("h3",{attrs:{id:"2-15-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.6")]),n("p",[n("em",[e._v("2021-09-02")])]),n("h4",{attrs:{id:"bug-fixes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("fix a bug that makes the browser jitter in zoom mode (#21207 by @cs1707)")]),n("li",[e._v("optimize performance (#21231 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("fix long text overflow in multiple mode (#21237 by @cs1707)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("add disabled property (#21235 by @mshioda)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("fix checked state when browser go back (#21250 by @cs1707)")])])]),n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("fix type declaration (#21265 by @adaex)")]),n("li",[e._v("avoid table style conflict (#21254 by @adaex)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("fix append to body (#21264 by @cs1707)")])])]),n("li",[e._v("Local\n"),n("ul",[n("li",[e._v("fix italian mistake (#21012 by @ricardotondello)")])])])]),n("h3",{attrs:{id:"2-15-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.5")]),n("p",[n("em",[e._v("2021-08-04")])]),n("h4",{attrs:{id:"bug-fixes-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("fix resetInputHeight (#21201 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.4")]),n("p",[n("em",[e._v("2021-08-03")])]),n("h4",{attrs:{id:"new-features"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Descriptions\n"),n("ul",[n("li",[e._v("add description component (#21129 by @cs1707)")])])]),n("li",[e._v("Result\n"),n("ul",[n("li",[e._v("add result component (#21171 by @cs1707)")])])])]),n("h4",{attrs:{id:"bug-fixes-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("fix isScroll (#21098 by @canvascat)")])])]),n("li",[e._v("Translation\n"),n("ul",[n("li",[e._v("update it.js (#21133 by @bliberi)")])])]),n("li",[e._v("RadioGroup\n"),n("ul",[n("li",[e._v("fix RadioGroup used in component causes exception #17908 (#20783 by @lceric)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("fix message[type] (#21088 by @cs1707)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("reset the timer when setActiveItem method is called (#20846 by @Nekojita1)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("fix emitPath (#21185 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("fix select filterable bug (#17494 by @profore)")]),n("li",[e._v("fix a bug that makes the browser jitter in zoom mode (#21197 by @cs1707)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("fix insertChild (#21194 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.3")]),n("p",[n("em",[e._v("2021-06-29")])]),n("h4",{attrs:{id:"new-features-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Skeleton\n"),n("ul",[n("li",[e._v("add skeleton component (#21038 by @cs1707)")])])]),n("li",[e._v("Empty\n"),n("ul",[n("li",[e._v("add empty component (#21080 by @cs1707)")])])])]),n("h4",{attrs:{id:"bug-fixes-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Local\n"),n("ul",[n("li",[e._v("fix week translations for hr locale (#21040 by @cs1707)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("fix lazy load data (#21041 by @cs1707)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("fix form hide-required-asterisk description (#21045 by @cs1707)")])])]),n("li",[e._v("Drawer:\n"),n("ul",[n("li",[e._v("fix destroy (#20715 by @zj9495)")])])]),n("li",[e._v("Row\n"),n("ul",[n("li",[e._v("fix align top (#20963 by @cs1707)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("fix the bug when the value is Boolean (#21052 by @cs1707)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("fix first-day-of-week (#21057 by @cs1707)")])])]),n("li",[e._v("Utils\n"),n("ul",[n("li",[e._v("fix isScroll (#21065 by @cs1707)")]),n("li",[e._v("fix(utils.dom by @fw6)")])])]),n("li",[e._v("TypeScript\n"),n("ul",[n("li",[e._v("add CascaderPanel export type (#21070 by @qige2016)")]),n("li",[e._v("add spinner.d.ts (#21090 by @qige2016)")])])])]),n("h3",{attrs:{id:"2-15-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.2")]),n("p",[n("em",[e._v("2021-05-28")])]),n("h4",{attrs:{id:"bug-fixes-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("fix z-index and keydown event add stopPropagation (#20859 by @cs1707)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("fix show password cursor (#20870 by @cs1707)")]),n("li",[e._v("fix show password icon in edge (#20902 by @cs1707)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("fix interval and scale bug (#20931 by @cs1707)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("fix delete tag bug (#20939 by @cs1707)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("add overflow auto (#20948 by @cs1707)")])])]),n("li",[e._v("Others\n"),n("ul",[n("li",[e._v("fix isFunction (#20912 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-15-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.1")]),n("p",[n("em",[e._v("2021-02-23")])]),n("h4",{attrs:{id:"bug-fixes-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("bugfix (by @cs1707)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("fix incorrect image object fit ratio in IE (#19583 by @charlie0228)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("fix cascader panel active path (#20730 by @cs1707)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("fix calendar component i18n bug (#20758 by @iamkun)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("fix bugs (by @UxieVerity)")])])])]),n("h4",{attrs:{id:"optimization-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("update Axure resource v2.1.0 (by @iamkun)")])])])]),n("h3",{attrs:{id:"2-15-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-15-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.15.0")]),n("p",[n("em",[e._v("2021-01-15")])]),n("h4",{attrs:{id:"bug-fixes-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix placeholder i18n bug (#17644 by @nzh63)")])])]),n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("Popconfirm i18n bug by @iamkun")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("Fix focus bug (#20626 by @cs1707)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Preview optimization (#20652 by @cs1707)")])])])]),n("h4",{attrs:{id:"optimization-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Fix typo in french translation of datetime-picker.md (#20543 by @lonk)")]),n("li",[e._v("Add format attribute description to the progress component (#20641 by @cs1707)")])])])]),n("h3",{attrs:{id:"2-14-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-14-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.14.1")]),n("p",[n("em",[e._v("2020-11-11")])]),n("h4",{attrs:{id:"bug-fixes-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Compatible with Vue 2.6 new v-slot syntax (#20424 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update Arabic translation (#20202 by @elkattan)")]),n("li",[e._v("Update Uighur translation (#20177 by @IlhamTahir)")])])])]),n("h3",{attrs:{id:"2-14-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-14-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.14.0")]),n("p",[n("em",[e._v("2020-10-29")])]),n("h4",{attrs:{id:"breaking-changes"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("Rename event name to "),n("code",[e._v("confirm")]),e._v(", "),n("code",[e._v("cancel")]),e._v(" (#20240 by @hugiron)")])])])]),n("h4",{attrs:{id:"bug-fixes-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Fix attribute error (#19985 by @Caaalabash)")])])])]),n("h4",{attrs:{id:"optimization-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update Russian translation (#19451 by @yangirov)")]),n("li",[e._v("Update Khmer translation (#20077 by @Sovai)")]),n("li",[e._v("Update Ukrainian translation (#20344 by @MammutAlex)")])])])]),n("h3",{attrs:{id:"2-13-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.2")]),n("p",[n("em",[e._v("2020-05-18")])]),n("h4",{attrs:{id:"bug-fixes-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix change event bug (#19200 by @sxzz)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Update error status (#19194 by @lhx6538665)")])])])]),n("h4",{attrs:{id:"optimization-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update ru-RU popconfirm translation (#19220 by @Opppex)")]),n("li",[e._v("Update vi translation (#19244 by @quangln2810)")]),n("li",[e._v("Update Catalan and Spanish translations (#19296 by @Ismaaa)")]),n("li",[e._v("Update Indonesia translation (#19320) by @therour)")]),n("li",[e._v("Update Brazilian Portuguese translation (#19374 by @diegomengarda)")])])])]),n("h3",{attrs:{id:"2-13-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.1")]),n("p",[n("em",[e._v("2020-04-13")])]),n("h4",{attrs:{id:"new-features-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Add change event (#17913 by @sxzz)")])])])]),n("h4",{attrs:{id:"bug-fixes-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Fix suggestion error when textarea (#18478 by @Roojay)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Fix console typo bug (#18264 by @IceFox)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Fix preview dose not show when preview list not contain src issue (#18975) (#19130 by @luckyCao)")]),n("li",[e._v("Fix shortcut key not work at second time issue (#18983) (#19156 by @luckyCao)")]),n("li",[e._v("Don't show image-viewer when preview is false (#18967 by @inooNgt)")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Fix incorrect line-height of el-transfer's first list item when it was used with  el-form-item (#18917 by @Hanx)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Correctly compute inputNumberDisabled (#18439 by @ashuser-pendo)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Remove index intro (#19155 by @iamkun)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Popconfirm doc update (#18324 by @iamkun)")]),n("li",[e._v("Fix step-strictly docs typo (#18705 by @dream2023)")]),n("li",[e._v("Fix a type error in document of steps component (#17555 by @haoranyu)")])])])]),n("h3",{attrs:{id:"2-13-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-13-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.13.0")]),n("p",[n("em",[e._v("2019-11-26")])]),n("h4",{attrs:{id:"new-features-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Popconfirm\n"),n("ul",[n("li",[e._v("Add popconfirm component (#17548 by @iamkun)")])])])]),n("h4",{attrs:{id:"bug-fixes-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("BackTop\n"),n("ul",[n("li",[e._v("Use cubic bezier scrolling (by @lon)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Fix bug of only select min date of date range problem (#17191 by @smk0621)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix select test cases (by @msidolphin)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Add font-size for the style of tree empty-text (#17094 by @spengjie)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Column header can be costumed (#17291 by @ziyoung)")]),n("li",[e._v("Update table header cell style (#17284 by @ziyoung)")]),n("li",[e._v("Fix table header height after filter (#17348 by @ziyoung)")]),n("li",[e._v("Fixed row-style with display not work (#17002 by @a631807682)")]),n("li",[e._v("Fix header table not display (#17341 by @ziyoung)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Import el-button and el-button-group (#17376 by @masongzhi)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix icon position error (#17410 by @nullptru)")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Set the selection range after scrolling up or down (#16868 by @mattheyan)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Fix close instace offsetHeight（#17564） (#17852 by @gzwgq222)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Callback of validateField should be optional (#17314 by @CarterLi)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Fix TypeScript 3.7 compatibility (#17881 by @CarterLi)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fix router NavigationDuplicated error when using vue-router@^3.1.0 (#17269 by @iamkun)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Update type file (#17550 by @iamkun)")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Add strokeLinecap prop (#17552 by @iamkun)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Skip trigger event on invisible element (#17553 by @iamkun)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Perfect picture preview behavior (#16985 by @luckyCao)")]),n("li",[e._v("Fix shield the page when preview big image (#16796 by @luckyCao)")])])]),n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("Bugfix drawer-append-to-body-not-working (#16953 by @JeremyWuuuuu)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix tag show value or empty issue (17199 by @luckyCao)")])])]),n("li",[e._v("Scrollbar\n"),n("ul",[n("li",[e._v("Fix FireFox scroll bar width (#18091 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update sv-SE.js (#17926 by @FOLLGAD)")]),n("li",[e._v("Update avatar component fr doc (#17762 by @blombard)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix time-select typo (#17250 by @wacky6)")]),n("li",[e._v("Fix Drawer attribute accepted value typo in es (#17122 by @haoranyu)")]),n("li",[e._v("Update Spanish changelog 2.12.0 (#17364 by @Gonzalo2310)")]),n("li",[e._v("Fix Changelog typo (#17874 by @renlixin)")]),n("li",[e._v("Fix Loading demo (#17862 by @MBearo)")]),n("li",[e._v("Add input event in input Events Table (#18061 by @zhouxinyong)")]),n("li",[e._v("Delete Input repeat change event (#18085 by @zhouxinyong)")])])])]),n("h3",{attrs:{id:"2-12-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-12-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.12.0")]),n("p",[n("em",[e._v("2019-08-29")])]),n("h4",{attrs:{id:"new-features-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Add close-delay prop (#16671 by @LachlanStuart)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Add Chrome Extension: Element Theme Extension (#16686 by @iamkun)")])])]),n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Add font-display to @font-face declaration (#16805 by @iamfaizalandyka)")])])])]),n("h4",{attrs:{id:"bug-fixes-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Fix onChange emit value (#16705 by @iamkun)")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Fix modifying incoming option object (#16704 by @iamkun)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Add className for picker option (#16632 by @iamkun)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Fix time-spinner not scroll to right position (#16854 by @jesse-li)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Prevent click handler after drag (#16850 by @ziyoung)")]),n("li",[e._v("Fix chrome crash when set thead css display to none (#16956 by @luckyCao)")]),n("li",[e._v("Fix wrong empty block height (#16861 by @ziyoung)")]),n("li",[e._v("Not throw error when calling toggleExpansion (#16304 by @yyjjqq94)")]),n("li",[e._v("Not trigger sort-change event when mounted (#17113 by @a631807682)")]),n("li",[e._v("Fix setCurrentRow unable to clear highlight row (#16879 by @ziyoung)")]),n("li",[e._v("Fix expand-row-keys not work when data is loaded asynchronously (#16899 by @ziyoung)")]),n("li",[e._v("set toggleAllSelection as instance property (#17137 by @ziyoung)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Fix distance between label and checkbox (#16799 by @Hazlank)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Fix incorrect TabItem's position (#16520 by @victorting)")]),n("li",[e._v("Fix activated tab is out of visual range bug (#17033 by @nullptru)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Fix weekdays i18n issue (#16772 by @ubitoffee)")]),n("li",[e._v("fix locale error by (#17208 by @iamkun)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Fix CascaderPanel display error (#16716 by @zhangHongEn)")]),n("li",[e._v("Fix disable status and close button issue (#16224 by @yyjjqq94)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Fix Korean composition event (#15069 by @MoonHyuk)")]),n("li",[e._v("Fix click event of clear button not trigger when using v-loading (#16576 by @a631807682)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Not toggle dropdown when filtering (#17205 by @luckyCao)")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Fix style error  (#17206 by @iamkun)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("update sass var (#16365 by @haoranyu)")])])]),n("li",[e._v("RadioGroup\n"),n("ul",[n("li",[e._v('Not produce invalid HTML in table if "is" attribute is specify (#17070 by @nullptru)')])])]),n("li",[e._v("Divider\n"),n("ul",[n("li",[e._v("Support custom classes (#17078 by @island205)")])])])]),n("h4",{attrs:{id:"optimization-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Improve screen reader experience (#16575 by @tylertrotter)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Update changelog (#16773 by @SimonaliaChen)")]),n("li",[e._v("Update contributing guide (#14800 by @sinchang)")]),n("li",[e._v("Fix typo in Drawer docs (#16848 by @winkay)")]),n("li",[e._v("Update custom theme (#16983 by @iamkun)")]),n("li",[e._v("Add Esperanto translation (#16955 by @maxkoryukov)")]),n("li",[e._v("Update input-number document about change event (#16316 by @luckyCao)")]),n("li",[e._v("Update spanish doc 2.11.1 (#16961 by @Gonzalo2310)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Remove translation of 'year' in catalan language as in the other languages (#14722 by @oscaralbareda)")]),n("li",[e._v("Update spanish changelog 2.10.0 and 2.10.1 (#16548 by @Gonzalo2310)")]),n("li",[e._v("Update ar.js (#16653 by @l3op)")])])]),n("li",[e._v("Test\n"),n("ul",[n("li",[e._v("Correct spelling error (#16672 by @boomler)")]),n("li",[e._v("Refactor unit test to use data-uri (#16847 by @a631807682)")])])]),n("li",[e._v("Types\n"),n("ul",[n("li",[e._v("Fix httprequest type (#16633 by @luckyCao)")])])])]),n("h3",{attrs:{id:"2-11-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-11-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.11.1")]),n("p",[n("em",[e._v("2019-07-26")])]),n("h4",{attrs:{id:"bug-fixes-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Fix Image component SSR compatibility (#16737 by @luckyCao)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update dart-sass compatibility (#16744 by @LewisChennnnn)")])])])]),n("h3",{attrs:{id:"2-11-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-11-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.11.0")]),n("p",[n("em",[e._v("2019-07-25")])]),n("h4",{attrs:{id:"new-features-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("Drawer\n"),n("ul",[n("li",[e._v("Add drawer component (#16577 by @JeremyWuuuuu)")])])])]),n("h4",{attrs:{id:"bug-fixes-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Enhance css selector (#16006 by @Hazlank)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Make el-tree generic (#15934 by @JeremyWuuuuu)")]),n("li",[e._v("Set isCurrent prop to False (#15870 by @kkkisme)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Fix split-button caret default color (#15931 by @JuniorTour)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Fix level 1 children is empty update problem (#16399 by @luckyCao)")]),n("li",[e._v("Add sets default values when lazy is true (#16420 by @luckyCao)")]),n("li",[e._v("Fix display errors when node value is duplicate (#15935 by @junyiz)")]),n("li",[e._v("Expose getCheckedNodes and fix options change bug (#16709 by @SimonaliaChen)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Display correct header when range is specified (#16354 by @ziyoung)")])])]),n("li",[e._v("Submenu\n"),n("ul",[n("li",[e._v("Fix prop append-to-body (#16289 by @a631807682)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix tree table when updating data (#16481 by @island205)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix memory leak issue (#16463 by @island205)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Update naming & doc (#16698 by @iamkun)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("Fix image not center vertically issue (#16489 by @luckyCao)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Add destroyOnClose attribute (#16455 by @ziyoung)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Add big Image preview feature (#16333 by @luckyCao)")])])])]),n("h4",{attrs:{id:"optimization-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix dropdown demo (#16193 by @webxmsj)")]),n("li",[e._v("Fix typo in table documents (#15971 by @howiefh)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update translation of Thai language (#16689 by @ponkrit)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update theme base api (#16607 by @iamkun)")]),n("li",[e._v("Add form theme token (#16699 by @iamkun)")]),n("li",[e._v("Mark ali inner user's access (#16609 by @iamkun)")]),n("li",[e._v("Fix doc anchor bug (#16692 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-10-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-10-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.10.1")]),n("p",[n("em",[e._v("2019-07-02")])]),n("h4",{attrs:{id:"bug-fixes-20"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-20","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix sort icon (#15439 by @bezany)")]),n("li",[e._v("Fix layout breaks when append slot exists (#16332 by @ziyoung)")]),n("li",[e._v("Fix showOverflowTooltip not reactive (#16295 by @a631807682)")]),n("li",[e._v("Register scrollbar in filter-panel (#16246 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Fix 2.9 docs (#16233 by @ziyoung)")]),n("li",[e._v("Fix index page theme intro english css style issue (#16254 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Compatible with IE (#16334 by @ziyoung)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update Dingtalk Group QR image (#16236 by @iamkun)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Update online theme roller doc (#16244 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-10-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-10-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.10.0")]),n("p",[n("em",[e._v("2019-06-25")])]),n("h4",{attrs:{id:"new-features-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#new-features-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" New features")]),n("ul",[n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Added Uzbek language (#15796 by @ogabek96)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Add first-day-of-week attribute (#16047 by @ziyoung)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("Add avatar component (#16144 by @luckyCao)")])])]),n("li",[e._v("Upload:\n"),n("ul",[n("li",[e._v("Add capability to customize thumbnail template (#13192 by @victorzhuk)")])])])]),n("h4",{attrs:{id:"bug-fixes-21"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#bug-fixes-21","aria-hidden":"true"}},[e._v("¶")]),e._v(" Bug fixes")]),n("ul",[n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Not highlight tree node when currentKey is null (#15668 by @yyjjqq94)")]),n("li",[e._v("Fix issue #15538 caused by two Tree sharing the same data. (#15615 by @VanMess)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Update the parameter "),n("code",[e._v("fileList")]),e._v(" type (#15716 by @underfin)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix loading icon not display (#15868 by @ziyoung)")]),n("li",[e._v("Fix background color of complex table when hovering (#15504 by @cnlon)")]),n("li",[e._v("Fix current-row-key and select event bug (#15983 by @ziyoung)")]),n("li",[e._v("Height accepts more units (#16013 by @ziyoung)")]),n("li",[e._v("Fix reserve-selection not work (#16135 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Fix Divider attribute type in zh-cn (#15889 by @haoranyu)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Fixed submenu hidden bug after adding popper-append-to-body (#15391 by @PanJiaChen)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Fix initialInputHeight (#15989 by @yyjjqq94)")]),n("li",[e._v("Fix default-first-option behavior when typing Chinese (#15431 by @VanMess)")]),n("li",[e._v("fix double import problem (#16215 by @lengband)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Add type def for offset option (#16027 by @matjaz)")])])]),n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Fix reverse broken (#16091 by @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v('Fix #15545 by adding explains about "input" event in Chinese (#15588 by @VanMess)')])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Update package name (#16125 by @iamkun)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Fix  distinguishCancelAndClose action not same as docs bug (#15438 by @qingdengyue)")])])]),n("li",[e._v("PopupManager\n"),n("ul",[n("li",[e._v("Fix z-index cannot be rewritten at first using (#15738 by @luckyCao)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Delete an incorrect closing html tag and empty block code (#16194 by @Alexeykhr)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Update test api host (#15807 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimization-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimization-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimization")]),n("ul",[n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Modify loop conditions to improve performance (#15699 by @KingJeason)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Refine GA track & Update footer link forward to online theme roller (#16007 by @island205)")])])]),n("li",[e._v("Badge\n"),n("ul",[n("li",[e._v("Update badge prop check (#16198 by @iamkun)")])])]),n("li",[e._v("Avatar\n"),n("ul",[n("li",[e._v("Update theme config var (#16202 by @luckyCao)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Update pt-br.js (#15776 by @gigioSouza)")]),n("li",[e._v("Update Farsi translation (#15881 by @pamenary)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Add missing components in quickstart (#16063 by @pape2016)")]),n("li",[e._v("Update french translation (#16208 by @blombard)")]),n("li",[e._v("Add description $slots.default (#15444 by @Alexeykhr)")]),n("li",[e._v("Update Spanish Doc 2.9.1 (#15840 by @Gonzalo2310)")]),n("li",[e._v("Fix spelling mistakes in fr (#15837 by @blombard)")]),n("li",[e._v("Update changelog 2.9.2 Spanish (#16185 by @Gonzalo2310)")])])])]),n("h4",{attrs:{id:"breaking-changes-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Remove success status (#16159 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-9-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.2")]),n("p",[n("em",[e._v("2019-06-21")])]),n("h4",{attrs:{id:"correction-de-bugs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#correction-de-bugs","aria-hidden":"true"}},[e._v("¶")]),e._v(" Correction de bugs")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Correction du fichier de définitions TS (#15805 by @NateScarlet)")])])])]),n("h3",{attrs:{id:"2-9-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.1")]),n("p",[n("em",[e._v("2019-05-30")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("les événements tree-props，default-expand-all, expand-row-keys, toggle-row-expansion method and expand-change sont pris en charge dans Tree Table (#15709 by @ziyoung)")])])])]),n("h4",{attrs:{id:"correction-de-bugs-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#correction-de-bugs-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Correction de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction de quelques bugs (#15709 by @ziyoung)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Mise à jour de l'hôte api (#15784 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour de InfiniteScroll type (#15794 by @iamkun)")])])])]),n("h3",{attrs:{id:"2-9-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-9-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.9.0")]),n("p",[n("em",[e._v("2019-05-30")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Backtop\n"),n("ul",[n("li",[e._v("Ajout du composant Backtop (#15541 by @iamkun)")])])]),n("li",[e._v("PageHeader\n"),n("ul",[n("li",[e._v("Ajout du composant PageHeader (#15714 by @ziyoung)")])])]),n("li",[e._v("InfiniteScroll\n"),n("ul",[n("li",[e._v("Ajout de la directive InfiniteScroll (#15567 by @iamkun)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Ajouter plusieurs mode et filter-method (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Affichage en mode pile (#15639 by @island205)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajout d'un effet de prop (#15725 by @SimonaliaChen)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Aligner le titre à gauche lorsque le type est carte (#15695 by @luckyCao)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Supporte les chaînes de caractères littérales (#15525 by island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Ajout du support pour les attributs de transmission et listeners (#15578 by @VanMess)")])])]),n("li",[e._v("Theme\n"),n("ul",[n("li",[e._v("Ajout d'un popup en arrière plan (#15412 by @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour de la nouvelle page d'index 2.9.0 (#15682 by @iamkun)")])])])]),n("h4",{attrs:{id:"correction-de-bugs-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#correction-de-bugs-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Correction de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction du comportement de sort-change lorsque la condition de tri est nulle (#15012 by @joelxr)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Correction de la compatibilité ssr et object-fit (#15346 by @SimonaliaChen)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction du style de show-word-count dans el-form (#15359 by @lvjiaxuan)")]),n("li",[e._v("Correction de l'icône d'erreur pas centrée (#15354 by @YiiGuxing)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Correction du mauvais jour de la semaine quand le jour est dimanche (#15399 by @qingdengyue)")]),n("li",[e._v("Correction du bug de disparition d'octobre (#15394 by @qingdengyue)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction de l'onglet de base imbriqué dans l'erreur de remplissage de card (#15461 by @SimonaliaChen)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Correction du problème de propagation d'arrêt (#15150 by @infjer)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction de input-group dans l'erreur de hauteur de form-item (#15457 by @SimonaliaChen)")]),n("li",[e._v("Résolution de l'issue de resetFields (15181 by @luckyCao)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Correction de tabindex personnalisé ne fonctionnant pas (#15619 by @SimonaliaChen )")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("Correction de la classe de style d'icône (#15752 by @iamkun)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Revert définit la valeur à null une fois effacée (#15447 by @iamkun)")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Résolution du problème de mise à jour de dom lorsque l'état de chargement change rapidement (#15123 by @FAKER-A)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Label avec les événements récurrents el-switch (#15178 by @FAKER-A)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction d'un problème de style lorsque la barre de défilement est cliquée (#15561 by @luckyCao)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Résolution de l'issue 14808 (#14809 by @OverTree)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Résolution du problème de resetFields (15181 by @luckyCao)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour des dépendances et corrige le bug de démonstration (#15324 by ziyoung)")])])]),n("li",[e._v("Type\n"),n("ul",[n("li",[e._v("Correction du type de chargement (#15635 by @iamkun)")]),n("li",[e._v("Correction du type d'icône (#15634 by @iamkun)")]),n("li",[e._v("Fixe la définition du type de lien (#15402 by @iamkun)")])])])]),n("h4",{attrs:{id:"optimisation-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Refactor (#15611 by @SimonaliaChen)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour de la logique du nouveau composant (by @iamkun)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Renommage de variables dans la documentation (#15185 by @liupl)")]),n("li",[e._v("Correction du type d'attribut d'image et de la valeur par défaut (#15423 by @haoranyu)")]),n("li",[e._v("Correction d'un bug de formulaire (#15228 by @SHERlocked93)")])])])]),n("h3",{attrs:{id:"2-8-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.2")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"corrections-de-bugs"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Mise à jour (#15272 par @iamkun)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction du style de Form et Input (#15273 par @ziyoung)")])])])]),n("h3",{attrs:{id:"2-8-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.1")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"corrections-de-bugs-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Mise à jour de l'icône du cascadeur et du select (#15264 par @SimonaliaChen)")]),n("li",[e._v("Mise à jour (#15258 #15268 par @iamkun)")])])])]),n("h4",{attrs:{id:"optimisation-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour du script de build (#15267 par @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction de la couleur de souslignage d'un lien (#15265 par @iamkun)")])])]),n("li",[e._v("Autre\n"),n("ul",[n("li",[e._v("Correction d'une configuration de migration non compatible avec les propriétés et évènements en camelCase (#15260 par @SimonaliaChen)")])])])]),n("h3",{attrs:{id:"2-8-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-8-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.8.0")]),n("p",[n("em",[e._v("2019-04-25")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Divider\n"),n("ul",[n("li",[e._v("Ajout du composant divider (#15055 par @island205)")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Ajout des couleurs et des classes d'icônes personnalisées en passant un objet (#15051 par @SimonaliaChen)")])])]),n("li",[e._v("Link\n"),n("ul",[n("li",[e._v("Ajout du composant Link (#15052 par @iamkun)")])])]),n("li",[e._v("Calendar\n"),n("ul",[n("li",[e._v("Ajout du composant calendar (#14908 by @ziyoung)")])])]),n("li",[e._v("Icon\n"),n("ul",[n("li",[e._v("Ajout d'une icône (#15214 par @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Ajout d'un thème sombre (#15041 par @island205)")])])]),n("li",[e._v("Image\n"),n("ul",[n("li",[e._v("Ajout du composant image (#15117 par @SimonaliaChen)")])])]),n("li",[e._v("Collapse\n"),n("ul",[n("li",[e._v("CollapseItem peut être désactivé (#15076 par @ziyoung)")])])]),n("li",[e._v("Carousel\n"),n("ul",[n("li",[e._v("Ajout d'un attribut de direction et support de la direction verticale (#15122 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Ajout d'un attribut caché sur une seule page (#15096 par @ziyoung)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Ajout des marqueurs (#15133 par @luckyCao)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de l'attribut show-word-count (#15075 par @luckyCao)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Ajout de l'attribut step-strictly (#15050 par @luckyCao)")])])]),n("li",[e._v("Tooltip, Dropdown, Popover\n"),n("ul",[n("li",[e._v("Support de l'attribut tabindex (#15167 by @ziyoung)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Correction du word-break du titre (#15008 par @iamkun)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction d'une erreur dans les règles de validation (#14985 par @luckyCao)")]),n("li",[e._v("Correction du style du label (#14969 par @ziyoung)")]),n("li",[e._v("Les FormItem requis affiche un astérisque lorsque le label est auto (#15144 by @ziyoung)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Fix du slot non mis à jour (#14711 par @lucyhao)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un bug de chargement en mode lazy (#15101 by @ziyoung)")]),n("li",[e._v("Correction de la largeur des cellules lorsque colspan est supérieur à 1 (#15196 by @ziyoung)")]),n("li",[e._v("Amélioration des performances (#14868 by @ziyoung)")]),n("li",[e._v("Ne pas émettre de déclencheurs de changement de tri pendant l'initialisation (#14625 by @PeanutWatson)")]),n("li",[e._v("Comportement égal pour height et max-height (#14660 by @arthurdenner)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Correction de la casse des longs mots (#15027 par @iamkun)")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Mise à jour (#15186 par @ziyoung)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction d'un problème où le rejet d'une promesse touchait l'application (#14816 par @ffxsam)")]),n("li",[e._v("Rerendu lors d'un changement de slots (#1523238 by @ziyoung)")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Mise à jour (#14968 par @agoni121212)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Correction d'une erreur lorsque la valeur est indéfinie ou nulle (#15022 par @luckyCao)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Détruire le noeud courant après sa suppression (#14604 par @sinchang)")]),n("li",[e._v("Amélioration des performances (#14881 par @ChenZhuoSteve)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Correction de style (#14907 par @doing123)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction d'un bug clavier a11y cassé (#14792 by @erezsob)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("La valeur ActiveIndex sera nulle si defaultIndex n'existe pas (#14074 par @hoythan)")])])]),n("li",[e._v("Directive\n"),n("ul",[n("li",[e._v("RepeatClick : utilisation de Date.now() au lieu de Date() (#14776 par @pavelmash)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction du style d'affichage des images transparentes (#15039 par @iamkun)")])])]),n("li",[e._v("Thème\n"),n("ul",[n("li",[e._v("Ajout d'une bordure (#1525256 par @iamkun)")])])])]),n("h4",{attrs:{id:"optimisation-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Mise à jour du changelog zh-cn (#14965 par @iamkun)")]),n("li",[e._v("Masquer la description de la démo quand elle est vide (#15014 par @ziyoung)")]),n("li",[e._v("Afficher les informations du serveur de développement par défaut par @iamkun)")]),n("li",[e._v("Correction d'une erreur de changelog 2.6.0 (#15026 par @iamkun)")]),n("li",[e._v("Mise à jour de la configuration de compilation (#14821 par @abc3660170)")]),n("li",[e._v("Ajout d'hmr (#15221 par @SimonaliaChen)")]),n("li",[e._v("Utilisation de sourcemap dans l'environnement dev (#15087 par @ibufu)\nDocs")]),n("li",[e._v("Renommage de la variable dans docs (#14602 #15003 #15094 #15105 par @liupl)")]),n("li",[e._v("Correction d'une erreur de téléchargement de doc (#15023 par @iamkun)")]),n("li",[e._v("Mise à jour du validateur de formulaire personnalisé doc (#15040 par @iamkun)")]),n("li",[e._v("Mise à jour des onglets docs pour afficher les onglets verticaux (#15053 par @iamkun)")]),n("li",[e._v("Utiliser eleme.cn comme domaine (#15139 par @ziyoung)")]),n("li",[e._v("Correction du nom de route Image (#15194 par @iamkun)")]),n("li",[e._v("Suppression de la traduction en double (#15207 par @iamkun)")])])])]),n("h4",{attrs:{id:"breaking-changes-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Correction du support de l'affichage décimal en mode désactivé (#15089 par @haoranyu)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Utiliser le label de l'option pour régler le placeholder en mode filtre (#14989 par @ibufu)")])])])]),n("h3",{attrs:{id:"2-7-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.2")]),n("p",[n("em",[e._v("2019-04-03")])]),n("h4",{attrs:{id:"corrections-de-bugs-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction du style de "),n("code",[e._v("label-width")]),e._v(" auto (#14955 par @ziyoung)")])])])]),n("h4",{attrs:{id:"optimisation-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction d'une erreur de lien img (#14957 par @iamkun)")])])]),n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Correction d'une erreur de déploiement mkdir (#14952 par @iamkun)")])])])]),n("h3",{attrs:{id:"2-7-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.1")]),n("p",[n("em",[e._v("2019-04-03")])]),n("h4",{attrs:{id:"corrections-de-bugs-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Définir la valeur à null lorsqu'elle est effacée (#14322 par @aaronfulkerson)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Mise à jour des valeurs dépendantes du DOM lors d'un changement de type (#14889 par @wacky6)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Faire fonctionner `defaultExpandAll' lorsqu'une colonne étendue existe (#14935 par @ziyoung)")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Couleur d'arrière-plan configurable (#14939 par @ziyoung)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[n("code",[e._v("label-width")]),e._v(" supporte la largeur automatique (#14944 by @ziyoung)")])])])]),n("h4",{attrs:{id:"optimisation-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation en espagnol (#14913 par @Gonzalo2310)")]),n("li",[e._v("Ajout d'un document en français pour le nouveau composant (#14924 by @ziyoung)")]),n("li",[e._v("Optimiser la documentation des onglets (#14938 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-7-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-7-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.7.0")]),n("p",[n("em",[e._v("2019-03-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout du support de l'arborescence des données (#14632 by @ziyoung)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Utilise la couleur primaire comme couleur de l'ombre (#14558 par @Richard-Choooou)")]),n("li",[e._v("Rerendu lorsque label change (#14496 par @akki-jat)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Le pied de page suit l'alignement des cellules du corps (#14730 by @ziyoung)")])])]),n("li",[e._v("NavMenu\n"),n("ul",[n("li",[e._v("Correction d'un bug de clic sur el-submenu (#14443 par @PanJiaChen)")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Compatible avec la nouvelle syntaxe v-slot 2.6 (#14832 by @ziyoung)")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Correction d'une erreur de couleur hexadécimale (#14793 par @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Revert pr #13349 (#14847 par @ziyoung)")])])]),n("li",[e._v("Tooltip\n"),n("ul",[n("li",[e._v("Affichage lorsque la valeur initiale est vraie (#14826 by @ziyoung)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation du cascader (#14442 par @panhezeng)")])])]),n("li",[e._v("Style\n"),n("ul",[n("li",[e._v("Correction des media queries dans sm-only, md-only, lg-only (#14611 by @sinchang)")])])])]),n("h4",{attrs:{id:"optimisation-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Chore\n"),n("ul",[n("li",[e._v("Ajouter la description de la page web (#14802 par @iamkun)")])])])]),n("h3",{attrs:{id:"2-6-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.3")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h4",{attrs:{id:"corrections-de-bugs-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction du style de la démo de Cascader (#14789 par @ziyoung)")]),n("li",[e._v("Suppression des opérations DOM inutiles (#14788 by @ziyoung)")]),n("li",[e._v("Correction DatePicker valeur par défaut DST (#14562 par @wacky6)")])]),n("h3",{attrs:{id:"2-6-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.2")]),n("p",[n("em",[e._v("2019-03-21")])]),n("h5",{attrs:{id:"nouvelles-fonctionnalites-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout d'une plage de mois pour l'attribut type (#14487 par @zxyRealm)")])])]),n("li",[e._v("i18n\n"),n("ul",[n("li",[e._v("Ajout de la locale croate (#14360 par @danijelh)")])])])]),n("h5",{attrs:{id:"corrections-de-bugs-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction d'un régression (#14572 par @wacky6)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction du calcul du premier jour de la semaine (#14523 par @sinchang)")]),n("li",[e._v("Correction du format de valeur du sélecteur de semaine (#13754 par @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Correction du problème #14502 (#14596 par @sinchang)")]),n("li",[e._v("Correction du style avec le thème simple (#14610 par @sinchang)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Mise à jour de la doc française pour la 2.6.1 et correction de fautes de frappe (#1455555 par @smalesys)")]),n("li",[e._v("Renommage d'une variable dans la documentation de la table (#14587 par @likwotsing)")]),n("li",[e._v("Ajout de l'index de recherche en français (#14565 par @iamkun)")]),n("li",[e._v("Correction du style de la page TimePicker (#14579 par @ziyoung)")]),n("li",[e._v("Renommage d'une variable dans la page Upload (#14593 par @liupl)")]),n("li",[e._v("Mise à jour de la traduction française (#14643 par @smalesys)")]),n("li",[e._v("Mise à jour de la documentation du validateur de formulaire asynchrone (#14694 par @iamkun)")]),n("li",[e._v("Correction d'une erreur de doc tooltip (#14748 par @iamkun)")]),n("li",[e._v("Correction d'une coquille (#14751 par @2bj)")]),n("li",[e._v("Correction de la surbrillance pour Webkit touch (#14703 by @VladG0r)")])])])]),n("h5",{attrs:{id:"optimisation-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Tâche\n"),n("ul",[n("li",[e._v("Mise à jour du script de build dans le ci (#14600 par @ziyoung)")]),n("li",[e._v("Mise à jour du tracking ga (#14560 par @iamkun)")]),n("li",[e._v("Ajout d'un événement ga supplémentaire (#14633 par @iamkun)")]),n("li",[e._v("Mise à jour du groupe de discussion (#14741 par @iamkun)")]),n("li",[e._v("Mise à jour des deps de test et conf (#14735 par @wacky6)")]),n("li",[e._v("Mise à jour de Gulp (#14745 by @ziyoung)")]),n("li",[e._v("Utilisez le codepen pour afficher les démos et correction d'une erreur de doc (#14747 by @ziyoung)")])])])]),n("h3",{attrs:{id:"2-6-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.1")]),n("p",[n("em",[e._v("2019-03-03")])]),n("h4",{attrs:{id:"corrections-de-bugs-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[n("strong",[e._v("Ne pas spécifier la version de node")]),e._v(" (par @iamkun dans #14546)")]),n("li",[e._v("Correction du répertoire doc dans "),n("code",[e._v("deloy-faas.sh")]),e._v(" (par @ziyoung dans #14553)")]),n("li",[e._v("Correction d'un problème de style de date dans le changelog de la 2.6.0 (par @island205 dans #14547)")]),n("li",[e._v("Correction d'une typo dans la doc (par @wack6 dans #14552)")])]),n("h3",{attrs:{id:"2-6-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-6-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.6.0")]),n("p",[n("em",[e._v("2019-03-01")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Timeline\n"),n("ul",[n("li",[e._v("Ajout d'un composant timeline (par @jikkai dans #14248)")])])]),n("li",[e._v("DropdownItem\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("icon")]),e._v(" à "),n("code",[e._v("el-dropdown-item")]),e._v(" (par @gabrielboliveira dans #14088)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de propriétés pour afficher les mots de passe (par @phshy0607 dans #13966)")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout du slot "),n("code",[e._v("empty")]),e._v(" (par @elfman au #13785)")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de la propriété "),n("code",[e._v("highlight-first-item")]),e._v(" (par @YamenSharaf dans #14269)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Création de la locale Arménienne (par @hamletbarsamyan dans #14214)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Traduction française (par @smalesys dans #12153, #14418, #14434)")])])])]),n("h4",{attrs:{id:"optimisation-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Mise à jour de la classe du slot par défaut de la description de Alert (par @iamkun dans #14488)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Mise à jour de l'input de type password (par @iamkun dans #14480)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Retrait d'un parseFloat inutile (par @JuniorTour au #14172)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout du support de "),n("code",[e._v("el-menu-item")]),e._v(" sans index (par @georgyfarniev dans #13298)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de certaines opérations du DOM (par @elfman dans #13643)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Optimisation du code (par @elfman dans #13973)")])])]),n("li",[e._v("Popup\n"),n("ul",[n("li",[e._v("Optimisation du code (par @KAionro dans #14413)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Ajout de détails sur la façon d'exécuter le mode play pour les contributeurs (par @island205 dans #14355)")]),n("li",[e._v("Ajout d'un avertissement concernant Input (par @wacky6 dans #14463)")]),n("li",[e._v("Mise à jour de la doc de Table (par @luguokong dans #14329)")]),n("li",[e._v("Mise à jour de la doc d'Input (par @iamkun dans #14437)")]),n("li",[e._v("Mise à jour de la doc sur le thème (par @wangguohaohao dans #14297)")]),n("li",[e._v("Le style de l'icône change lorsque vous passez dessus (par @tuxinghuan dans #14295)")])])]),n("li",[e._v("Build\n"),n("ul",[n("li",[e._v("Minification du CSS et du JS pour le site d'Element (par @iamkun dans #14430)")]),n("li",[e._v("Accélération de webpack (par @hetech dans #14484)")]),n("li",[e._v("Utilisation du cli pour sélectionner la version de publication (par @hetech dans #14354)")])])]),n("li",[e._v("Installation de stale pour la gestion des issues (par @island205 dans #14392)")])]),n("h4",{attrs:{id:"corrections-de-bugs-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Correction d'un bug de focus des sous-menus lors du changement d'onglet du navigateur (par @liupl dans #13976)")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la définition du type (par @NateScarlet dans #14278)")])])]),n("li",[e._v("ScrollBar\n"),n("ul",[n("li",[e._v("Empêche le clic droit sur le bouton du pouce (par @xifeiwu dans #14196)")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Déclenchement de la validation du formulaire si la valeur change (par @hetech dans #14426)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode toggleAllSelection est maintenant une méthode d'instance (par @letanure dans #14075)")])])]),n("li",[e._v("Tabs & Dropdown\n"),n("ul",[n("li",[e._v("Correction du style (par @hetech dans #14452)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Les tips sont différents des tableaux (par @ColinCll dans #14331)")])])]),n("li",[e._v("Docs\n"),n("ul",[n("li",[e._v("Correction d'une erreur de doc du DatetimePicker (par @iamkun dans #14290)")]),n("li",[e._v("Problème d'orthographe dans la documentation du DatePicker (par @helmut dans #14481)")]),n("li",[e._v("Correction du style de la doc de Pagination(par @liuchuzhang dans #14451)")])])])]),n("h4",{attrs:{id:"breaking-changes-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Fix params order of row events (by @jikkai in #12086)")])])])]),n("h3",{attrs:{id:"2-5-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.4")]),n("p",[n("em",[e._v("2019-02-01")])]),n("h4",{attrs:{id:"corrections-de-bugs-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build: Correction d'un problème de configuration de babel qui cassait la transition collapse (par @island205 dans #14282)")])]),n("h3",{attrs:{id:"2-5-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.3")]),n("p",[n("em",[e._v("2019-01-31")])]),n("h4",{attrs:{id:"optimisation-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Optimisation du code de Message (par @vok123 dans #14029)")]),n("li",[e._v("Suppression des gh-pages (par @ziyoung dans #14266)")]),n("li",[e._v("Ajout du lien IssueHunt (par @island205 dans #14261)")])]),n("h4",{attrs:{id:"corrections-de-bugs-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'une erreur du module UMD côté serveur (par @island205 dans #14242)")]),n("li",[e._v("Correction du style du TabBar actif (par @iamkun dans #14240)")]),n("li",[e._v("Correction d'une erreur de code dans la démo de Table (par @xunmeng dans #14253)")])]),n("h3",{attrs:{id:"2-5-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.2")]),n("p",[n("em",[e._v("2019-01-27")])]),n("h4",{attrs:{id:"optimisation-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Docs:\n"),n("ul",[n("li",[e._v("Mise à jour du ChangeLog ES 2.5.1 (par @Gonzalo2310 dans #14231)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Build:\n"),n("ul",[n("li",[e._v("Suppression des commentaires non supprimés dans le module umd "),n("code",[e._v("lib/index.js")]),e._v(" (par @island205 dans #14233)")]),n("li",[e._v("Correction d'une erreur d'exportation dans le module commonjs utilisé dans nuxt.js (par @island205 dans #14232)")]),n("li",[e._v("Correction des problèmes de build 2.5.1 (par @iamkun dans #14228)")])])])]),n("h3",{attrs:{id:"2-5-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.1")]),n("p",[n("em",[e._v("2019-01-26")])]),n("h4",{attrs:{id:"optimisation-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("DatePicker: surbrillance du mois et de l'année courants (par @Debiancc dans #14211)")]),n("li",[e._v("Mise à jour du changelog 2.5.0 (par @wacky6 dans #14217)")])]),n("h4",{attrs:{id:"corrections-de-bugs-14"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-14","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Correction d'un problème d'exportation due par la mise à jour du webpack (par @island205 dans #14220)")]),n("li",[e._v("Conservation de la docs 2.4.11 && nouveau sous-dossier pour 2.5+ (par @iamkun dans #14222)")])]),n("h3",{attrs:{id:"2-5-0"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-5-0","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.5.0")]),n("p",[n("em",[e._v("2019-01-25")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validate-event")]),e._v(" (par @ziyoung dans #13531)")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[n("code",[e._v("pickerOptions")]),e._v(" supporte l'option "),n("code",[e._v("selectableRange")]),e._v(" (par @eeeeeeeeeeeason)")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("click")]),e._v(" (par @licdream dans #14106)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Support de la langue kirghize (par @zzjframework dans #14174)")])])])]),n("h4",{attrs:{id:"optimisation-13"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#optimisation-13","aria-hidden":"true"}},[e._v("¶")]),e._v(" Optimisation")]),n("ul",[n("li",[e._v("Mise à niveau vers webpack@4 (par @jikkai dans #14173)")]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Simplification de l'implémentation, suivant un flux de données à sens unique. Correction de plusieurs bugs liés. (par @wacky6 dans #13471)")])])]),n("li",[e._v("Mise à jour du fichier Axure avec de nouveaux composants (par @ziyoung dans #13773)")])]),n("h4",{attrs:{id:"corrections-de-bugs-15"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-15","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de la dernière ligne du menu déroulant qui était coupée (#13597) (par @ziyoung)")]),n("li",[e._v("Correction d'une flèche de popper manquante (#13762) (par @liuchuzhang)")])])]),n("li",[e._v("Carrousel\n"),n("ul",[n("li",[e._v("Nettoyage du timer lorsque le composant est détruit (#13820) (par @elfman)")])])]),n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Suppression de la propriété obsolète des props calculées (#13737) (par @iamkun)")]),n("li",[e._v("Correction de la définition du type CascaderOption dans TypeScript (#13613) (par @NateScarlet)")]),n("li",[e._v("Correction de l'icône couvrant le texte (#13596) (par @ziyoung)")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Refonte du style (par @PanJiaChen)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout d'un "),n("code",[e._v("key")]),e._v(" de v-for manquant dans TimeSpinner (#13547) (par @Ende93)")]),n("li",[e._v("Correction du surlignage de la semaine dans la bordure de l'année (#13883) (par @suyi91)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction de la référence de textarea dans le DOM (#13803) (par @laomu1988 @island205)")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("La valeur d'entrée ne sera pas inférieure à 1 (#13727) (par @elfman)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction d'un problème de popover avec le déclencheur de hover (#13104) (par @goldengecko)")]),n("li",[e._v("Correction d'une fuite de mémoire de l'instance popper (#13988) (par @qpxtWhite)")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Refonte du style (par @ohhhoney1)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Amélioration du tri des tables en cliquant sur la flèche de tri (#12890) (par @ohhoney1)")]),n("li",[e._v("Correction d'un problème d'alignement vertical du texte vide sur IE10+ (#13638) (par @imzjy)")]),n("li",[e._v("Correction de la documentation sur le type d'index (#13628) (par @ilovefafafa)")]),n("li",[e._v("Correction du problème d'affichage "),n("code",[e._v("show-summary")]),e._v(" lorsque le header multi-niveaux est fixe (#13914) (par @luckyCao)")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Correction d'un bug de défilement automatique (#13696) (par @iamkun)")]),n("li",[e._v("Obtenir l'onglet correct par le nom de l'onglet (#13705) (par @iamkun)")]),n("li",[e._v("Utilisez paneName au lieu de name pour déterminer le style du panneau (#13733) (par @iamkun)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Correction de la propriété "),n("code",[e._v("showCheckbox")]),e._v(" sur "),n("code",[e._v("Tree")]),e._v(" qui ne pouvait pas affecter leurs "),n("code",[e._v("tree-node")]),e._v(" enfants(par @KidneyFlower)")]),n("li",[e._v("Mise à jour des fichiers de doc et de définition (#13540) (par @ziyoung)")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout de le propriété "),n("code",[e._v("url")]),e._v(" au fichier uploadé lorsque "),n("code",[e._v("list-type")]),e._v(" est modifié (#13771) (par @elfman)")])])]),n("li",[e._v("Slider\n"),n("ul",[n("li",[e._v("Correction de l'indentation du code source (#13955) (par @wacky6)")])])]),n("li",[e._v("I18n\n"),n("ul",[n("li",[e._v("Ajout des traductions manquantes en catalan (par @jaumesala)")]),n("li",[e._v("Ajout de la traduction russe manquante (#13658) (par @justlp)")]),n("li",[e._v("Correction des traductions en finnois (#14137) (par @jenkrisu)")])])]),n("li",[e._v("Doc\n"),n("ul",[n("li",[e._v("Mise à jour de la documentation espagnol depuis la 2.4.11 (#13522) (par @Gonzalo2310)")])])]),n("li",[e._v("Autres\n"),n("ul",[n("li",[e._v("Suppression d'un script inutile (par @ziyoung)")]),n("li",[e._v("Correction des ancres (#13753) (par @iamkun)")]),n("li",[e._v("Correction de l'incohérence des majuscules dans la documentation (par @wonderjar)")]),n("li",[e._v("Ajout du QR code du chat DingDing au readme (#13957) (par @iamkun)")]),n("li",[e._v("Ajout des logs yarn au .gitignore (#13922) (par @mimimi)")]),n("li",[e._v("Suppression du sponsor duotai (#14156) (par @island205)")]),n("li",[e._v("Mise à jour du QR code dans le readme (#13960) (par @iamkun)")]),n("li",[e._v("Mise à jour du lien CDN, correction d'une typo (par @ziyoung)")])])])]),n("h3",{attrs:{id:"2-4-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.11")]),n("p",[n("em",[e._v("2018-11-21")])]),n("ul",[n("li",[e._v("Revert pr #13296. Correction d'un clic sur Menu externe causant l'effondrement du SubMenu, #13478")]),n("li",[e._v("Ajustement des points de rupture media query sur petit écran (xs), #13468 (par @alekoshen712)")])]),n("h3",{attrs:{id:"2-4-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.10")]),n("p",[n("em",[e._v("2018-11-16")])]),n("ul",[n("li",[e._v("Correction des clics multiples sur Select pour afficher la liste déroulante, #13268")]),n("li",[e._v("L'icône d'effacement des champs n'est pas affichée lorsque Form est désactivé, #13208")]),n("li",[e._v("Ajustement des styles de Select, Progress, Autocomplete, Tooltip, Collaspe, TimePicker, #13188 (par @porcelainHeart) #13210 #13266 #13266 #13257 #13290 #13347 (par @PanJiaChen)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("loop")]),e._v(" dans le composant Carrousel, #13217")]),n("li",[e._v("Lorsque les données de Table changent, la ligne en surbrillance reste, #13200")]),n("li",[e._v("Le slot du header de Table peut recevoir des paramètres, #13263")]),n("li",[e._v("La méthode "),n("code",[e._v("clearFilter")]),e._v(" de Table peut recevoir des arguments, #13176")]),n("li",[e._v("La bulle d'aide n'est plus créée lorsqu'il n'y a pas de contenu dans la cellule de Table, #13152 (par @rongxingsun)")]),n("li",[e._v("Le contenu de la zone de saisie du panneau ColorPicker peut être affiché correctement, #13278")]),n("li",[e._v("ColorPicker ne déclenche plus la validation des formulaires lors du glisser-déposer, #13299")]),n("li",[e._v("InputNumber: ajout de la méthode "),n("code",[e._v("select")]),e._v(", #13286 (par @st-sloth)")]),n("li",[e._v("AutoComplete: ajout de l'événement "),n("code",[e._v("clear")]),e._v(", #12171(par arthurdenner) #13326")]),n("li",[e._v("Vous pouvez fermer Menu en cliquant à l'extérieur, #13296")]),n("li",[e._v("La méthode "),n("code",[e._v("validateField")]),e._v(" du formulaire peut recevoir des arguments, #13319")]),n("li",[e._v("Cascader: ajout de l'événement "),n("code",[e._v("visible-change")]),e._v(", #13415")]),n("li",[e._v("DatePicker: a ajout d'un slot pour les séparateurs d'intervalle, #13272 (par @milworm)")]),n("li",[e._v("Tree: ajout des propriétés "),n("code",[e._v("iconClass")]),e._v(" et "),n("code",[e._v("currentNodeKey")]),e._v(", #13337 #13197 (par @isnifer)")]),n("li",[e._v("Progress: ajout du texte de statut #13198 (par @ali-master)")]),n("li",[e._v("Correction de "),n("code",[e._v("defaultCheckedKeys")]),e._v(" de Tree, #13349 (par @dive2Pro)")])]),n("h3",{attrs:{id:"2-4-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.9")]),n("p",[n("em",[e._v("2018-10-26")])]),n("ul",[n("li",[e._v("Le paramètre "),n("code",[e._v("clearValidate")]),e._v(" de Form supporte les strings #12990 (par @codinglobster)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("type")]),e._v(" pour Badge, #12991")]),n("li",[e._v("Les utilisateurs peuvent utiliser scoped-slot pour personnaliser l'en-tête de colonne de Table #13012 (par @ivanseidel)")]),n("li",[e._v("Correction du champ de Select incapable d'entrer du texte sous IE, #13034 (par @GaliMU)")]),n("li",[e._v("Les options Select ne s'enroule pas lorsque l'espace est suffisant, #12329 (par @akki-jat)")]),n("li",[e._v("Lorsque la liste déroulante de Select est ouverte, l'icône de la flèche s'affichera également correctement, #12353 (par @firesh)")]),n("li",[e._v("Correction de l'attribut de taille de Select qui ne fonctionnait pas, #13070")]),n("li",[e._v("La sélection de plusieurs valeurs peut aussi être effacée, #13049 (par @ZSkycat)")]),n("li",[e._v("Correction du dernier TabNav qui ne pouvait pas être supprimé, #13039")]),n("li",[e._v("Correction d'un problème d'affichage du label TabNav, #13178")]),n("li",[e._v("Ajout d'un slot de titre pour Alert, #13082 (par @Kingwl)")]),n("li",[e._v("Correction d'un problème où le contenu de l'infobulle de Table était incorrect, #13159 (par @elfman)")]),n("li",[e._v("Optimisation de l'animation de Upload lorsque le fichier est supprimé, #12987")]),n("li",[e._v("Style ajusté pour InputNumber lorsque le bouton de commande n'est pas affiché, #13052")])]),n("h3",{attrs:{id:"2-4-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.8")]),n("ul",[n("li",[e._v("Ne pas afficher le contour lorsque le Switch est focus, #12771")]),n("li",[e._v("Correction du style de Dropdown dans ButtonGroup, #12819 (par @bluejfox)")]),n("li",[e._v("Ajout d'un événement d'ouverture pour Dialog, #12828")]),n("li",[e._v("Correction de l'ordre d'affichage incorrect de TabNav, #12846")]),n("li",[e._v("Correction d'un problème qui empêchait les Tabs de défiler jusqu'à l'onglet sélectionné, #12948")]),n("li",[e._v("Correction d'un problème de l'identificateur qui ne s'affiche pas lorsque le noeud de Tree est glissé, #12854")]),n("li",[e._v("Le paramètre de l'événement validation du formulaire contient le message de validation #12860 (par @YamenSharaf).")]),n("li",[e._v("Correction de DatePicker pour ne pas vérifier la validité du temps d'entrée de l'utilisateur, #12898")]),n("li",[e._v("Correction d'un problème avec l'attribut "),n("code",[e._v("render-header")]),e._v(" de l'en-tête de table qui ne fonctionnait pas, #12914")])]),n("h3",{attrs:{id:"2-4-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.7")]),n("p",[n("em",[e._v("2018-09-14")])]),n("ul",[n("li",[e._v("Correction de DatePicker ne déclenchant pas la validation du formulaire, #12328 #12348")]),n("li",[e._v("Correction des erreurs lancées par DatePicker en mode multiple, #12347")]),n("li",[e._v("Correction d'une position incorrecte du spinner de DatePicker, #12415 (par @rang-ali)")]),n("li",[e._v("Correction du remplissage automatique de la zone de saisie de DatePicker, #12521 (par @abdallanayer)")]),n("li",[e._v("Correction du champ non-subrillant dans Cascader, #12341")]),n("li",[e._v("Correction d'un mauvais ordre de Tabpane, #12346")]),n("li",[e._v("Correction d'une position incorrecte du curseur ColorPicker, #12376 (par @cnwhy)")]),n("li",[e._v("Correction du style de SubMenu, #2457")]),n("li",[e._v("Correction de la surbrillance après la sélection de SubMenu, #12479")]),n("li",[e._v("Correction des valeurs incorrectes sélectionnées par Cascader, #12508 (par @huangjinqiang)")]),n("li",[e._v("Correction d'une valeur incorrecte dans le champ d'entrée Pagination, #12525")]),n("li",[e._v("Correction de l'ordre dans lequel la Pagination déclenche les événements, #12530")]),n("li",[e._v("Correction des filtres de table non-affichés, #12539")]),n("li",[e._v("Correction de l'arbre incapable de supprimer des nœuds, #12684")]),n("li",[e._v("Correction de la hauteur de Select Input changeant en mode simple, #12719")]),n("li",[e._v("Correction d'un style du label de FormItem sous forme imbriquée, #12748")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("autocomplete")]),e._v(" pour Input, "),n("code",[e._v("auto-complete")]),e._v(" devenant obsolète, #12514 (par @axetroy)")]),n("li",[e._v("Ajout des slots-scope pour Form pour afficher les informations de validation, #12715 (par @YamenSharaf)")])]),n("h3",{attrs:{id:"2-4-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.6")]),n("p",[n("em",[e._v("2018-08-09")])]),n("ul",[n("li",[e._v("Correction de Table n'affichant pas l'icône de filtre lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #12165")]),n("li",[e._v("Correction de Menu ne sauvegardant pas l'état actif lorsque "),n("code",[e._v("collapse")]),e._v(" change, #12178 (par @elfman)")]),n("li",[e._v("Correction du Cascader n'échappant pas les caractères spéciaux poue les Regexp, #12248")]),n("li",[e._v("Correction d'un bouton Radio désactivé affichant l'ombre d'une case lorsqu'on clique dessus, #12262")]),n("li",[e._v("Correction de arrow key qui n'a pas d'effet lorsque la valeur par défaut est "),n("code",[e._v("undefined")]),e._v(", #12322")]),n("li",[e._v("Correction de la fonction de requête de Select non-stabilisée en mode multi, #12181")]),n("li",[e._v("Correction du mot-clé de la requête Select disparaissant en mode multi, #12304")]),n("li",[e._v("Correction d'une largeur incorrecte de Dialog lorsqu'il est affiché en plein écran, #12203")]),n("li",[e._v("Correction de l'affichage incorrect de Main sur IE, #12237")]),n("li",[e._v("Correction de Input déclenchant deux validations de formulaire, #12260")]),n("li",[e._v("Correction de l'ajout d'un nouveau nœud d'arborescence provoquant la disparition des nœuds, #12256")]),n("li",[e._v("Correction d'un nœud d'arborescence non supprimé après avoir glissé, #12279")]),n("li",[e._v("Correction du Popover non-visible quand InputNumber a le focus, #12284")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour Autocomplete, #12241")]),n("li",[e._v("Ajout du support du modificateur "),n("code",[e._v("sync")]),e._v(" pour l'attribut "),n("code",[e._v("page-size")]),e._v(" de Pagination, #12281")])]),n("h3",{attrs:{id:"2-4-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.5")]),n("p",[n("em",[e._v("2018-07-26")])]),n("ul",[n("li",[e._v("Correction du réglage de Table "),n("code",[e._v("class-name")]),e._v(" qui ne fonctionne pas pour les colonnes "),n("code",[e._v("expand")]),e._v(", #12006")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleAllSelection")]),e._v(" pour Table, #12047")]),n("li",[e._v("Correction d'une mauvaise position du slot de suffixe lorsque Input contient Select, #12108")]),n("li",[e._v("Correction de "),n("code",[e._v("line-height")]),e._v(" de l'option impossible à régler, #12120")]),n("li",[e._v("Correction de TimeSelect avec la valeur par défaut "),n("code",[e._v("null")]),e._v(" ne pouvant être assigné après avoir exécuté "),n("code",[e._v("resetField")]),e._v(", #12010")]),n("li",[e._v("Correction d'un événement keydown qui n'étant pas arrow key ne fonctionne pas dans Tree, #12008")]),n("li",[e._v("Correction d'un nœud parent vérifié en mode lazy, #12106")]),n("li",[e._v("Ajout du paramètre "),n("code",[e._v("includeHalfChecked")]),e._v(" pour getCheckedNodes de Tree, #12014")])]),n("h3",{attrs:{id:"2-4-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.4")]),n("p",[n("em",[e._v("2018-07-13")])]),n("ul",[n("li",[e._v("Correction du déclenchement de la validation de Select après la réinitialisation du formulaire, #11837")]),n("li",[e._v("Correction d'une mauvaise position du slot "),n("code",[e._v("suffix")]),e._v(" de Input lorsque le slot "),n("code",[e._v("suffixe")]),e._v(" est avec le slot "),n("code",[e._v("append")]),e._v(", #11951")]),n("li",[e._v("Correction de Input affichant toujours l'icône clear même en lecture seule, #11967")]),n("li",[e._v("Correction d'un nœud d'arborescence coché lorsqu'il est désactivé, #11847")]),n("li",[e._v("Correction des "),n("code",[e._v("default-checked-keys")]),e._v(" qui ne fonctionnait pas, #11971")]),n("li",[e._v("Correction de "),n("code",[e._v("empty-text")]),e._v(" non visible lorsque le noeud de Tree est filtré, #11971")]),n("li",[e._v("Correction de la position du "),n("code",[e._v("empty-text")]),e._v(" surdimensionné dans Table, #11965")]),n("li",[e._v("Correction de la surbrillance de la ligne de Table lorsque "),n("code",[e._v("current-row-key")]),e._v(" est assignée à "),n("code",[e._v("null")]),e._v(", #11866")]),n("li",[e._v("Correction de l'affichage de la liste déroulante des filtres lorsque "),n("code",[e._v("filters")]),e._v(" est un tableau vide, #11864")]),n("li",[e._v("Correction du label de Radio qui n'arrête pas la propagation des événements, #11912")])]),n("h3",{attrs:{id:"2-4-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.3")]),n("p",[n("em",[e._v("2018-07-03")])]),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("allow-drop")]),e._v(" qui ne fonctionnait pas correctement lorsque les nœuds de Tree avaient une hauteur personnalisée, #11797")]),n("li",[e._v("Maintenant vous pouvez passer un paramètre à la méthode "),n("code",[e._v("clearValidate")]),e._v(" du formulaire, en spécifiant quels résultats de validation FormItems doivent être effacés, #11821")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" pour MessageBox, #11831")])]),n("h3",{attrs:{id:"2-4-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.2")]),n("p",[n("em",[e._v("2018-06-26")])]),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("class-name")]),e._v(" et "),n("code",[e._v("label-class-name")]),e._v(" de Table sont réactifs, #11626")]),n("li",[e._v("Correction de Table qui mettait toujours en surbrillance la ligne cliquée lorsque "),n("code",[e._v("highlight-current-row")]),e._v(" était "),n("code",[e._v("false")]),e._v(", #11646")]),n("li",[e._v("Correction d'un bug de style de ButtonGroup lorsqu'il n'a qu'un seul bouton "),n("code",[e._v("round")]),e._v(" ou "),n("code",[e._v("circle")]),e._v(", #11605")]),n("li",[e._v("Correction du style du Select de Pagination, #11622")]),n("li",[e._v("Correction de la méthode "),n("code",[e._v("open")]),e._v(" du menu quand "),n("code",[e._v("collapse")]),e._v(" est dynamiquement changé, #11646")]),n("li",[e._v("Ajout des paramètres "),n("code",[e._v("activeName")]),e._v(" et "),n("code",[e._v("oldActiveName")]),e._v(" au hook before-leave de Tabs, #11713")]),n("li",[e._v("Correction de Cascader ayant le focus après avoir cliqué à l'extérieur, #11588")]),n("li",[e._v("Correction de Cascader ne se fermant pas quand l'option est cliquée quand "),n("code",[e._v("change-on-select")]),e._v(" est "),n("code",[e._v("true")]),e._v(", #11623")]),n("li",[e._v("La mise à jour programmatique de la valeur de Select déclenchera la validation du formulaire, #11672")])]),n("h3",{attrs:{id:"2-4-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.1")]),n("p",[n("em",[e._v("2018-06-08")])]),n("ul",[n("li",[e._v("Suppression du duplicata de la déclaration de type pour Autocomplete, #11388")]),n("li",[e._v("Correction du style de flèche déroulante de Select dans FireFox lorsqu'il est imbriqué dans Form, #11427")]),n("li",[e._v("Correction de l'icône de l'option de Select qui s'affiche toujours lorsque la valeur initiale est "),n("code",[e._v("null")]),e._v(", #11460")]),n("li",[e._v("Correction d'un Radio désactivé affichant l'ombre de la boîte quand on clique dessus, #11462")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("iconClass")]),e._v(" pour MessageBox, #11499")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("stretch")]),e._v(" pour Tabs, #11476")]),n("li",[e._v("Correction d'un problème d'ordre de rendu de TabPane lorsque Tabs est "),n("code",[e._v("lazy")]),e._v(", #11461")]),n("li",[e._v("Correction de Table ne conservant pas la surbrillance de la ligne actuelle lors de son ouverture, #11464")]),n("li",[e._v("Correction de l'état de la mise au point lorsque "),n("code",[e._v("before-leave")]),e._v(" renvoie une promesse résolue, #11386")]),n("li",[e._v("Correction de la désactivation du Popover qui créait encore des poppers, #11426")]),n("li",[e._v("Correction de la boucle sans fin de Tree lorsqu'un nouveau noeud est ajouté en mode lazy, #11430 (par @wangjingf)")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("closed")]),e._v(" pour Dialog, #11490")])]),n("h3",{attrs:{id:"2-4-0-fullerene"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-4-0-fullerene","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.4.0 Fullerene")]),n("p",[n("em",[e._v("2018-05-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("L'outil de développement et le bundler sont basculés vers le webpack natif, #11216")]),n("li",[e._v("Vous pouvez maintenant définir globalement l'index z initial des popups, #11257")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("hide-loading")]),e._v(", #11260")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("size")]),e._v(" sur les boutons circulaires pour contrôler leur taille, #11275")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("precision")]),e._v(", #11281")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("before-leave")]),e._v(", #11259")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("lazy")]),e._v(", #11167（by @Kingwl）")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("sort")]),e._v(" pour trier manuellement la table, #11311")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-16"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-16","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Correction d'un problème qui provoquait un re-rendu lors de l'utilisation de l'IME chinois pour saisir rapidement du texte, #11235 (par @STLighter)")])])]),n("li",[e._v("Popover\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsque l'élément déclencheur est Radio ou Checkbox, #11265")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("to")]),e._v(" ne supportant pas la mise à jour dynamique, #11286")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'erreur de console lorsqu'un fichier est résolu dans la promesse retournée de la méthode "),n("code",[e._v("beforeUpload")]),e._v(", #11297 (par @qusiba)")])])]),n("li",[e._v("Infobulle\n"),n("ul",[n("li",[e._v("Correction d'une flèche mal positionnée lorsque le contenu est vide, #11335")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Correction de suggestions d'entrée incorrectes après la suppression rapide d'un mot-clé, #11323")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("active-change")]),e._v(" se déclenchant incorrectement lorsque le menu déroulant du picker est fermé, #11304")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style du panneau de filtre surdimensionné, #11314")]),n("li",[e._v("Correction de la ligne actuellement sélectionnée qui n'était pas conservée lors du tri de la table, #11348")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Correction d'une checkbox unique ne supportant pas la validation, #11271")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Correction du Radio désactivé quand même sélectionné en appuyant sur la touche espace, #11303")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Correction de la classe "),n("code",[e._v("el-popup-parent-hidden")]),e._v(" qui n'était pas supprimée à l'ouverture successive de MessageBox, #11371")])])])]),n("h3",{attrs:{id:"2-3-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.9")]),n("p",[n("em",[e._v("2018-05-18")])]),n("ul",[n("li",[e._v("Correction d'une erreur lorsque les données source n'ont pas le champ spécifié par l'attribut "),n("code",[e._v("prop")]),e._v(" d'une TableColumn, lorsque la souris se déplace dans les cellules de cette colonne, #11137")]),n("li",[e._v("L'attribut "),n("code",[e._v("lockScroll")]),e._v(" des composants popup n'ajoute plus un style en ligne à l'élément parent, mais ajoute un nom de classe, #1111114")]),n("li",[e._v("Correction de l'icône de Progression qui ne s'affichait pas quand son "),n("code",[e._v("status")]),e._v(" était une exception, #11172")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("désactivé")]),e._v(" qui ne fonctionnait pas dans la liste des résultats de filtrage du Cascader filtrable, #11185")]),n("li",[e._v("Correction d'un problème où la ligne étendue de la table ne peut pas être réduite si la source de données est mise à jour après son extension, #11186")]),n("li",[n("code",[e._v("setCurrentKey")]),e._v(" de Tree accepte maintenant "),n("code",[e._v("null")]),e._v(" comme paramètre pour annuler le noeud actuellement mis en surbrillance, #11205")])]),n("h3",{attrs:{id:"2-3-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.8")]),n("p",[n("em",[e._v("2018-05-11")])]),n("ul",[n("li",[e._v("Correction du saut du panneau DatePicker au mois courant après avoir choisi une date dans un mois non courant quand "),n("code",[e._v("type")]),e._v(" est dates, #10973")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement en lecture seule, #10912")]),n("li",[e._v("Correction de la fermeture du panneau DatePicker sans changer la valeur déclenchant incorrectement l'événement "),n("code",[e._v("change")]),e._v(", #11017")]),n("li",[e._v("Correction d'un problème de navigation du clavier lorsque Select a regroupé les options, #11058")]),n("li",[e._v("Ajout du slot nommé "),n("code",[e._v("préfixe")]),e._v(" pour Select, #11063")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour FormItem, #11076")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("checkOnClickNode")]),e._v(" pour Tree, #1111111")])]),n("h3",{attrs:{id:"2-3-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.7")]),n("p",[n("em",[e._v("2018-04-29")])]),n("ul",[n("li",[e._v("Correction d'une table qui ne mettait pas à jour ses largeurs de headers lorsque la barre de défilement disparaissait à cause du filtrage, #10834")]),n("li",[e._v("Correction de l'Input effaçable affichant toujours l'icône d'effacement lorsque sa valeur initiale est "),n("code",[e._v("null")]),e._v(", #10912")]),n("li",[e._v("Correction d'un déclencheur incorrect de l'événement "),n("code",[e._v("active-change")]),e._v(" après avoir changé la valeur liée de ColorPicker par programmation, #10903 (par @zhangbobell)")]),n("li",[e._v("Correction du Select filtrable qui provoquait une boucle infinie lors de la navigation dans les options à l'aide du clavier si toutes les options sont désactivées, #10945")])]),n("h3",{attrs:{id:"2-3-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.6")]),n("p",[n("em",[e._v("2018-04-21")])]),n("ul",[n("li",[e._v("Correction d'un comportement incorrect du callback "),n("code",[e._v("allow-drop")]),e._v(" de Tree lorsque le paramètre "),n("code",[e._v("type")]),e._v(" est utilisé, #10821")]),n("li",[e._v("Maintenant vous pouvez entrer correctement les mots-clés dans le Select simple filtrable dans IE11, #10822")]),n("li",[e._v("Correction d'un Select simple déclenchant incorrectement un événement "),n("code",[e._v("blur")]),e._v(" après avoir cliqué sur une option, #10822")])]),n("h3",{attrs:{id:"2-3-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.5")]),n("p",[n("em",[e._v("2018-04-20")])]),n("ul",[n("li",[e._v("Correction d'une surbrillance incorrecte dans le panneau DatePicker lorsque "),n("code",[e._v("type")]),e._v(" est la semaine, #10712")]),n("li",[e._v("Correction d'un InputNumber vide lorsque sa valeur initiale est 0, #10714")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("automatic-dropdown")]),e._v(" pour Select, #10042 (par @Seebiscuit)")]),n("li",[e._v("Correction de Rate désactivé quand même mis à jour par les touches de navigation, #10726 (par @Richard-Choooou)")]),n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" de DatePicker peut être "),n("code",[e._v("dates")]),e._v(", où vous pouvez choisir plusieurs dates dans un sélecteur, #10650 (par @Mini256)")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("prev-click")]),e._v(" et "),n("code",[e._v("next-click")]),e._v(" pour Pagination, #10755")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("pager-count")]),e._v(" pour Pagination, #10493 (par @chongjohn716)")]),n("li",[e._v("Ajout de "),n("code",[e._v("type")]),e._v(" comme 3ème paramètre de l'attribut "),n("code",[e._v("allow-drop")]),e._v(" de Tree, #10792")]),n("li",[e._v("Nous utilisons maintenant ResizeObserver pour détecter le redimensionnement des éléments DOM, #10779")])]),n("h3",{attrs:{id:"2-3-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.4")]),n("p",[n("em",[e._v("2018-04-12")])]),n("ul",[n("li",[e._v("Suppression du double de l'attribut "),n("code",[e._v("showTimeout")]),e._v(" dans la déclaration TypeScript de SubMenu, #10566 (par @kimond)")]),n("li",[e._v("Vous pouvez maintenant personnaliser les éléments de Transfert en utilisant le scoped slot, #10577")]),n("li",[e._v("Correction d'un clic sur le bouton précédent désactivé et le bouton suivant de la pagination déclenchant toujours l'événement "),n("code",[e._v("current-current-change")]),e._v(", #10628")]),n("li",[e._v("Correction de Textarea affichant "),n("code",[e._v("undefined")]),e._v(" dans le SSR lorsque sa valeur n'est pas définie, #10630")]),n("li",[e._v("Correction de la désactivation du style TabItem lorsque "),n("code",[e._v("type")]),e._v(" est border-card, #10640")]),n("li",[e._v("Ajout de "),n("code",[e._v("$index")]),e._v(" comme quatrième paramètre du "),n("code",[e._v("formatter")]),e._v(" de la Table, #10645")]),n("li",[e._v("Correction de CheckboxButton non exporté dans la déclaration TypeScript, #10666")])]),n("h3",{attrs:{id:"2-3-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.3")]),n("p",[n("em",[e._v("2018-04-04")])]),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("shadow")]),e._v(" pour Card, #10418 (par @YunYouJun)")]),n("li",[e._v("Correction de Badge masqué lorsque "),n("code",[e._v("value")]),e._v(" est "),n("code",[e._v("0")]),e._v(", #10470")]),n("li",[e._v("Correction de quelques bugs de Tree, #10474 #10494")]),n("li",[e._v("Ajout de "),n("code",[e._v("placement")]),e._v(" pour Autocomplete, #10475")]),n("li",[e._v("L'attribut "),n("code",[e._v("default-time")]),e._v(" fonctionne également dans DateTimePicker, #10321 (par @RickMacTurk)")]),n("li",[e._v("Suppression du contour bleu de TabItem après que le navigateur n'ait plus le focus ou soit minimisé, #10503")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(" pour SubMenu, #10515")]),n("li",[e._v("Suppression du feedback visuel lors du survol d'un élément BreadcrumbItem non lié, #10551")]),n("li",[e._v("Correction de l'événement "),n("code",[e._v("change")]),e._v(" d'InputNumber pour s'assurer que la valeur liée du composant est mise à jour dans le gestionnaire d'événements, #10553")])]),n("h3",{attrs:{id:"2-3-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.2")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression d'Autocomplete, #10442")])]),n("h3",{attrs:{id:"2-3-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.1")]),n("p",[n("em",[e._v("2018-03-29")])]),n("ul",[n("li",[e._v("Correction d'une régression de "),n("code",[e._v("type")]),e._v(" d'Inputqui n'était pas transmis à l'élément natif, #10415")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(" pour Select, #10416")])]),n("h4",{attrs:{id:"2-3-0-diamant"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-3-0-diamant","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.3.0 Diamant")]),n("p",[n("em",[e._v("2018-03-28")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant le "),n("code",[e._v("formatter")]),e._v(" de TableColumn peut être mis à jour dynamiquement, #10184 (par @elfman)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("select-on-indeterminate")]),e._v(", #9924 (par @syn-zeta)")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-transition")]),e._v(", #8809 (par @limichange)")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("select")]),e._v(", #10229")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("blur")]),e._v(", #10356")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("predefine")]),e._v(", #10170 (par @elfman)")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("draggable")]),e._v(", "),n("code",[e._v("allow-drop")]),e._v(" et "),n("code",[e._v("allow-drag")]),e._v(", et "),n("code",[e._v("node-drag-start")]),e._v(", "),n("code",[e._v("node-drag-enter")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-leave")]),e._v(", "),n("code",[e._v("node-drag-over")]),e._v(", "),n("code",[e._v("node-drag-end")]),e._v(" et "),n("code",[e._v("node-drop")]),e._v(", #9251 #10372 (par @elfman)")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" a maintenant un deuxième paramètre, contenant l'information des éléments de formulaire qui ont échoué à la validation, #10279")]),n("li",[e._v("Ajout de l'événement "),n("code",[e._v("validate")]),e._v(", #10351")])])]),n("li",[e._v("Progress\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("color")]),e._v(", #10352 (par @YunYouJun)")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("circle")]),e._v(", #10359 (par @YunYouJun)")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-17"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-17","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Correction du label de FormItem non aligné avec l'Input mixte, #10189")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Désormais, le menu réduit n'affichera la bulle d'aide que lorsque le slot "),n("code",[e._v("title")]),e._v(" de l'élément MenuItem est défini, #10193 (par @PanJiaChen).")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Correction d'un événement "),n("code",[e._v("current-current-change")]),e._v(" qui se déclenchait incorrectement sans interaction de l'utilisateur, #10247")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Maintenant, la date et l'heure dans le panneau déroulant sont correctement formatées en fonction de l'attribut "),n("code",[e._v("format")]),e._v(", #10174（by @remizovvv）")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Correction de l'attribut "),n("code",[e._v("accept")]),e._v(" qui ne fonctionnait pas quand "),n("code",[e._v("drag")]),e._v(" est vrai, #10278")])])])]),n("h3",{attrs:{id:"2-2-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.2")]),n("p",[n("em",[e._v("2018-03-14")])]),n("ul",[n("li",[e._v("Ajout de l'événement "),n("code",[e._v("clear")]),e._v(" pour Input, #9988 (par @blackmiaool)")]),n("li",[e._v("Maintenant la saisie manuelle de ColorPicker supporte les modes "),n("code",[e._v("hsl")]),e._v(", "),n("code",[e._v("hsv")]),e._v(" et "),n("code",[e._v("rgb")]),e._v(", #9991")]),n("li",[e._v("Correction de DatePicker ne déclenchant pas l'événement "),n("code",[e._v("change")]),e._v(" lorsque sa valeur initiale est effacée, #9986")]),n("li",[e._v("Maintenant les attributs liés à la classe d'icônes de Rate supportent les mises à jour dynamiques, #10003")]),n("li",[e._v("Correction de Table avec des colonnes fixes dont la hauteur n'est pas mise à jour correctement si "),n("code",[e._v("max-height")]),e._v(" est réglé, #10034")]),n("li",[e._v("Maintenant le mode plage de DatePicker supporte la sélection inverse (en cliquant sur la date de fin, puis sur la date de début), #8156 (par @earlymeme)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(" pour Pagination, #10006")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("after-enter")]),e._v(" et "),n("code",[e._v("after-leave")]),e._v(" pour Popover, #10047")]),n("li",[e._v("Correction de Select ne déclenchant pas la validation lorsque l'utilisateur sélectionne une option après avoir exécuté "),n("code",[e._v("resetFields")]),e._v(" du formulaire, #10105")]),n("li",[e._v("Correction des largeurs incorrectes des colonnes fixes de Table dans certains cas, #10130")]),n("li",[e._v("Correction de MessageBox héritant de l'attribut "),n("code",[e._v("title")]),e._v(" de son instance précédente lorsqu'il était appelé sans "),n("code",[e._v("title")]),e._v(", #10126 (par @Pochodaydaydayup)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("input-size")]),e._v(" pour Slider, #10154")]),n("li",[e._v("Ajout des événements "),n("code",[e._v("left-check-change")]),e._v(" et "),n("code",[e._v("right-check-change")]),e._v(" pour Transfer, #10156")])]),n("h3",{attrs:{id:"2-2-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.1")]),n("p",[n("em",[e._v("2018-03-02")])]),n("ul",[n("li",[e._v("Correction d'un rétrécissement de Aside, Header et Footer dans certaines mises en page, #9812")]),n("li",[e._v("Correction de Table avec un attribut "),n("code",[e._v("height")]),e._v(" qui ne rendait pas dans SSR, #9876")]),n("li",[e._v("Correction d'une Table extensible ne calculant pas sa hauteur lorsqu'une rangée est agrandie, #9848")]),n("li",[e._v("Correction d'un événement "),n("code",[e._v("change")]),e._v(" qui ne se déclenchait pas lors de la saisie manuelle de la date dans DateTimePicker, #9913")]),n("li",[e._v("Correction de Select affichant ses options lorsque la boîte de saisie est cliquée avec le bouton droit de la souris, #9894 (par @openks)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tooltip-class")]),e._v(" pour Slider, #9957")]),n("li",[e._v("Maintenant Select garde le focus après la sélection, #9857 (par @Seebiscuit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("target-order")]),e._v(" pour Transfer, #9960")])]),n("h3",{attrs:{id:"2-2-0-graphite"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-2-0-graphite","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.2.0 Graphite")]),n("p",[n("em",[e._v("2018-02-12")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("popper-class")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" pour le sous-menu, #9604 #9771")]),n("li",[e._v("Le menu horizontal prend maintenant en charge le sous-menu multicouche, #9741")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Ajout de l'évènement "),n("code",[e._v("node-contextmenu")]),e._v(", #9678")]),n("li",[e._v("Vous pouvez maintenant personnaliser le modèle de nœud en utilisant un slot avec portée, #9686")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("getNode")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("remove")]),e._v(", "),n("code",[e._v("append")]),e._v(", "),n("code",[e._v("insertBefore")]),e._v(", "),n("code",[e._v("insertAfter")]),e._v(", "),n("code",[e._v("getCheckedKeys")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedNodes")]),e._v(", "),n("code",[e._v("getHalfCheckedKeys")]),e._v(" et de l'événement "),n("code",[e._v("check")]),e._v(", #9718 #9730")])])]),n("li",[e._v("Transfer\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearQuery")]),e._v(", #9753")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-append-to-body")]),e._v(", #9782")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-18"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-18","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un clic sur l'icône d'expansion d'une ligne extensible qui déclenche l'événement "),n("code",[e._v("row-click")]),e._v(", #9654")]),n("li",[e._v("Correction de la mise en page non mise à jour lorsque la largeur des colonnes est modifiée par glisser-déposer de l'utilisateur, #9668")]),n("li",[e._v("Correction d'un problème de style lorsque la ligne de résumé coexiste avec des colonnes fixes, #9667")])])]),n("li",[e._v("Container\n"),n("ul",[n("li",[e._v("Les composants fixes de Container ne s'étirent pas dans IE11, #9655")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction du chargement n'apparaissant pas lorsque la valeur de "),n("code",[e._v("v-loading")]),e._v(" est changée en true dans le hook "),n("code",[e._v("mounted")]),e._v(", #9722")])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Correction de deux événements de clics natifs déclenchés lorsque Switch est cliqué, #9760")])])])]),n("h3",{attrs:{id:"2-1-0-charcoal"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-1-0-charcoal","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.1.0 Charcoal")]),n("p",[n("em",[e._v("2018-01-31")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Cascader\n"),n("ul",[n("li",[e._v("Ajout des événements "),n("code",[e._v("focus")]),e._v(" et "),n("code",[e._v("blur")]),e._v(", #9184 (par @viewweiwu)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("La méthode "),n("code",[e._v("filter-method")]),e._v(" a maintenant un troisième paramètre "),n("code",[e._v("column")]),e._v(", #9196 (par @liyanlong)")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("clear-icon")]),e._v(", #9237 (par @AdamSGit)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("default-time")]),e._v(", #9094 (par @nighca)")]),n("li",[e._v("Le format "),n("code",[e._v("value-format")]),e._v(" supporte maintenant "),n("code",[e._v("timestamp")]),e._v(", #9319 (par @wacky6)")])])]),n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Maintenant la valeur liée peut être "),n("code",[e._v("undefined")]),e._v(", #9361")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("auto-complete")]),e._v(", #9388")])])]),n("li",[e._v("Form")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("désactivé")]),e._v(", #9529")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("validateOnRuleChange")]),e._v(", #8141")]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de la méthode "),n("code",[e._v("closeAll")]),e._v(", #9514")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-19"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-19","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("InputNumber\n"),n("ul",[n("li",[e._v("Correstion du reset lors de la saisie du point des nombres décimaux, #9116")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Correction du mauvais positionnement du menu déroulant lorsque la page n'a qu'une barre de défilement horizontale dans certains navigateurs, #9138 (par @banzhuanmei)")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'une erreur dans le calcul du nombre de colonnes fixes après les changements de données des colonnes, #9188（by @kolesoffac）")]),n("li",[e._v("Correction de la bordure de la dernière colonne de l'en-tête groupé qui n'était pas correctement affichée, #9326")]),n("li",[e._v("Correction d'un positionnement incorrect de l'en-tête du tableau dans Safari, #9327")]),n("li",[e._v("Correction de la réduction des lignes extensibles lorsque les données de la table changent, #9462")]),n("li",[e._v("Correction de rendus multiples inutiles dans certaines conditions, #9426")]),n("li",[e._v("Correction d'une erreur de calcul de la largeur de colonne lors de la modification de "),n("code",[e._v("width")]),e._v(" de TableColumn, #9426")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Correction de Loading ne se cachant pas correctement dans certaines conditions, #9313")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de la méthode "),n("code",[e._v("focus")]),e._v(' qui ne fonctionnait pas en mode "range", #9437')]),n("li",[e._v('Correction du clic sur le bouton "now" qui sélectionnait toujours la date actuelle même si elle était désactivée, #9470 (par @wacky6)')]),n("li",[e._v("Correction d'une date trop serrée lors de la navigation, #9577 (par @wacky6)")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Correction d'une erreur de style dans IE 11, #9454")])])])]),n("h4",{attrs:{id:"changements"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changements","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changements")]),n("ul",[n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Le menu contextuel en mode "),n("code",[e._v("collapse")]),e._v(" s'ajoute maintenant directement à "),n("code",[e._v("body")]),e._v(", de sorte qu'il est visible lorsqu'il est imbriqué dans Aside, #9263")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Maintenant, cocher les cases dans la Table multi-sélection ne déclenche pas l'événement "),n("code",[e._v("row-click")]),e._v(", #9467")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement non plein écran est changé à 2000. Le "),n("code",[e._v("z-index")]),e._v(" du masque de chargement plein écran se mettra à jour dynamiquement avec les composants popup, #9522")])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[e._v("Les attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" ne fonctionnent maintenant que lorsque le déclencheur est "),n("code",[e._v("hover")]),e._v(", #9573")])])])]),n("h3",{attrs:{id:"2-0-11"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-11","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.11")]),n("p",[n("em",[e._v("2018-01-08")])]),n("ul",[n("li",[e._v("Correction d'un problème de couleur de bordure de Select dans les slots "),n("code",[e._v("prepend")]),e._v(" ou "),n("code",[e._v("append")]),e._v(" de Input, #9089")]),n("li",[e._v("Correction du paramètre "),n("code",[e._v("remove-tag")]),e._v(" de l'événement Select, #909090")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("show-timeout")]),e._v(" et "),n("code",[e._v("hide-timeout")]),e._v(" pour le sous-menu, #8934 (par @HugoLew)")]),n("li",[e._v("Correction d'un style Tooltip manquant de "),n("code",[e._v("show-overflow-tooltip")]),e._v(" lors de l'importation de Table sur demande, #9130")]),n("li",[e._v("Correction d'un dysfonctionnement du tri des colonnes de la table après l'exécution de "),n("code",[e._v("clearSort")]),e._v(" sur cette colonne, #9100 (par @zEmily)")]),n("li",[e._v("Le fichier de configuration i18n pour le tchèque est renommé de "),n("code",[e._v("cz")]),e._v(" en "),n("code",[e._v("cs-CZ")]),e._v(", #9164")])]),n("h3",{attrs:{id:"2-0-10"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-10","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.10")]),n("p",[n("em",[e._v("2017-12-29")])]),n("ul",[n("li",[e._v("Calcul erroné de la hauteur du tableau lorsque la colonne fixe et la ligne de somme coexistent, #9026")]),n("li",[e._v("Correction d'un style de couleur non compilé du texte vide dans le tableau, #9028")]),n("li",[e._v("Maintenant, DatePicker n'émet que l'événement "),n("code",[e._v("change")]),e._v(" quand la valeur est vraiment changée, #9029 (par @remizovvvv)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tabindex")]),e._v(" pour Input, #9041 (par @dicklwm)")])]),n("h3",{attrs:{id:"2-0-9"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-9","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.9🎄")]),n("p",[n("em",[e._v("2017-12-24")])]),n("ul",[n("li",[e._v('Ajouté la fonction de hook "avant suppression" pour Upload, #8788 (par @firesh)')]),n("li",[e._v("Correction de la valeur initiale de "),n("code",[e._v("error")]),e._v(" qui ne fonctionnait pas pour FormItem, #8840")]),n("li",[e._v("La directive Loading prend maintenant en charge le nom de classe personnalisé grâce à l'attribut "),n("code",[e._v("element-loading-custom-class")]),e._v(", #8826 (par @earlymeme)")]),n("li",[e._v("Correction CarouselItem devenant invisible lorsque les données sont mises à jour de manière asynchrone, #8921")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("renderAfterExpand")]),e._v(" pour Tree, #8972")])]),n("h3",{attrs:{id:"2-0-8"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-8","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.8")]),n("p",[n("em",[e._v("2017-12-12")])]),n("ul",[n("li",[e._v("Ajout de la documentation en espagnol")]),n("li",[e._v("Correction du "),n("code",[e._v("show-timeout")]),e._v(" de Dropdown qui ne fonctionnait pas quand le déclencheur est click, #8734 (par @presidenten)")]),n("li",[e._v("Correction du temps de validation des formulaires pour les règles dont le déclencheur est blur, #8776")]),n("li",[e._v("Correction d'un événement de blur de DatePicker avec intervalle, #8784")]),n("li",[e._v("L'attribut "),n("code",[e._v("format")]),e._v(" de TimePicker supporte maintenant AM/PM, #8620 (par @firesh)")])]),n("h3",{attrs:{id:"2-0-7"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-7","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.7")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction du style du bouton de type texte désactivé, #8570")])]),n("h3",{attrs:{id:"2-0-6"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-6","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.6")]),n("p",[n("em",[e._v("2017-11-29")])]),n("ul",[n("li",[e._v("Correction d'un bug de style des icônes de tri de la table, #8405")]),n("li",[e._v("Correction du mécanisme de déclenchement de Popover lorsque son "),n("code",[e._v("trigger")]),e._v(" est manuel, #8467")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" pour Autocomplete, #8446 (par @liyanlong)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator")]),e._v(" pour Cascader, #8501")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("clearable")]),e._v(" pour Input, #8509 (par @lbogdan)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("background")]),e._v(" pour Pagination, #8553")])]),n("h3",{attrs:{id:"2-0-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.5")]),n("p",[n("em",[e._v("2017-11-17")])]),n("ul",[n("li",[e._v("Correction de la régression Popover, Tree, Breadcrumb et Cascader dans 2.0.4, #8188 #8217 #8283")]),n("li",[e._v("Correction d'une fuite de mémoire de la directive "),n("code",[e._v("clickoutside")]),e._v(", #8168 #8225 (par @badpunman @STLighter)")]),n("li",[e._v("Correction de la hauteur du Select multiple lorsque sa valeur est effacée, #8317 (par @luciy)")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("collapse-tags")]),e._v(" pour plusieurs Sélectionner pour remplacer les balises par une ligne de texte, #8190")]),n("li",[e._v("Correction d'une consommation CPU élevée causée par la table cachée, #8351")]),n("li",[e._v("Maintenant vous pouvez utiliser la méthode "),n("code",[e._v("doLayout")]),e._v(" de la Table pour mettre à jour sa disposition, #8351")])]),n("h3",{attrs:{id:"2-0-4"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-4","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.4")]),n("p",[n("em",[e._v("2017-11-10")])]),n("ul",[n("li",[e._v("Accessibilité améliorée pour Cascader, Dropdown, Message, Notification, Popover, Tooltip et Tree.")]),n("li",[e._v("Correction du redimensionnement de Container lorsque la largeur de la fenêtre d'affichage diminue, #8042")]),n("li",[e._v("Correction de la suppression incorrecte de "),n("code",[e._v("updateKeyChildren")]),e._v(" dans Tree, #8100")]),n("li",[e._v("Correction de la hauteur de la CheckboxButton avec bordure lorsque le bouton est imbriqué dans un formulaire, #8100")]),n("li",[e._v("Correction d'une erreur d'analyse du menu pour les couleurs personnalisées, #8153 (par @zhouyixiang)")])]),n("h3",{attrs:{id:"2-0-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.3")]),n("p",[n("em",[e._v("2017-11-03")])]),n("ul",[n("li",[e._v("Correction des attributs "),n("code",[e._v("éditable")]),e._v(" et "),n("code",[e._v("readonly")]),e._v(" pour DatePicker avec intervalle, #7922")]),n("li",[e._v("Correction d'une erreur de style des Tabs imbriqués, #7941")]),n("li",[e._v("Correction d'une erreur de style de la dernière étape des Steps verticales, #7980")]),n("li",[e._v("Correction de la synchronisation du déclenchement de l'événement "),n("code",[e._v("current-current-change")]),e._v(" pour Pagination, #7995")]),n("li",[e._v("Correction d'une infobulle non enregistrée dans Menu, #7995")])]),n("h3",{attrs:{id:"2-0-2"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-2","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.2")]),n("p",[n("em",[e._v("2017-10-31")])]),n("ul",[n("li",[e._v("Un clic droit sur les boutons de InputNumber ne changera pas sa valeur, #7817")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" de Form peut maintenant attendre des validations asynchrones avant d'exécuter son callback, #7774 (par @Allenice)")]),n("li",[e._v("Correction de la plage de sélection de DatePicker ne fonctionnant pas dans les navigateurs Chromium 53-57, #7838")]),n("li",[e._v("Correction des icônes manquantes de prévisualisation et de suppression de Upload lorsque son "),n("code",[e._v("list-type")]),e._v(" est picture-card, #7857")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("sort-by")]),e._v(" pour TableColumn, #7828 (par @wangfengming)")]),n("li",[e._v("Correction de DatePicker affichant parfois un mauvais numéro d'année lors de la sélection de la première semaine en mode semaine, #7860 (par @hhh23485)")]),n("li",[e._v("Correction d'une erreur de style d'icône des Steps verticales, #7891")]),n("li",[e._v("La 'hot area' pour les flèches de nœud dans Tree est étendue, #7891")])]),n("h3",{attrs:{id:"2-0-1"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-1","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.1")]),n("p",[n("em",[e._v("2017-10-28")])]),n("ul",[n("li",[e._v("Correction d'une erreur de style de RadioButton et CheckboxButton, #7793")]),n("li",[e._v("Correction de TimePicker qui ne répondait pas au défilement de la souris dans certaines conditions, #7811")]),n("li",[e._v("Correction des styles incomplets de certains composants lors de l'importation à la demande, #7811")])]),n("h3",{attrs:{id:"2-0-0-carbon"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#2-0-0-carbon","aria-hidden":"true"}},[e._v("¶")]),e._v(" 2.0.0 Carbon")]),n("p",[n("em",[e._v("2017-10-27")])]),n("h4",{attrs:{id:"nouvelles-fonctionnalites-12"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nouvelles-fonctionnalites-12","aria-hidden":"true"}},[e._v("¶")]),e._v(" Nouvelles fonctionnalités")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Un nouveau thème : "),n("code",[e._v("theme-chalk")]),e._v(".")]),n("li",[e._v("L'accessibilité des éléments suivants est améliorée : Alert, AutoComplete, Breadcrumb, Button, Checkbox, Collapse, Input, InputNumber, Menu, Progress, Radio, Rate, Slider, Switch, Upload")]),n("li",[e._v("Ajout du typage TypeScript")]),n("li",[e._v("Toutes les icônes existantes sont redessinées. De nouvelles icônes sont ajoutées")]),n("li",[e._v("Ajout d'une série de classes basées sur les breakpoints qui masquent les éléments lorsque la taille de la fenêtre remplit certaines conditions")]),n("li",[e._v("Ajout des composants de mise en page : Container, Header, Aside, Main, Footer")]),n("li",[e._v("Vous pouvez maintenant configurer la taille des composants de manière globale. Lors de l'importation d'un élément, vous pouvez ajouter un objet de configuration global avec une propriété "),n("code",[e._v("size")]),e._v(" pour configurer les tailles par défaut pour tous les composants.")])])]),n("li",[e._v("Button\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("round")]),e._v(". Il est utilisé pour les boutons à coins ronds #6643")])])]),n("li",[e._v("TimeSelect\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer en appuyant sur les touches "),n("code",[e._v("Up")]),e._v(" et "),n("code",[e._v("Down")]),e._v(", et en appuyant sur "),n("code",[e._v("Enter")]),e._v(" vous sélectionnez l'heure #6023.")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Vous pouvez maintenant naviguer à l'aide des touches fléchées, et en appuyant sur "),n("code",[e._v("Entrée")]),e._v(" vous sélectionnez l'heure #6050.")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("farrow-control")]),e._v(" pour faire tourner le temps avec les flèches #7438")])])]),n("li",[e._v("Tree\n"),n("ul",[n("li",[e._v("Maintenant les noeuds enfants ne font pas de rendu avant la première ouverture #6257")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("check-descendants")]),e._v(". Il détermine si les nœuds enfants sont vérifiés lors du contrôle de leur nœud parent en mode "),n("code",[e._v("lazy")]),e._v(" #6235")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("Ajouté l'attribut "),n("code",[e._v("size")]),e._v(" #7203")])])]),n("li",[e._v("Datepicker\n"),n("ul",[n("li",[e._v("Maintenant "),n("code",[e._v("timeFormat")]),e._v(" peut formater le TimePicker quand le type est réglé sur "),n("code",[e._v("datetimerange")]),e._v(" #6052")]),n("li",[e._v("Ajout de "),n("code",[e._v("start-placeholder")]),e._v(" et de "),n("code",[e._v("end-placeholder")]),e._v(". Ce sont des placeholders pour les deux champs en mode intervalle #7169")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("value-format")]),e._v(" pour personnaliser le format de la valeur liée, #7367")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("unlink-panels")]),e._v(" pour dissocier les deux panneaux de date lors de la sélection d'une plage de dates")])])]),n("li",[e._v("MessageBox\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("closeOnHashChange")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("roundButton")]),e._v(" pour afficher les boutons ronds #7029")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6043")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inputType")]),e._v(" pour assigner le type de l'input intérieur, #7651")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("width")]),e._v("、"),n("code",[e._v("fullscreen")]),e._v("、"),n("code",[e._v("append-to-body")]),e._v(". La boîte de dialogue peut maintenant être imbriquée")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #7042")]),n("li",[e._v("Ajout de "),n("code",[e._v("focus-after-closed")]),e._v("、"),n("code",[e._v("focus-after-open")]),e._v(" pour améliorer l'accessibilité #6511")])])]),n("li",[e._v("ColorPicker\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez taper les couleurs dans le champ de saisie #6167")]),n("li",[e._v("Ajout des attributs "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" #7026")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("popper-class")]),e._v(" #7351")])])]),n("li",[e._v("Message\n"),n("ul",[n("li",[e._v("Maintenant la couleur des icônes peut être modifiée par CSS #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6207")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6875")])])]),n("li",[e._v("Notification\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("position")]),e._v(" pour configurer où Notification apparaît #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(". Lorsqu'il est réglé sur "),n("code",[e._v("true")]),e._v(", "),n("code",[e._v("message")]),e._v(" sera interprété comme une chaîne HTML"),n("sup",[e._v("*")]),e._v(" #6231")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("showClose")]),e._v(" pour cacher le bouton de fermeture #6402")])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("show-score")]),e._v(" pour déterminer si le score actuel est affiché #6295")])])]),n("li",[e._v("Tabs\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("tab-position")]),e._v(" #6096")])])]),n("li",[e._v("Radio\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Checkbox\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("border")]),e._v(" et "),n("code",[e._v("size")]),e._v(" #6690")])])]),n("li",[e._v("Alert\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("center")]),e._v(" pour que le contenu puisse être centré #6876")])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" #7064")]),n("li",[e._v("Ajout des méthodes "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(" pour ouvrir et fermer les sous-menus par programmation, #7412")])])]),n("li",[e._v("Form\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("inline-message")]),e._v(" pour déterminer si le message de validation est affiché en ligne #7032")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("status-icon")]),e._v(" pour afficher une icône de feedback après validation #7032")]),n("li",[e._v("Form et FormItem ont maintenant un attribut "),n("code",[e._v("size")]),e._v(". Les composants internes hériteront de cette taille s'ils ne sont pas spécifiés sur eux-mêmes, #7428")]),n("li",[e._v("La méthode "),n("code",[e._v("validate")]),e._v(" retournera maintenant une promesse si le rappel est omis, #7405")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearValidate")]),e._v(" pour la validation des résultats pour tous les éléments de formulaire, #7623")])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("suffixe")]),e._v(" et "),n("code",[e._v("préfixe")]),e._v(" des slots nommés, "),n("code",[e._v("suffixIcon")]),e._v(" et "),n("code",[e._v("prefixIcon")]),e._v(" pour ajouter du contenu dans la zone de saisie #7032")])])]),n("li",[e._v("Breadcrumb\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("separator-class")]),e._v(" pour supporter les icônes comme séparateurs d'éléments #7203")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("simple")]),e._v(" pour activer les étapes de style simple #7274")])])]),n("li",[e._v("Pagination\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("prev-text")]),e._v(" et "),n("code",[e._v("next-text")]),e._v(" pour personnaliser les textes des pages précédente et suivante #7005")])])]),n("li",[e._v("Loading\n"),n("ul",[n("li",[e._v("Maintenant vous pouvez personnaliser l'icône et la couleur de fond avec les propriétés "),n("code",[e._v("spinner")]),e._v(" et "),n("code",[e._v("background")]),e._v(" #7390")])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("debounce")]),e._v(", #7413")])])]),n("li",[e._v("Upload\n"),n("ul",[n("li",[e._v("Ajout des attributs "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre de fichiers, #7405")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("time-arrow-control")]),e._v(" pour activer "),n("code",[e._v("arrow-control")]),e._v(" du TimePicker imbriqué, #743838")])])]),n("li",[e._v("Layout\n"),n("ul",[n("li",[e._v("Ajout d'un nouveau point d'arrêt "),n("code",[e._v("xl")]),e._v(" pour les fenêtres plus larges que 1920px")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("span-method")]),e._v(" pour la fusion de cellules")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearSort")]),e._v(" pour effacer le tri par programmation")]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("clearFilter")]),e._v(" pour effacer le filtre par programmation")]),n("li",[e._v("Pour les lignes extensibles, lorsqu'une ligne est étendue, une classe "),n("code",[e._v(".expanded")]),e._v(" sera ajoutée à sa liste de classes, afin que vous puissiez personnaliser son style")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("size")])]),n("li",[e._v("Ajout de la méthode "),n("code",[e._v("toggleRowExpansionRowExpansion")]),e._v(" pour ouvrir ou réduire les lignes extensibles par programmation")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("cell-style")]),e._v(" pour le style des cellules")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-class-name")]),e._v(" pour assigner un nom de classe aux lignes d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-row-style")]),e._v(" pour le style d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-class-name")]),e._v(" pour assigner un nom de classe aux cellules d'en-tête")]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("header-cell-style")]),e._v(" pour le style des cellules d'en-tête")]),n("li",[e._v("L'attribut "),n("code",[e._v("prop")]),e._v(" de la tableColumn accepte maintenant les notations "),n("code",[e._v("object[key]")])]),n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("index")]),e._v(" pour TableColumn pour personnaliser les index de lignes")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Ajout de l'attribut "),n("code",[e._v("reserve-keyword")]),e._v(" pour réserver le mot-clé de la recherche courante après avoir sélectionné une option.")])])])]),n("h4",{attrs:{id:"corrections-de-bugs-20"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#corrections-de-bugs-20","aria-hidden":"true"}},[e._v("¶")]),e._v(" Corrections de bugs")]),n("ul",[n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" retournant le deuxième jour de la semaine sélectionnée en mode semaine #6038")]),n("li",[e._v("Correction de la première entrée effacée dans le type "),n("code",[e._v("daterange")]),e._v(" #6021")])])]),n("li",[e._v("DateTimePicker\n"),n("ul",[n("li",[e._v("Correction de DateTimePicker et TimePicker s'affectant l'un l'autre lors de la sélection #6090")]),n("li",[e._v("Correction de l'heure et de la seconde qui peuvent être au-delà de la limite en sélectionnant l'heure #6076")])])]),n("li",[e._v("TimePicker\n"),n("ul",[n("li",[e._v("Correction de "),n("code",[e._v("v-model")]),e._v(" qui ne se mettait pas à jour correctement lors du blur #6023")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Correction des textes ayant des bords flous lors de l'ouverture et de la fermeture des listes déroulantes imbriquées #6088")])])]),n("li",[e._v("Select\n"),n("ul",[n("li",[e._v("Performances améliorées. Maintenant Vue dev-tool ne crashera pas quand un grand nombre de Select sont détruits #6151")])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Correction d'un bug ou la table reste masquée lorsque son élément parent apparaît depuis "),n("code",[e._v("display : none")])]),n("li",[e._v("Correction de l'extension de la largeur de la table lorsque l'élément parent a "),n("code",[e._v("display : flex")])]),n("li",[e._v("Correction d'un bug qui corrigeait le fait que les colonnes d'une table avec l'emplacement "),n("code",[e._v("append")]),e._v(" disparaissaient lorsque les données étaient récupérées dynamiquement")]),n("li",[e._v("Correction de l'attribut "),n("code",[e._v("expand-row-keys")]),e._v(" qui ne fonctionnait pas avec la valeur initiale")]),n("li",[e._v("Correction d'une défaillance du filtre lors de la mise à jour de "),n("code",[e._v("data")])]),n("li",[e._v("Correction d'une erreur de calcul dans la mise en page des colonnes fixes avec en-têtes groupés")]),n("li",[e._v("Correction d'un bug dynamique de "),n("code",[e._v("max-height")])]),n("li",[e._v("Correction de quelques erreurs de calcul de style")])])])]),n("h4",{attrs:{id:"breaking-changes-5"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-5","aria-hidden":"true"}},[e._v("¶")]),e._v(" Breaking changes")]),n("ul",[n("li",[e._v("Général\n"),n("ul",[n("li",[e._v("Suppression de "),n("code",[e._v("theme-default")]),e._v(".")]),n("li",[e._v("Compatible avec Vue 2.5.2+ et IE 10+")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" des composants de formulaire et l'événement "),n("code",[e._v("current-current-change")]),e._v(" de la pagination ne se déclenchent plus que lors de l'interaction de l'utilisateur")]),n("li",[e._v("L'attribut "),n("code",[e._v("size")]),e._v(" de Button et les composants de formulaire acceptent maintenant "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")])]),n("li",[e._v("Pour faciliter l'utilisation d'icônes tierces, les attributs "),n("code",[e._v("icon")]),e._v(" du bouton et des étapes, "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(" d'Input nécessitent maintenant un nom de classe complet")])])]),n("li",[e._v("Dialog\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("taille")]),e._v(". Maintenant la taille de Dialog peut être configurée par "),n("code",[e._v("width")]),e._v(" et "),n("code",[e._v("fullscreen")])]),n("li",[e._v("Maintenant la visibilité de Dialog ne peut plus être contrôlée par "),n("code",[e._v("v-model")])])])]),n("li",[e._v("Rate\n"),n("ul",[n("li",[e._v("Le "),n("code",[e._v("text-template")]),e._v(" est renommé "),n("code",[e._v("score-template")])])])]),n("li",[e._v("Dropdown\n"),n("ul",[n("li",[n("code",[e._v("menu-align")]),e._v(" est renommé en "),n("code",[e._v("placement")]),e._v(". Maintenant il supporte plus de positions")])])]),n("li",[e._v("Transfert\n"),n("ul",[n("li",[e._v("le "),n("code",[e._v("footer-format")]),e._v(" est renommé en "),n("code",[e._v("format")])])])]),n("li",[e._v("Switch\n"),n("ul",[n("li",[e._v("Les attributs commençant par "),n("code",[e._v("on-**")]),e._v(" seront analysés pour les événements dans JSX, ce qui rend tous les attributs "),n("code",[e._v("on-*")]),e._v(" de Switch incapable de fonctionner en JSX. Ainsi, les attributs "),n("code",[e._v("on-**")]),e._v(" sont renommés en "),n("code",[e._v("active-*")]),e._v(", et par conséquent les attributs "),n("code",[e._v("off-*")]),e._v(" sont renommés en "),n("code",[e._v("inactive-*")]),e._v(". Cette modification affecte les attributs suivants: "),n("code",[e._v("on-icon-class")]),e._v(", "),n("code",[e._v("off-icon-class")]),e._v(", "),n("code",[e._v("on-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("off-text")]),e._v(", "),n("code",[e._v("on-color")]),e._v(", "),n("code",[e._v("off-color")]),e._v(", "),n("code",[e._v("on-value")]),e._v(", "),n("code",[e._v("off-value")])]),n("li",[e._v("Les attributs "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" n'ont plus de valeurs par défaut")])])]),n("li",[e._v("Tag\n"),n("ul",[n("li",[e._v("L'attribut "),n("code",[e._v("type")]),e._v(" accepte maintenant "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("info")]),e._v(", "),n("code",[e._v("warning")]),e._v(" et "),n("code",[e._v("danger")])])])]),n("li",[e._v("Menu\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("theme")]),e._v(". La couleur du menu peut être configurée en utilisant "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")])])])]),n("li",[e._v("Input\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("icon")]),e._v(". L'icône du suffixe peut maintenant être configurée à l'aide de l'attribut "),n("code",[e._v("suffix-icon")]),e._v(" ou du slot "),n("code",[e._v("suffix-icon")])]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("on-icon-click")]),e._v(" et de l'événement "),n("code",[e._v("click")]),e._v(". Maintenant pour ajouter le gestionnaire de clic sur les icônes, veuillez utiliser les slots nommés")]),n("li",[e._v("L'événement "),n("code",[e._v("change")]),e._v(" se comporte maintenant comme dans l'input natif, qui ne se déclenche qu'en cas de blur ou en appuyant sur Entrée. Si vous avez besoin de répondre à l'entrée de l'utilisateur en temps réel, vous pouvez utiliser l'événement "),n("code",[e._v("input")])])])]),n("li",[e._v("Autocomplete\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("custom-item")]),e._v(". Le template de suggestions d'entrée peut maintenant être personnalisé en utilisant "),n("code",[e._v("scoped slot")]),e._v(".")]),n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("props")]),e._v(". Vous pouvez maintenant utiliser l'attribut "),n("code",[e._v("value-key")]),e._v(" pour désigner le nom de clé de l'objet de suggestion d'entrée pour l'affichage.")])])]),n("li",[e._v("Steps\n"),n("ul",[n("li",[e._v("Suppression de l'attribut "),n("code",[e._v("center")])]),n("li",[e._v("Maintenant le Steps va remplir son conteneur parent par défaut")])])]),n("li",[e._v("DatePicker\n"),n("ul",[n("li",[e._v("Le paramètre de l'événement "),n("code",[e._v("change")]),e._v(" de DatePicker est maintenant la valeur liée elle-même. Son format est contrôlé par "),n("code",[e._v("value-format")])])])]),n("li",[e._v("Table\n"),n("ul",[n("li",[e._v("Suppression de la prise en charge de la personnalisation du modèle de colonne à l'aide de "),n("code",[e._v("inline-template")])]),n("li",[n("code",[e._v("sort-method")]),e._v(" s'aligne maintenant avec "),n("code",[e._v("Array.sort")]),e._v(". Il devrait retourner un nombre au lieu d'un booléen")]),n("li",[e._v("L'emplacement "),n("code",[e._v("append")]),e._v(" est déplacé à l'extérieur de l'élément "),n("code",[e._v("tbody")]),e._v(" pour éviter les rendus multiples")]),n("li",[e._v("L'événement "),n("code",[e._v("expand")]),e._v(" est renommé en "),n("code",[e._v("expand-change")])]),n("li",[e._v("Les paramètres de la méthode "),n("code",[e._v("row-class-name")]),e._v(" et "),n("code",[e._v("row-style")]),e._v(" sont maintenant un objet")])])])]),n("h2",{attrs:{id:""}},[n("a",{staticClass:"header-anchor",attrs:{href:"#","aria-hidden":"true"}},[e._v("¶")])]),n("p",[n("i",[n("sup",[e._v("*")]),e._v(" Rendre du HTML arbitraire de façon dynamique sur votre site Web peut être très dangereux car cela peut facilement mener à"),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("des attaques XSS")]),e._v(". Donc quand "),n("code",[e._v("dangerouslyUseHTMLString' est activé, assurez-vous que le contenu du")]),e._v("message' est fiable, et "),n("strong",[e._v("ne jamais")]),e._v(" assigner "),n("code",[e._v("message")]),e._v(" au contenu fourni par l'utilisateur.")]),e._v(".")])])}],!1,null,null,null).exports},data:function(){return{count:3}},mounted:function(){var e=this.$refs.changeLog,t=e.$el.children,n=t[1].querySelector("a");n&&n.remove();for(var a=t[1].textContent.trim(),l='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+a+'" target="_blank">'+a+"</a></h3>",r=t.length,i=2;i<r;i++){var s=t[i];(n=t[i].querySelector("a"))&&"header-anchor"===n.getAttribute("class")&&n.remove(),"H3"!==s.tagName?l+=t[i].outerHTML:l+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+(a=t[i].textContent.trim())+'" target="_blank">'+a+"</a></h3>"}l=(l=l.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>')).replace(/@([\w-]+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=l+"</li>",e.$el.remove()}},r=(n(523),Object(a.a)(l,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-changelog"},[t("div",{staticClass:"heading"},[t("el-button",{staticClass:"fr"},[t("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[this._v("GitHub Releases")])]),this._v("\n    Changelog\n  ")],1),t("ul",{ref:"timeline",staticClass:"timeline"}),t("change-log",{ref:"changeLog"})],1)},[],!1,null,null,null));t.default=r.exports},554:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(153),r=n(29),i=n.n(r),s={data:function(){return{lang:this.$route.meta.lang,navsData:l,scrollTop:0,showHeader:!0,componentScrollBar:null,componentScrollBoxElement:null}},watch:{"$route.path":function(){var e=this;this.componentScrollBox.scrollTop=0,this.$nextTick(function(){e.componentScrollBar.update()})}},methods:{renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var e=document.querySelectorAll("h2 a,h3 a,h4 a,h5 a"),n=location.href.split("#").splice(0,2).join("#");[].slice.call(e).forEach(function(e){var t=e.getAttribute("href");e.href=n+t})}},goAnchor:function(){var t=this;if(1<location.href.match(/#/g).length){var e=location.href.match(/#[^#]+$/g);if(!e)return;var n=document.querySelector(e[0]);if(!n)return;setTimeout(function(e){t.componentScrollBox.scrollTop=n.offsetTop},50)}},handleScroll:function(){var e=this.componentScrollBox.scrollTop;this.showHeader!==this.scrollTop>e&&(this.showHeader=this.scrollTop>e),0===e&&(this.showHeader=!0),this.navFaded||a.a.$emit("fadeNav"),this.scrollTop=e}},computed:{showBackToTop:function(){return!this.$route.path.match(/backtop/)}},created:function(){var t=this;a.a.$on("navFade",function(e){t.navFaded=e})},mounted:function(){this.componentScrollBar=this.$refs.componentScrollBar,this.componentScrollBox=this.componentScrollBar.$el.querySelector(".el-scrollbar__wrap"),this.throttledScrollHandler=i()(300,this.handleScroll),this.componentScrollBox.addEventListener("scroll",this.throttledScrollHandler),this.renderAnchorHref(),this.goAnchor(),document.body.classList.add("is-component")},destroyed:function(){document.body.classList.remove("is-component")},beforeDestroy:function(){this.componentScrollBox.removeEventListener("scroll",this.throttledScrollHandler)},beforeRouteUpdate:function(n,a,e){var l=this;e(),setTimeout(function(){var e=n.path,t=a.path;e===t&&n.hash&&l.goAnchor(),e!==t&&(document.documentElement.scrollTop=document.body.scrollTop=0,l.renderAnchorHref())},100)}},o=(n(524),n(0)),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("el-scrollbar",{ref:"componentScrollBar",staticClass:"page-component__scroll"},[n("div",{staticClass:"page-container page-component"},[n("el-scrollbar",{staticClass:"page-component__nav"},[n("side-nav",{attrs:{data:e.navsData[e.lang],base:"/"+e.lang+"/component"}})],1),n("div",{staticClass:"page-component__content"},[n("router-view",{staticClass:"content"}),n("footer-nav")],1),e.showBackToTop?n("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",right:100,bottom:150}}):e._e()],1)])},[],!1,null,null,null);t.default=d.exports},555:function(e,t,n){"use strict";n.r(t);var a={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Principes de conception"},{path:"/nav",name:"Navigation"}]}}},l=(n(526),n(0)),r=Object(l.a)(a,function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"page-container page-guide"},[t("el-row",[t("el-col",{attrs:{xs:24,sm:5}},[t("side-nav",{attrs:{data:this.navsData,base:"/"+this.lang+"/guide"}})],1),t("el-col",{attrs:{xs:24,sm:19}},[t("router-view",{staticClass:"content"})],1)],1)],1)},[],!1,null,null,null);t.default=r.exports},556:function(e,t,a){"use strict";a.r(t);var n=a(29),l=a.n(n),r={created:function(){var t=this;this.throttledHandleScroll=l()(10,!0,function(e){t.handleScroll(e)})},methods:{handleScroll:function(e){var t=this.$refs.indexMainImg,n=t.getBoundingClientRect(),a=t.clientHeight+55,l=2*(180-n.top);l<0&&(l=0),a<l&&(l=a),this.mainImgOffset=l}},data:function(){return{lang:this.$route.meta.lang,mainImgOffset:0}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){window.addEventListener("scroll",this.throttledHandleScroll)}},i=(a(527),a(0)),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._m(0),n("div",{ref:"indexMainImg",staticClass:"jumbotron"},[n("img",{attrs:{src:a(403),alt:""}}),n("div",{staticClass:"jumbotron-red",style:{height:e.mainImgOffset+"px"}},[n("img",{attrs:{src:a(404),alt:""}})])]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(405),alt:""}}),n("h3",[e._v("Guide")]),n("p",[e._v("Comprendre le design, aider les designers à concevoir un produit adapté, structuré et facile d'utilisation.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/guide/design",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(406),alt:""}}),n("h3",[e._v("Composants")]),n("p",[e._v("Découvrez les détails de chaque composant and parcourant les différentes démos. Utilisez l'encapsulation du code pour développer plus efficacement.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/component/layout",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(407),alt:""}}),n("h3",[e._v("Theme")]),n("p",[e._v("Online theme roller, visualize custom and manage site themes and component styles")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/theme",exact:""}},[e._v("Détails\n          ")])],1)]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(408),alt:""}}),n("h3",[e._v("Ressources")]),n("p",[e._v("Téléchargez différents outils de prototypage ou de visualisation pour un design plus efficace.")]),n("router-link",{attrs:{"active-class":"active",to:"/fr-FR/resource",exact:""}},[e._v("Détails\n          ")])],1)])])])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"banner"},[t("div",{staticClass:"banner-desc"},[t("h1",[this._v("Un kit de composants d'interface pour le web")]),t("p",[this._v("Element, une bibliothèque de composants web basée sur Vue 2.0 pour les développeurs, designers et chef de produits.")])])])}],!1,null,"398a0746",null);t.default=s.exports},557:function(e,t,a){"use strict";a.r(t);var n={data:function(){return{imgUrl:"",imgBound:{},showDialog:!1,imgStyle:{},imgWrapStyle:{}}},watch:{showDialog:function(e){document.body.style.overflow=e?"hidden":""}},methods:{enlarge:function(e,t){var n=t.target,a={},l=document;a.left=(l.body.scrollWidth-e)/2,a.top=100,this.imgUrl=n.src,this.imgBound=n.getBoundingClientRect(),this.imgWrapStyle.transformOrigin=t.clientX+"px "+t.clientY+"px",this.imgStyle.width=e+"px",this.showDialog=!0}}},l=(a(528),a(0)),r=Object(l.a)(n,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("h2",[t._v("Navigation")]),t._m(0),t._m(1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu latéral")]),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:9}},[n("p",[t._v("Fixe la navigation sur le coté gauche, améliorant ainsi sa visibilité et facilitant le passage d'une page à l'autre. Dans ce cas, la zone en haut de la page peut contenir une barre de recherche, des liens vers de la documentation, des contacts, des boutons d'aide, etc. Utile pour des interfaces de gestion ou des sites utilitaires.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:15}},[n("img",{attrs:{src:a(409),alt:"Catégories de niveau 1"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 1")]),n("p",[t._v("Appropriées pour des sites avec une structure simple et un seul niveau de page. L'affichage du chemin de navigation n'est pas néccessaire.")]),n("img",{attrs:{src:a(410),alt:"Catégories de niveau 2"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 2")]),n("p",[t._v("Le menu affiche au moins deux niveaux de navigation. Dans ce cas l'affichage du chemin de navigation est recommandé, afin que l'utilisateur sache facilement ou il se trouve.")]),n("img",{attrs:{src:a(411),alt:"Catégories de niveau 3"},on:{click:function(e){t.enlarge(846,e)}}}),n("h5",[t._v("Catégories de niveau 3")]),n("p",[t._v("Appropriées pour les sites web complexes. La barre la plus à gauche gère le premier niveau de navigation, tandis que celle à coté gère le deuxième niveau ansi que d'autres options.")])])],1)],1),n("div",{staticClass:"block"},[n("h3",[t._v("Menu en haut de page")]),n("el-row",[n("el-col",{attrs:{span:10}},[n("p",[t._v("Conforme à l'ordre normal de navigation qui va de haut en bas, ce qui rends les choses plus naturelles. Les quantités de liens et de texte sont limités par la largeur de la barre.")])]),n("el-col",{staticClass:"nav-demos",attrs:{span:14}},[n("img",{attrs:{src:a(412),alt:""},on:{click:function(e){t.enlarge(846,e)}}}),n("p",[t._v("Approprié pour les sites ayant une navigation simple et un contenu large.")])])],1)],1),n("transition",{attrs:{name:"fade"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(e){t.showDialog=!1}}})]),n("transition",{attrs:{name:"zoom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:t.imgWrapStyle,on:{click:function(e){t.showDialog=!1}}},[n("div",{staticClass:"imgWrap",style:t.imgStyle},[n("img",{attrs:{src:t.imgUrl,alt:""}})])])])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("p",[this._v("La navigation a pour but de guider les utilisateurs pour qu'ils sachent ou aller et comment y parvenir. En général on peut distinguer deux types de navigation: le menu latéral ou 'sidebar' et le menu en haut de page ou 'topbar'.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"block"},[t("h3",[this._v("Choisir la bonne navigation")]),t("p",[this._v("Une navigation appropriée procure à l'utilisation une expèrience facile et fluide, alors qu'une mauvaise navigation entraîne de la confusion. Voici les différences entre les navigations 'sidebar' et 'topbar'")])])}],!1,null,"382e203e",null);t.default=r.exports},558:function(e,t,n){"use strict";n.r(t);var l=n(24),a=n(423),r=n(424),i=n(425),s=n(182),o=n(154),d=n(25),c=n(29),u=n.n(c),v=n(274),p={components:{ThemeConfigurator:a.a,BasicTokensPreview:i.a,ComponentsPreview:r.a},data:function(){return{previewConfig:{},themeConfig:{},userTheme:[],editorTop:0,editorHeight:1e3,isFixed:!1}},computed:{isOfficial:function(){return"official"===this.previewConfig.type}},created:function(){var t=this;this.throttledHandleScroll=u()(10,!0,function(e){t.handleScroll(e)})},methods:{navBack:function(){this.$router.go(-1),this.$nextTick(function(){window.scrollTo(0,0)})},getNewUserThemeName:function(e){for(var t=1,n=void 0;n=e+"-"+t,0!==this.userTheme.filter(function(e){return e.name===n}).length;)t+=1;return n},onUserConfigUpdate:function(e){var t=JSON.stringify(e),n=this.previewConfig,a=n.type,l=n.name;if(this.isOfficial){if(8<=this.userTheme.length)return void this.$message.error(Object(v.c)("max-user-theme"));var r=this.getNewUserThemeName(l);return this.previewConfig.name=r,this.previewConfig.type="user",this.userTheme.push({update:Date.now(),name:r,theme:t}),void Object(s.d)(this.userTheme)}"user"===a&&(this.userTheme.forEach(function(e){e.name===l&&(e.update=Date.now(),e.theme=t)}),Object(s.d)(this.userTheme))},handleScroll:function(){var e=this.$refs.themePreview.getBoundingClientRect(),t=e.top,n=e.bottom,a=this.editorHeight+30+20;this.editorTop=t<0?(this.isFixed=!0,n<a?30-a+n:30):(this.isFixed=!1,0)}},beforeDestroy:function(){window.removeEventListener("scroll",this.throttledHandleScroll)},mounted:function(){var n=this;this.editorHeight=window.innerHeight-40-5,window.addEventListener("scroll",this.throttledHandleScroll),this.userTheme=Object(s.b)();var e=Object(s.a)(),t=this.$route.params.refer;if(e&&t){this.previewConfig=e;var a=Object(o.a)(e.theme);a&&(this.themeConfig=a,l.a.$emit(d.a,a))}else this.$alert(Object(v.c)("no-preview-config"),Object(v.c)("notice"),{confirmButtonText:Object(v.c)("confirm"),callback:function(e){var t=n.$route.path.replace("/preview","");n.$router.replace(t)}})}},m=(n(530),n(0)),_=Object(m.a)(p,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"themePreview",staticClass:"page-container page-theme-preview"},[n("section",{staticClass:"display"},[n("el-button",{attrs:{type:"text",icon:"el-icon-back"},on:{click:e.navBack}},[e._v("\n      Back\n    ")]),n("h3",[e._v(e._s(e.previewConfig.name))]),n("basic-tokens-preview"),n("components-preview")],1),n("aside",{staticClass:"side"},[n("section",{staticClass:"editor",class:{fixed:e.isFixed},style:{top:e.editorTop+"px",height:e.editorHeight+"px"}},[n("theme-configurator",{attrs:{isOfficial:e.isOfficial,themeConfig:e.themeConfig,previewConfig:e.previewConfig,onUserConfigUpdate:e.onUserConfigUpdate}})],1)])])},[],!1,null,null,null);t.default=_.exports},559:function(e,t,n){"use strict";n.r(t);var a=n(426),l=n(415),r=n(182),i=n(274),s={components:{ThemeCard:a.a},mounted:function(){this.userTheme=Object(r.b)(),Array.isArray(this.userTheme)||(this.userTheme=[],Object(r.d)(this.userTheme)),this.$nextTick(function(){window.scrollTo(0,0)})},data:function(){return{userTheme:[],maxUserTheme:8,copyDialogVisible:!1,copyForm:{},copyFormRule:{name:[{validator:this.validateCopyName,trigger:"blur"}]}}},computed:{officialTheme:function(){return this.padEmpeyTheme(l.b.concat(this.$isEle?l.a:[]))},userThemeCount:function(){return this.userTheme.length},showUserUpload:function(){return this.userThemeCount<8},displayUserTheme:function(){return this.padEmpeyTheme(this.userTheme,this.showUserUpload?1:0)}},methods:{getActionDisplayName:function(e){return Object(i.c)(e)},validateCopyName:function(e,t,n){t?0<this.filterUserThemeByName(t).length?n(new Error(this.getActionDisplayName("duplicate-them-name"))):n():n(new Error(this.getActionDisplayName("require-them-name")))},filterUserThemeByName:function(t){var n=!(1<arguments.length&&void 0!==arguments[1])||arguments[1];return this.userTheme.filter(function(e){return n?e.name===t:e.name!==t})},padEmpeyTheme:function(e){var t=1<arguments.length&&void 0!==arguments[1]?arguments[1]:0;if(!e.length)return[];var n=4-(e.length+t)%4;return n<4?e.concat(Array(n).fill({})):e},onAction:function(e,t){var n=this;switch(e){case"copy":this.openCopyForm(t.theme);break;case"upload":this.openCopyForm(t);break;case"rename":this.openRenameForm(t.name);break;case"delete":this.$confirm(this.getActionDisplayName("confirm-delete-theme"),this.getActionDisplayName("notice"),{confirmButtonText:this.getActionDisplayName("confirm"),cancelButtonText:this.getActionDisplayName("cancel"),type:"warning"}).then(function(){n.deleteUserThemeByName(t.name)}).catch(function(){});break;default:return}},deleteUserThemeByName:function(e){this.userTheme=this.filterUserThemeByName(e,!1),this.saveToLocal()},openRenameForm:function(e){this.copyForm.oldname=e,this.copyDialogVisible=!0},openCopyForm:function(e){8<=this.userTheme.length?this.$message.error(this.getActionDisplayName("max-user-theme")):(this.copyForm.theme=e,this.copyDialogVisible=!0)},closeCopyForm:function(){var e=this;this.copyDialogVisible=!1,this.$nextTick(function(){e.copyForm={}})},copyToUser:function(){var r=this;this.$refs.copyForm.validate(function(e){if(e){var t=r.copyForm,n=t.theme,a=t.name,l=t.oldname;n?r.userTheme.push({update:Date.now(),name:a,theme:n}):r.userTheme.forEach(function(e){e.name===l&&(e.update=Date.now(),e.name=a)}),r.saveToLocal(),r.closeCopyForm()}})},saveToLocal:function(){Object(r.d)(this.userTheme)}}},o=(n(531),n(0)),d=Object(o.a)(s,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-container page-theme"},[n("section",{staticClass:"theme-section"},[n("h2",[t._v("Official Theme")]),n("ul",t._l(t.officialTheme,function(e){return n("li",{key:e.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"official",config:e},on:{action:t.onAction}})],1)}),0)]),n("section",{staticClass:"theme-section second-section"},[n("h2",[t._v("My Theme ("+t._s(t.userThemeCount)+"/"+t._s(t.maxUserTheme)+")")]),n("ul",[t.showUserUpload?n("li",{staticClass:"theme-card"},[n("theme-card",{attrs:{type:"upload",config:{name:"upload"}},on:{action:t.onAction}})],1):t._e(),t._l(t.displayUserTheme,function(e){return n("li",{key:e.name,staticClass:"theme-card"},[n("theme-card",{attrs:{type:"user",config:e},on:{action:t.onAction}})],1)})],2)]),n("el-dialog",{attrs:{visible:t.copyDialogVisible},on:{"update:visible":function(e){t.copyDialogVisible=e}}},[n("el-form",{ref:"copyForm",attrs:{model:t.copyForm,rules:t.copyFormRule}},[n("el-form-item",{attrs:{label:"Theme name",prop:"name"}},[n("el-input",{model:{value:t.copyForm.name,callback:function(e){t.$set(t.copyForm,"name",e)},expression:"copyForm.name"}})],1)],1),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:t.closeCopyForm}},[t._v(t._s(t.getActionDisplayName("cancel")))]),n("el-button",{attrs:{type:"primary"},on:{click:t.copyToUser}},[t._v(t._s(t.getActionDisplayName("confirm")))])],1)],1)],1)},[],!1,null,null,null);t.default=d.exports},743:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"succès",type:"success"}}),e._v(" "),n("el-alert",{attrs:{title:"information",type:"info"}}),e._v(" "),n("el-alert",{attrs:{title:"avertissement",type:"warning"}}),e._v(" "),n("el-alert",{attrs:{title:"erreur",type:"error"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"succès",type:"success",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"info",type:"info",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"avertissement",type:"warning",effect:"dark"}}),e._v(" "),n("el-alert",{attrs:{title:"erreur",type:"error",effect:"dark"}})]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"alerte non fermable",type:"success",closable:!1}}),e._v(" "),n("el-alert",{attrs:{title:"texte de fermeture personnalisé",type:"info","close-text":"Gotcha"}}),e._v(" "),n("el-alert",{attrs:{title:"alerte avec callback",type:"warning"},on:{close:e.hello}})]],2)},staticRenderFns:[]},{methods:{hello:function(){alert("Hello World!")}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"succès",type:"success","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"information",type:"info","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"avertissement",type:"warning","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"erreur",type:"error","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"succès",type:"success",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"information",type:"info",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"avertissement",type:"warning",center:"","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"erreur",type:"error",center:"","show-icon":""}})]],2)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-alert",{attrs:{title:"Titre",type:"success",description:"Ceci est la description."}})]],2)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-alert",{attrs:{title:"succès",type:"success",description:"Plus de texte pour décrire.","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"information",type:"info",description:"Plus de texte pour décrire.","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"avertissement",type:"warning",description:"Plus de texte pour décrire.","show-icon":""}}),e._v(" "),n("el-alert",{attrs:{title:"erreur",type:"error",description:"Plus de texte pour décrire.","show-icon":""}})]],2)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche des messages importants.")]),e._m(1),n("p",[e._v("Les Alertes sont des composants non superposés qui ne disparaissent pas automatiquement.")]),n("demo-block",[n("div",[n("p",[e._v("Les Alertes peuvent être de 4 types différents, définit par "),n("code",[e._v("type")]),e._v(", le type par défaut étant "),n("code",[e._v("info")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success">\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info">\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning">\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error">\n  </el-alert>\n</template>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("effect")]),e._v(" pour changer le thème, le défaut étant "),n("code",[e._v("light")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="info"\n    type="info"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    effect="dark">\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    effect="dark">\n  </el-alert>\n</template>\n')])])])],2),e._m(4),n("p",[e._v("Personnalisez le bouton de fermeture avec du texte ou des symboles.")]),n("demo-block",[n("div",[n("p",[e._v("Les alertes peuvent être configurées pour être fermables ou non. Le bouton de fermeture et les callbacks sont aussi personnalisables. L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si le composant peut être fermé ou non. Il accepte un "),n("code",[e._v("boolean")]),e._v(", la valeur par défaut étant "),n("code",[e._v("true")]),e._v(". Vous pouvez configurer l'attribut "),n("code",[e._v("close-text")]),e._v("pour remplacer la croix du bouton de fermeture. Assurez-vous que "),n("code",[e._v("close-text")]),e._v(" soit une chaîne de caractères. L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand le composant est fermé.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="alerte non fermable"\n    type="success"\n    :closable="false">\n  </el-alert>\n  <el-alert\n    title="texte de fermeture personnalisé"\n    type="info"\n    close-text="Gotcha">\n  </el-alert>\n  <el-alert\n    title="alerte avec callback"\n    type="warning"\n    @close="hello">\n  </el-alert>\n</template>\n\n<script>\n  export default {\n    methods: {\n      hello() {\n        alert(\'Hello World!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Afficher une icône améliore la lisibilité.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("show-icon")]),e._v(" affiche une icône correspondant au type de l'alerte.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    center\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    center\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(8),n("p",[e._v("Contient un message avec plus d'informations.")]),n("demo-block",[n("div",[n("p",[e._v("A coté de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez ajouter "),n("code",[e._v("description")]),e._v(" pour décrire l'alerte avec plus de précisions. Les descriptions ne peuvent contenir que du texte, et les retours à la ligne sont automatiques.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="Titre"\n    type="success"\n    description="Ceci est la description.">\n  </el-alert>\n</template>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("Pour finir, voici un exemple utilisant à la fois l'icône et la description.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-alert\n    title="succès"\n    type="success"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="information"\n    type="info"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="avertissement"\n    type="warning"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n  <el-alert\n    title="erreur"\n    type="error"\n    description="Plus de texte pour décrire."\n    show-icon>\n  </el-alert>\n</template>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Thème")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Alert fournit deux thèmes différents, "),n("code",[e._v("light")]),e._v(" et "),n("code",[e._v("dark")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("center")]),e._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-et-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-et-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône et description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du composant.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Texte de description. Peut aussi être passé via le slot par défaut")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si peut être fermé ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("close-text")]),n("td",[e._v("Texte personnalisé pour le bouton de fermeture.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-icon")]),n("td",[e._v("Si une icône s'affiche ou non.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Détermine le thème.")]),n("td",[e._v("string")]),n("td",[e._v("light/dark")]),n("td",[e._v("light")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("la description")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Le contenu du titre.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche lorsque l'alerte est fermée.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},744:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-row",{staticClass:"demo-avatar demo-basic"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("cercle")]),t._v(" "),n("div",{staticClass:"demo-basic--circle"},[n("div",{staticClass:"block"},[n("el-avatar",{attrs:{size:50,src:t.circleUrl}})],1),t._v(" "),t._l(t.sizeList,function(e){return n("div",{key:e,staticClass:"block"},[n("el-avatar",{attrs:{size:e,src:t.circleUrl}})],1)})],2)]),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("carré")]),t._v(" "),n("div",{staticClass:"demo-basic--circle"},[n("div",{staticClass:"block"},[n("el-avatar",{attrs:{shape:"square",size:50,src:t.squareUrl}})],1),t._v(" "),t._l(t.sizeList,function(e){return n("div",{key:e,staticClass:"block"},[n("el-avatar",{attrs:{shape:"square",size:e,src:t.squareUrl}})],1)})],2)])],1)]],2)},staticRenderFns:[]},{data:function(){return{circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",squareUrl:"https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",sizeList:["large","medium","small"]}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",{staticClass:"demo-type"},[n("div",[n("el-avatar",{attrs:{icon:"el-icon-user-solid"}})],1),e._v(" "),n("div",[n("el-avatar",{attrs:{src:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"}})],1),e._v(" "),n("div",[n("el-avatar",[e._v(" user ")])],1)])]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("div",{staticClass:"demo-type"},[t("el-avatar",{attrs:{size:60,src:"https://empty"},on:{error:this.errorHandler}},[t("img",{attrs:{src:"https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"}})])],1)]],2)},staticRenderFns:[]},{methods:{errorHandler:function(){return!0}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"demo-fit"},t._l(t.fits,function(e){return n("div",{key:e,staticClass:"block"},[n("span",{staticClass:"title"},[t._v(t._s(e))]),t._v(" "),n("el-avatar",{attrs:{shape:"square",size:100,fit:e,src:t.url}})],1)}),0)]],2)},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Avatars can be used to represent people or objects. It supports images, Icons, or characters.\nLes avatars peuvent être utilisés pour représenter des personnes ou des objets. Les images, icônes et les caractères sont supportés.")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-row class="demo-avatar demo-basic">\n    <el-col :span="12">\n      <div class="sub-title">cercle</div>\n      <div class="demo-basic--circle">\n        <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>\n        <div class="block" v-for="size in sizeList" :key="size">\n          <el-avatar :size="size" :src="circleUrl"></el-avatar>\n        </div>\n      </div>\n    </el-col>  \n    <el-col :span="12">\n      <div class="sub-title">carré</div>\n      <div class="demo-basic--circle">\n        <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>\n        <div class="block" v-for="size in sizeList" :key="size">\n          <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>\n        </div>\n      </div>\n    </el-col>\n  </el-row>\n</template>\n<script>\n  export default {\n    data () {\n      return {\n        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",\n        squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",\n        sizeList: ["large", "medium", "small"]\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(3),n("p",[e._v("Les images, icônes et les caractères sont supportés.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-type">\n    <div>\n      <el-avatar icon="el-icon-user-solid"></el-avatar>\n    </div>\n    <div>\n      <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>\n    </div>\n    <div>\n      <el-avatar> user </el-avatar>\n    </div>\n  </div>\n</template>\n')])])])],2),e._m(4),n("p",[e._v("fallback en cas d'erreur de chargement d'image")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-type">\n    <el-avatar :size="60" src="https://empty" @error="errorHandler">\n      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>\n      </el-avatar>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      errorHandler() {\n        return true\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(5),e._m(6),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="demo-fit">\n    <div class="block" v-for="fit in fits" :key="fit">\n        <span class="title">{{ fit }}</span>\n        <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>\n    </div>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n        url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\'\n      }\n    }\n  }\n<\/script>\n\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),n("p",[e._v("| Slot Name | Description |\n| default  | personnalise le contenu de l'avatar |")])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"avatar-avatar"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avatar-avatar","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avatar avatar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("utilisez les prop "),n("code",[e._v("shape")]),e._v(" et"),n("code",[e._v("size")]),e._v(" pour définir la forme et la taille de l'avatar")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fallback-en-cas-d-erreur-de-chargement-d-image"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fallback-en-cas-d-erreur-de-chargement-d-image","aria-hidden":"true"}},[this._v("¶")]),this._v(" fallback en cas d'erreur de chargement d'image")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"comment-l-image-s-adapte-a-son-conteneur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#comment-l-image-s-adapte-a-son-conteneur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Comment l'image s'adapte à son conteneur")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Défini comment l'image s'adapte à son conteneur, pareil que "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Défini le type de représentation sur Icon, plus d’informations sur le composant Icon")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Défini la taille de l'avatar")]),n("td",[e._v("number/string")]),n("td",[e._v("number / large / medium / small")]),n("td",[e._v("large")])]),n("tr",[n("td",[e._v("shape")]),n("td",[e._v("Défini la forme de l'avatar")]),n("td",[e._v("string")]),n("td",[e._v("circle / square")]),n("td",[e._v("circle")])]),n("tr",[n("td",[e._v("src")]),n("td",[e._v("L'adresse de l'image pour un avatar image")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("srcSet")]),n("td",[e._v("Une liste d'un ou plusieurs string séparés par des virgules indiquant un ensemble de sources d'images possibles que le user agent peut utiliser")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("alt")]),n("td",[e._v("Cet attribut définit une description textuelle alternative de l'image")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Défini comment l'image s'adapte à son conteneur")]),n("td",[e._v("string")]),n("td",[e._v("fill / contain / cover / none / scale-down")]),n("td",[e._v("cover")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("handler en cas d'erreur de chargement de l'image, renvoie false pour éviter le fallback par défaut")]),n("td",[e._v("(e: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])}],!1,null,null,null);t.default=i.exports},745:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[this._v("\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  "),t("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap"}})]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[this._v("\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  "),t("el-backtop",{attrs:{target:".page-component__scroll .el-scrollbar__wrap",bottom:100}},[t("div",{staticStyle:{"{\n        height":"100%",width:"100%","background-color":"#f2f5f6","box-shadow":"0 0 6px rgba(0,0,0, .12)","text-align":"center","line-height":"40px",color:"#1989fa"}},[this._v("\n      UP\n    ")])])]],2)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un bouton pour revenir en haut de la page")]),e._m(1),n("p",[e._v("Scrollez en bas de la page pour voir le bouton en bas à droite.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("La zone d'affichage est de 40px * 40px.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  Scrollez en bas de la page pour voir le bouton en bas à droite.\n  <el-backtop target=".page-component__scroll .el-scrollbar__wrap" :bottom="100">\n    <div\n      style="{\n        height: 100%;\n        width: 100%;\n        background-color: #f2f5f6;\n        box-shadow: 0 0 6px rgba(0,0,0, .12);\n        text-align: center;\n        line-height: 40px;\n        color: #1989fa;\n      }"\n    >\n      UP\n    </div>\n  </el-backtop>\n</template>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"backtop"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#backtop","aria-hidden":"true"}},[this._v("¶")]),this._v(" Backtop")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customizations"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customizations")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("La cible pour déclencher le scroll")]),n("td",[e._v("string")]),n("td"),n("td")]),n("tr",[n("td",[e._v("visibility-height")]),n("td",[e._v("Le bouton ne s'affichera pas tant que la hauteur de défilement n'aura pas atteint cette valeur.")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("right")]),n("td",[e._v("La distance du bord droit")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("bottom")]),n("td",[e._v("La distance du bord gauche")]),n("td",[e._v("number")]),n("td"),n("td",[e._v("40")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique")]),n("td",[e._v("click event")])])])])}],!1,null,null,null);t.default=i.exports},746:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:12}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:3}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:1,type:"primary"}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:2,type:"warning"}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Cliquez"),n("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Commentaires\n      "),n("el-badge",{staticClass:"mark",attrs:{value:12}})],1),e._v(" "),n("el-dropdown-item",{staticClass:"clearfix"},[e._v("\n      Réponses\n      "),n("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-badge",{staticClass:"item",attrs:{value:"new"}},[n("el-button",{attrs:{size:"small"}},[e._v("Commentaires")])],1),e._v(" "),n("el-badge",{staticClass:"item",attrs:{value:"hot"}},[n("el-button",{attrs:{size:"small"}},[e._v("Réponses")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[this._v("Requète")]),this._v(" "),t("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[t("el-button",{staticClass:"share-button",attrs:{icon:"el-icon-share",type:"primary"}})],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un nombre ou un status affiché par-dessus un bouton ou un icône.")]),e._m(1),n("p",[e._v("Affiche le nombre de nouveaux messages.")]),n("demo-block",[n("div",[n("p",[e._v("La quantité est définit par "),n("code",[e._v("value")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="12" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n<el-badge :value="1" class="item" type="primary">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="2" class="item" type="warning">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    Cliquez<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item class="clearfix">\n      Commentaires\n      <el-badge class="mark" :value="12" />\n    </el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      Réponses\n      <el-badge class="mark" :value="3" />\n    </el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez configurer la valeur maximale.")]),n("demo-block",[n("div",[n("p",[e._v("La valeur maximale est définit par "),n("code",[e._v("max")]),e._v(" qui accepte un "),n("code",[e._v("Number")]),e._v(". Ceci ne marche qui si "),n("code",[e._v("value")]),e._v(" est également un "),n("code",[e._v("Number")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affiche du texte autre que des nombres.")]),n("demo-block",[n("div",[n("p",[e._v("Quand "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("String")]),e._v(", il affiche un texte personnalisé.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge value="new" class="item">\n  <el-button size="small">Commentaires</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">Réponses</el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez un point rouge pour signaler du contenu devant être remarqué.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("is-dot")]),e._v(" qui est un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-badge is-dot class="item">Requète</el-badge>\n<el-badge is-dot class="item">\n  <el-button class="share-button" icon="el-icon-share" type="primary"></el-button>\n</el-badge>\n\n<style>\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n</style>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"badge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Badge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-maximale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-maximale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur maximale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"configuration"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configuration","aria-hidden":"true"}},[this._v("¶")]),this._v(" Configuration")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"point-rouge"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#point-rouge","aria-hidden":"true"}},[this._v("¶")]),this._v(" Point rouge")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur affichée.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale, affiche '{max}+' quand elle est dépassée. Ne marche que si "),n("code",[e._v("value")]),e._v(" est un "),n("code",[e._v("Number")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-dot")]),n("td",[e._v("Affiche un point rouge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hidden")]),n("td",[e._v("Cache le badge.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},747:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(25),r={"$--box-shadow-light":"boxShadowLight","$--box-shadow-base":"boxShadowBase","$--border-radius-base":"borderRadiusBase","$--border-radius-small":"borderRadiusSmall"},i={boxShadowLight:"0 2px 12px 0 rgba(0, 0, 0, 0.1)",boxShadowBase:"0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)",borderRadiusBase:"4px",borderRadiusSmall:"2px"},s={created:function(){a.a.$on(l.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},boxShadowLight:"",boxShadowBase:"",borderRadiusBase:"",borderRadiusSmall:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(r).forEach(function(e){t[e]?n[r[e]]=t[e]:n[r[e]]=i[r[e]]})}}}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous normalisons l'apparence des bordures qui peuvent être utilisées pour les boutons, les cartes, les pop-ups et d'autres composants.")]),e._m(1),n("p",[e._v("Il y a plusieurs styles de bordure que vous pouvez choisir.")]),e._m(2),e._m(3),n("p",[e._v("Il y a plusieurs styles de radius que vous pouvez choisir.")]),n("el-row",{staticClass:"demo-radius",attrs:{gutter:12}},[n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Pas de radius")]),n("div",{staticClass:"value"},[e._v("border-radius: 0px")]),n("div",{staticClass:"radius"})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Petit radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusSmall))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusSmall}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Grand radius")]),n("div",{staticClass:"value"},[e._v("border-radius: "+e._s(e.borderRadiusBase))]),n("div",{staticClass:"radius",style:{borderRadius:e.borderRadiusBase}})]),n("el-col",{attrs:{span:6,xs:{span:12}}},[n("div",{staticClass:"title"},[e._v("Radius rond")]),n("div",{staticClass:"value"},[e._v("border-radius: 30px")]),n("div",{staticClass:"radius radius-30"})])],1),e._m(4),n("p",[e._v("Il y a plusieurs styles d'ombres que vous pouvez choisir.")]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowBase}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre de base, box-shadow: "+e._s(e.boxShadowBase))]),n("div",{staticClass:"demo-shadow",style:{boxShadow:e.boxShadowLight}}),n("span",{staticClass:"demo-shadow-text"},[e._v("Ombre légère, box-shadow: "+e._s(e.boxShadowLight))])],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordure-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordure-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordure")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",{staticClass:"demo-border"},[n("tbody",[n("tr",[n("td",{staticClass:"text"},[e._v("Nom")]),n("td",{staticClass:"text"},[e._v("Épaisseur")]),n("td",{staticClass:"line"},[e._v("Demo")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Solid")]),n("td",{staticClass:"text"},[e._v("1px")]),n("td",{staticClass:"line"},[n("div")])]),n("tr",[n("td",{staticClass:"text"},[e._v("Dashed")]),n("td",{staticClass:"text"},[e._v("2px")]),n("td",{staticClass:"line"},[n("div",{staticClass:"dashed"})])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"radius"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radius","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radius")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])}],!1,null,null,null);t.default=d.exports},748:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{separator:"/"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("Accueil")]),e._v(" "),n("el-breadcrumb-item",[n("a",{attrs:{href:"/"}},[e._v("Gestion promotions")])]),e._v(" "),n("el-breadcrumb-item",[e._v("Liste promotions")]),e._v(" "),n("el-breadcrumb-item",[e._v("Détail promotion")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-breadcrumb",{attrs:{"separator-class":"el-icon-arrow-right"}},[n("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[e._v("Accueil")]),e._v(" "),n("el-breadcrumb-item",[e._v("Gestion promotions")]),e._v(" "),n("el-breadcrumb-item",[e._v("Liste promotions")]),e._v(" "),n("el-breadcrumb-item",[e._v("Détail promotion")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche le chemin de la page actuelle, afin de pouvoir naviguer plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Dans "),n("code",[e._v("el-breadcrumb")]),e._v(", chaque "),n("code",[e._v("el-breadcrumb-item")]),e._v(" est un tag représentant chaque niveau depuis la page d'accueil. Ce Composant possède un attribut de type "),n("code",[e._v("String")]),e._v(" appelé "),n("code",[e._v("separator")]),e._v(" qui détermine le séparateur. Sa valeur par défaut est '/'.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item><a href="/">Gestion promotions</a></el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("separator-class")]),e._v(" pour utiliser "),n("code",[e._v("iconfont")]),e._v(" en tant que séparateur. Cela remplacera "),n("code",[e._v("separator")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-breadcrumb separator-class="el-icon-arrow-right">\n  <el-breadcrumb-item :to="{ path: \'/\' }">Accueil</el-breadcrumb-item>\n  <el-breadcrumb-item>Gestion promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Liste promotions</el-breadcrumb-item>\n  <el-breadcrumb-item>Détail promotion</el-breadcrumb-item>\n</el-breadcrumb>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Breadcrumb")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone-de-separation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone-de-separation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône de séparation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Caractère de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("/")])]),n("tr",[n("td",[e._v("separator-class")]),n("td",[e._v("Classe de l'icône de séparation")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-breadcrumb-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-breadcrumb-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Breadcrumb Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("to")]),n("td",[e._v("Route cible du lien, identique au "),n("code",[e._v("to")]),e._v(" de "),n("code",[e._v("vue-router")]),e._v(".")]),n("td",[e._v("string/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("replace")]),n("td",[e._v("Si "),n("code",[e._v("true")]),e._v(", la navigation ne laissera pas d'historique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},749:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success"}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info"}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning"}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger"}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:""}},[e._v("Plein")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Arrondi")]),e._v(" "),n("el-button",{attrs:{type:"primary",round:""}},[e._v("Primary")]),e._v(" "),n("el-button",{attrs:{type:"success",round:""}},[e._v("Success")]),e._v(" "),n("el-button",{attrs:{type:"info",round:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",round:""}},[e._v("Warning")]),e._v(" "),n("el-button",{attrs:{type:"danger",round:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{icon:"el-icon-search",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-edit",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"success",icon:"el-icon-check",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"info",icon:"el-icon-message",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"warning",icon:"el-icon-star-off",circle:""}}),e._v(" "),n("el-button",{attrs:{type:"danger",icon:"el-icon-delete",circle:""}})],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",{attrs:{disabled:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{type:"primary",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",disabled:""}},[e._v("Danger")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{plain:"",disabled:""}},[e._v("Plein")]),e._v(" "),n("el-button",{attrs:{type:"primary",plain:"",disabled:""}},[e._v("Principal")]),e._v(" "),n("el-button",{attrs:{type:"success",plain:"",disabled:""}},[e._v("Succès")]),e._v(" "),n("el-button",{attrs:{type:"info",plain:"",disabled:""}},[e._v("Info")]),e._v(" "),n("el-button",{attrs:{type:"warning",plain:"",disabled:""}},[e._v("Attention")]),e._v(" "),n("el-button",{attrs:{type:"danger",plain:"",disabled:""}},[e._v("Danger")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"text"}},[e._v("Bouton texte")]),e._v(" "),n("el-button",{attrs:{type:"text",disabled:""}},[e._v("Bouton texte")])],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Recherche")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Upload"),n("i",{staticClass:"el-icon-upload el-icon-right"})])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-arrow-left"}},[e._v("Page précédente")]),e._v(" "),n("el-button",{attrs:{type:"primary"}},[e._v("Page suivante"),n("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),e._v(" "),n("el-button-group",[n("el-button",{attrs:{type:"primary",icon:"el-icon-edit"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-share"}}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-delete"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-button",{attrs:{type:"primary",loading:!0}},[this._v("Chargement")])],1)},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-button",[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium"}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small"}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini"}},[e._v("Mini")])],1),e._v(" "),n("el-row",[n("el-button",{attrs:{round:""}},[e._v("Défaut")]),e._v(" "),n("el-button",{attrs:{size:"medium",round:""}},[e._v("Medium")]),e._v(" "),n("el-button",{attrs:{size:"small",round:""}},[e._v("Small")]),e._v(" "),n("el-button",{attrs:{size:"mini",round:""}},[e._v("Mini")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Bouton communément utilisé.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("type")]),e._v(", "),n("code",[e._v("plain")]),e._v(", "),n("code",[e._v("round")]),e._v(" et "),n("code",[e._v("circle")]),e._v(" pour définir le style du bouton.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Défaut</el-button>\n  <el-button type="primary">Primary</el-button>\n  <el-button type="success">Success</el-button>\n  <el-button type="info">Info</el-button>\n  <el-button type="warning">Warning</el-button>\n  <el-button type="danger">Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain>Plein</el-button>\n  <el-button type="primary" plain>Primary</el-button>\n  <el-button type="success" plain>Success</el-button>\n  <el-button type="info" plain>Info</el-button>\n  <el-button type="warning" plain>Warning</el-button>\n  <el-button type="danger" plain>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button round>Arrondi</el-button>\n  <el-button type="primary" round>Primary</el-button>\n  <el-button type="success" round>Success</el-button>\n  <el-button type="info" round>Info</el-button>\n  <el-button type="warning" round>Warning</el-button>\n  <el-button type="danger" round>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button icon="el-icon-search" circle></el-button>\n  <el-button type="primary" icon="el-icon-edit" circle></el-button>\n  <el-button type="success" icon="el-icon-check" circle></el-button>\n  <el-button type="info" icon="el-icon-message" circle></el-button>\n  <el-button type="warning" icon="el-icon-star-off" circle></el-button>\n  <el-button type="danger" icon="el-icon-delete" circle></el-button>\n</el-row>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour déterminer si un bouton est désactivé ou non. Il accepte un "),n("code",[e._v("Boolean")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button disabled>Défaut</el-button>\n  <el-button type="primary" disabled>Principal</el-button>\n  <el-button type="success" disabled>Succès</el-button>\n  <el-button type="info" disabled>Info</el-button>\n  <el-button type="warning" disabled>Attention</el-button>\n  <el-button type="danger" disabled>Danger</el-button>\n</el-row>\n\n<el-row>\n  <el-button plain disabled>Plein</el-button>\n  <el-button type="primary" plain disabled>Principal</el-button>\n  <el-button type="success" plain disabled>Succès</el-button>\n  <el-button type="info" plain disabled>Info</el-button>\n  <el-button type="warning" plain disabled>Attention</el-button>\n  <el-button type="danger" plain disabled>Danger</el-button>\n</el-row>\n')])])])],2),e._m(4),n("p",[e._v("Bouton sans bordure ni fond.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text">Bouton texte</el-button>\n<el-button type="text" disabled>Bouton texte</el-button>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez des icônes pour ajouter plus de sens aux boutons. Vous pouvez utiliser uniquement l'icône pour économiser de l'espace, ou bien l'utiliser avec du texte.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("icon")]),e._v(" pour ajouter une icône. Vous pourrez trouver la liste des icônes dans le composant Icon d'Element. Ajouter des icônes sur le coté droit du texte est possible grâce à la balise "),n("code",[e._v("<i>")]),e._v(". Des icônes personnalisées peuvent également être utilisées.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" icon="el-icon-edit"></el-button>\n<el-button type="primary" icon="el-icon-share"></el-button>\n<el-button type="primary" icon="el-icon-delete"></el-button>\n<el-button type="primary" icon="el-icon-search">Recherche</el-button>\n<el-button type="primary">Upload<i class="el-icon-upload el-icon-right"></i></el-button>\n')])])])],2),e._m(6),n("p",[e._v("Affiche un groupe de bouton. Peut être utilisé pour grouper un ensemble d'opérations similaires.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la balise "),n("code",[e._v("<el-button-group>")]),e._v(" pour grouper vos boutons.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button-group>\n  <el-button type="primary" icon="el-icon-arrow-left">Page précédente</el-button>\n  <el-button type="primary">Page suivante<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="el-icon-edit"></el-button>\n  <el-button type="primary" icon="el-icon-share"></el-button>\n  <el-button type="primary" icon="el-icon-delete"></el-button>\n</el-button-group>\n')])])])],2),e._m(7),n("p",[e._v("Cliquez sur le bouton pour charger des données et il affichera un état de chargement.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("loading")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour afficher un état de chargement.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="primary" :loading="true">Chargement</el-button>\n')])])])],2),e._m(8),n("p",[e._v("En plus de la taille par défaut, le composant Button fournit trois tailles supplémentaires pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour choisir d'autres tailles parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-button>Défaut</el-button>\n  <el-button size="medium">Medium</el-button>\n  <el-button size="small">Small</el-button>\n  <el-button size="mini">Mini</el-button>\n</el-row>\n<el-row>\n  <el-button round>Défaut</el-button>\n  <el-button size="medium" round>Medium</el-button>\n  <el-button size="small" round>Small</el-button>\n  <el-button size="mini" round>Mini</el-button>\n</el-row>\n')])])])],2),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton désactivé")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" détermine si le bouton est désactivé.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupes-de-boutons"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupes-de-boutons","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupes de boutons")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bouton-en-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bouton-en-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bouton en chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info / text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("plain")]),n("td",[e._v("Détermine si le bouton est plein.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("round")]),n("td",[e._v("Détermine si le bouton est arrondi.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("circle")]),n("td",[e._v("Détermine si le bouton est un cercle.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Détermine si l'état de chargement est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le bouton")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("autofocus")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("native-type")]),n("td",[e._v("Identique à l'attribut natif "),n("code",[e._v("type")])]),n("td",[e._v("string")]),n("td",[e._v("button / submit / reset")]),n("td",[e._v("button")])])])])}],!1,null,null,null);t.default=i.exports},750:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-calendar",{model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:new Date}}}),"element-demo1":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-calendar",{scopedSlots:n._u([{key:"dateCell",fn:function(e){e.date;var t=e.data;return[a("p",{class:t.isSelected?"is-selected":""},[n._v("\n      "+n._s(t.day.split("-").slice(1).join("-"))+" "+n._s(t.isSelected?"✔️":"")+"\n    ")])]}}])})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-calendar",{attrs:{range:["2019-03-04","2019-03-24"]}})],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche un calendrier.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("value")]),e._v(" pour spécifier le mois à afficher. Si "),n("code",[e._v("value")]),e._v(" n'est pas spécifiée, le mois actuel sera affiché. "),n("code",[e._v("value")]),e._v(" supporte le two-way binding.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-calendar v-model="value">\n</el-calendar>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: new Date()\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Personnalisez le contenu du calendrier en utilisant le "),n("code",[e._v("scoped-slot")]),e._v(" appelé "),n("code",[e._v("dateCell")]),e._v(". Dans ce "),n("code",[e._v("scoped-slot")]),e._v(" vous aurez accès au paramètres date (date de la cellule courante), data (incluant les attributs type, isSelected et day). Pour plus d'informations, référez-vous à la documentation ci-dessous.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar>\n  \x3c!-- Use 2.5 slot syntax. If you use Vue 2.6, please use new slot syntax--\x3e\n  <template\n    slot=\"dateCell\"\n    slot-scope=\"{date, data}\">\n    <p :class=\"data.isSelected ? 'is-selected' : ''\">\n      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}\n    </p>\n  </template>\n</el-calendar>\n<style>\n  .is-selected {\n    color: #1989FA;\n  }\n</style>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("range")]),e._v(" pour afficher un intervalle particulier. Le début doit être un lundi et la fin un dimanche, l'intervalle ne pouvant excéder deux mois.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-calendar :range=\"['2019-03-04', '2019-03-24']\">\n</el-calendar>\n")])])])],2),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"calendrier"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#calendrier","aria-hidden":"true"}},[this._v("¶")]),this._v(" Calendrier")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Valeur liée.")]),n("td",[e._v("Date/string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("Intervalle de dates, début et fin inclus. Start time must be start day of week, end time must be end day of week, the time span cannot exceed two months.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("first-day-of-week")]),n("td",[e._v("fisrt day of week")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("1")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-datecell"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-datecell","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot dateCell")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("date")]),n("td",[e._v("Date de la cellule courante.")]),n("td",[e._v("Date")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("{ type, isSelected, day }. "),n("code",[e._v("type")]),e._v(" indique le mois de la date courante, les valeurs prev-month, current-month et next-month pouvant être utilisées; "),n("code",[e._v("isSelected")]),e._v(" indique si la date est sélectionnée; "),n("code",[e._v("day")]),e._v(" est la date formattée en yyyy-MM-dd.")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},751:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},[n("div",{staticClass:"clearfix",attrs:{slot:"header"},slot:"header"},[n("span",[t._v("Card name")]),t._v(" "),n("el-button",{staticStyle:{float:"right",padding:"3px 0"},attrs:{type:"text"}},[t._v("Bouton")])],1),t._v(" "),t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])})],2)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-card",{staticClass:"box-card"},t._l(4,function(e){return n("div",{key:e,staticClass:"text item"},[t._v("\n    "+t._s("List item "+e)+"\n  ")])}),0)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-row",n._l(2,function(e,t){return a("el-col",{key:e,attrs:{span:8,offset:0<t?2:0}},[a("el-card",{attrs:{"body-style":{padding:"0px"}}},[a("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),n._v(" "),a("div",{staticStyle:{padding:"14px"}},[a("span",[n._v("Yummy hamburger")]),n._v(" "),a("div",{staticClass:"bottom clearfix"},[a("time",{staticClass:"time"},[n._v(n._s(n.currentDate))]),n._v(" "),a("el-button",{staticClass:"button",attrs:{type:"text"}},[n._v("Operating")])],1)])])],1)}),1)],1)},staticRenderFns:[]},{data:function(){return{currentDate:new Date}}}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:12}},[n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"always"}},[e._v("\n      Always\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"hover"}},[e._v("\n      Hover\n    ")])],1),e._v(" "),n("el-col",{attrs:{span:8}},[n("el-card",{attrs:{shadow:"never"}},[e._v("\n      Never\n    ")])],1)],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Conteneur intégrant des informations.")]),e._m(1),n("p",[e._v("Le composant Card comprend un titre, un contenu et des opérations.")]),n("demo-block",[n("div",[n("p",[e._v("Card est composé d'un "),n("code",[e._v("header")]),e._v(" et d'un "),n("code",[e._v("body")]),e._v(". "),n("code",[e._v("header")]),e._v(" est optionnel et son contenu nécessite l'utilisation d'un slot.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div slot="header" class="clearfix">\n    <span>Card name</span>\n    <el-button style="float: right; padding: 3px 0" type="text">Bouton</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    margin-bottom: 18px;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n    display: table;\n    content: "";\n  }\n  .clearfix:after {\n    clear: both\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Le header peut être omis.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-card class="box-card">\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'List item \' + o }}\n  </div>\n</el-card>\n\n<style>\n  .text {\n    font-size: 14px;\n  }\n\n  .item {\n    padding: 18px 0;\n  }\n\n  .box-card {\n    width: 480px;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Affichez un contenu plus riche grâce à la configuration.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("body-style")]),e._v(" définit le style CSS du "),n("code",[e._v("body")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("el-col")]),e._v(" pour la mise en page.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">\n    <el-card :body-style="{ padding: \'0px\' }">\n      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">\n      <div style="padding: 14px;">\n        <span>Yummy hamburger</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="button">Operating</el-button>\n        </div>\n      </div>\n    </el-card>\n  </el-col>\n</el-row>\n\n<style>\n  .time {\n    font-size: 13px;\n    color: #999;\n  }\n\n  .bottom {\n    margin-top: 13px;\n    line-height: 12px;\n  }\n\n  .button {\n    padding: 0;\n    float: right;\n  }\n\n  .image {\n    width: 100%;\n    display: block;\n  }\n\n  .clearfix:before,\n  .clearfix:after {\n      display: table;\n      content: "";\n  }\n\n  .clearfix:after {\n      clear: both\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      currentDate: new Date()\n    };\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez définir quand l'ombre des Cards doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("shadow")]),e._v(" détermine quand l'ombre doit apparaître. Les valeurs possibles sont "),n("code",[e._v("always")]),e._v(", "),n("code",[e._v("hover")]),e._v(" ou "),n("code",[e._v("never")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="12">\n  <el-col :span="8">\n    <el-card shadow="always">\n      Always\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="hover">\n      Hover\n    </el-card>\n  </el-col>\n  <el-col :span="8">\n    <el-card shadow="never">\n      Never\n    </el-card>\n  </el-col>\n</el-row>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"card"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"card-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#card-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Card simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"images"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#images","aria-hidden":"true"}},[this._v("¶")]),this._v(" Images")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ombres")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("header")]),n("td",[e._v("Titre de la Card. Accepte aussi un template DOM passé via "),n("code",[e._v("slot#header")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("body-style")]),n("td",[e._v("Style CSS du body.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{ padding: '20px' }")])]),n("tr",[n("td",[e._v("shadow")]),n("td",[e._v("Quand l'ombre doit apparaître")]),n("td",[e._v("string")]),n("td",[e._v("always / hover / never")]),n("td",[e._v("always")])])])])}],!1,null,null,null);t.default=i.exports},752:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand la souris passe sur l'indicateur (défaut)")]),t._v(" "),n("el-carousel",{attrs:{height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"small"},[t._v(t._s(e))])])}),1)],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défile quand on clique sur l'indicateur")]),t._v(" "),n("el-carousel",{attrs:{trigger:"click",height:"150px"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"small"},[t._v(t._s(e))])])}),1)],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{"indicator-position":"outside"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:5e3,arrow:"always"}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},t._l(6,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"medium"},[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-carousel",{attrs:{height:"200px",direction:"vertical",autoplay:!1}},t._l(4,function(e){return n("el-carousel-item",{key:e},[n("h3",{staticClass:"medium"},[t._v(t._s(e))])])}),1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche en boucle une série d'images ou de textes dans un espace limité.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-carousel")]),e._v(" avec "),n("code",[e._v("el-carousel-item")]),e._v(", et vous obtiendrez un carrousel. Le contenu de chaque slide est complètement personnalisable, il vous suffit juste de le placer à l'intérieur de la balise "),n("code",[e._v("el-carousel-item")]),e._v(". Par défaut le carrousel défile quand la souris passe sur un indicateur. Réglez "),n("code",[e._v("trigger")]),e._v(" sur "),n("code",[e._v("click")]),e._v(" et le carrousel défilera uniquement quand vous cliquerez sur l'indicateur.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défile quand la souris passe sur l\'indicateur (défaut)</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3 class="small">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Défile quand on clique sur l\'indicateur</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4" :key="item">\n        <h3 class="small">{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 150px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("Les indicateurs peuvent être affichés en dehors du carrousel.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("indicator-position")]),e._v(" détermine où les indicateurs sont localisés. Par défaut ils se trouvent à l'intérieur du carrousel, régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("outside")]),e._v(" les affichera à l'extérieur; régler "),n("code",[e._v("indicator-position")]),e._v(" sur "),n("code",[e._v("none")]),e._v(" les cachera totalement.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel indicator-position="outside">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir quand les flèches doivent apparaître.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("arrow")]),e._v(" détermine quand les flèches sont affichées. Par défaut elles apparaissent quand la souris passe sur le carrousel. Réglez "),n("code",[e._v("arrow")]),e._v(" sur "),n("code",[e._v("always")]),e._v(" ou "),n("code",[e._v("never")]),e._v(" affiche ou cache les flèches de manière permanente.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="5000" arrow="always">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3>{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 18px;\n    opacity: 0.75;\n    line-height: 300px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Quand la page est suffisamment large mais avec une hauteur limitée, vous pouvez activer le mode carte.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("card")]),e._v(" pour activer le mode carte. Hormis l'apparence, la principale différence par rapport au mode commun est que cliquer sur une des slides se trouvant de chaque coté fait directement défiler le carrousel.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel :interval="4000" type="card" height="200px">\n    <el-carousel-item v-for="item in 6" :key="item">\n      <h3 class="medium">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-carousel height="200px" direction="vertical" :autoplay="false">\n    <el-carousel-item v-for="item in 4" :key="item">\n      <h3 class="medium">{{ item }}</h3>\n    </el-carousel-item>\n  </el-carousel>\n</template>\n\n<style>\n  .el-carousel__item h3 {\n    color: #475669;\n    font-size: 14px;\n    opacity: 0.75;\n    line-height: 200px;\n    margin: 0;\n  }\n\n  .el-carousel__item:nth-child(2n) {\n    background-color: #99a9bf;\n  }\n\n  .el-carousel__item:nth-child(2n+1) {\n    background-color: #d3dce6;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"carousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Carousel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indicateurs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indicateurs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indicateurs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fleches"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fleches","aria-hidden":"true"}},[this._v("¶")]),this._v(" Flèches")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode carte")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, "),n("code",[e._v("direction")]),e._v(" est "),n("code",[e._v("horizontal")]),e._v(". Vous pouvez faire en sorte que le défilement soit vertical en mettant "),n("code",[e._v("direction")]),e._v(" à "),n("code",[e._v("vertical")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carrousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carrousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carrousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du carrousel.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("initial-index")]),n("td",[e._v("Index de la slide initiale (commence à 0).")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment les indicateurs sont déclenchés")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("autoplay")]),n("td",[e._v("Si le carrousel défile automatiquement")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("interval")]),n("td",[e._v("Intervalle pour le défilement automatique, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("indicator-position")]),n("td",[e._v("Position des indicateurs.")]),n("td",[e._v("string")]),n("td",[e._v("outside/none")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("arrow")]),n("td",[e._v("Détermine quand les flèches sont affichées.")]),n("td",[e._v("string")]),n("td",[e._v("always/hover/never")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du carrousel.")]),n("td",[e._v("string")]),n("td",[e._v("card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loop")]),n("td",[e._v("Affiche les éléments en boucle.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Détermine la direction du défilement.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal/vertical")]),n("td",[e._v("horizontal")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-carrousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-carrousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Carrousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la slide active défile.")]),n("td",[e._v("Index de la nouvelle slide, index de l'ancienne slide")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-carrousel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-carrousel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du Carrousel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Mathode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("setActiveItem")]),n("td",[e._v("Défile manuellement vers une slide.")]),n("td",[e._v("index de la slide d'arrivée, à partir de 0; ou bien le "),n("code",[e._v("name")]),e._v(" du "),n("code",[e._v("el-carousel-item")]),e._v(" correspondant")])]),n("tr",[n("td",[e._v("prev")]),n("td",[e._v("Défile vers la slide précédente.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next")]),n("td",[e._v("Défile vers la slide suivante.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-carrousel-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-carrousel-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Carrousel-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom de l'item, peut être utilisé dans "),n("code",[e._v("setActiveItem")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte affiché au niveau de l'indicateur correspondant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},753:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options enfants se développent lorsque vous cliquez dessus (par défaut)")]),t._v(" "),n("el-cascader",{attrs:{options:t.options},on:{change:t.handleChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Les options enfants se développent lorsqu'elles sont survolées")]),t._v(" "),n("el-cascader",{attrs:{options:t.options,props:{expandTrigger:"hover"}},on:{change:t.handleChange},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)])},staticRenderFns:[]},{data:function(){return{value:[],options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",disabled:!0,children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo2":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,clearable:""}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo3":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{options:this.options,"show-all-levels":!1}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo4":l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Afficher toutes les balises (par défaut)")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:e.props,clearable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Réduire les balises")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:e.props,"collapse-tags":"",clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{props:{multiple:!0},options:[{value:1,label:"Asia",children:[{value:2,label:"China",children:[{value:3,label:"Beijing"},{value:4,label:"Shanghai"},{value:5,label:"Hangzhou"}]},{value:6,label:"Japan",children:[{value:7,label:"Tokyo"},{value:8,label:"Osaka"},{value:9,label:"Kyoto"}]},{value:10,label:"Korea",children:[{value:11,label:"Seoul"},{value:12,label:"Busan"},{value:13,label:"Taegu"}]}]},{value:14,label:"Europe",children:[{value:15,label:"France",children:[{value:16,label:"Paris"},{value:17,label:"Marseille"},{value:18,label:"Lyon"}]},{value:19,label:"UK",children:[{value:20,label:"London"},{value:21,label:"Birmingham"},{value:22,label:"Manchester"}]}]},{value:23,label:"North America",children:[{value:24,label:"US",children:[{value:25,label:"New York"},{value:26,label:"Los Angeles"},{value:27,label:"Washington"}]},{value:28,label:"Canada",children:[{value:29,label:"Toronto"},{value:30,label:"Montreal"},{value:31,label:"Ottawa"}]}]}]}}}),"element-demo5":l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Sélectionnez n'importe quel niveau d'options (Sélection unique)")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:{checkStrictly:!0},clearable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Sélectionnez n'importe quel niveau d'options (sélection multiple)")]),e._v(" "),n("el-cascader",{attrs:{options:e.options,props:{multiple:!0,checkStrictly:!0},clearable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo6":(a=0,l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader",{attrs:{props:this.props}})],1)},staticRenderFns:[]},{data:function(){return{props:{lazy:!0,lazyLoad:function(e,t){var n=e.level;setTimeout(function(){var e=Array.from({length:n+1}).map(function(e){return{value:++a,label:"Option - "+a,leaf:2<=n}});t(e)},1e3)}}}}})),"element-demo7":l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Filtrable (Sélection unique)")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:e.options,filterable:""}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Filtrable (Sélection multiple)")]),e._v(" "),n("el-cascader",{attrs:{placeholder:"Try searchingL Guide",options:e.options,props:{multiple:!0},filterable:""}})],1)])},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo8":l({render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("el-cascader",{attrs:{options:a.options},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return[l("span",[a._v(a._s(n.label))]),a._v(" "),t.isLeaf?a._e():l("span",[a._v(" ("+a._s(n.children.length)+") ")])]}}])})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}}),"element-demo9":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-cascader-panel",{attrs:{options:this.options}})],1)},staticRenderFns:[]},{data:function(){return{options:[{value:"guide",label:"Guide",children:[{value:"disciplines",label:"Disciplines",children:[{value:"consistency",label:"Consistency"},{value:"feedback",label:"Feedback"},{value:"efficiency",label:"Efficiency"},{value:"controllability",label:"Controllability"}]},{value:"navigation",label:"Navigation",children:[{value:"side nav",label:"Side Navigation"},{value:"top nav",label:"Top Navigation"}]}]},{value:"component",label:"Component",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout"},{value:"color",label:"Color"},{value:"typography",label:"Typography"},{value:"icon",label:"Icon"},{value:"button",label:"Button"}]},{value:"form",label:"Form",children:[{value:"radio",label:"Radio"},{value:"checkbox",label:"Checkbox"},{value:"input",label:"Input"},{value:"input-number",label:"InputNumber"},{value:"select",label:"Select"},{value:"cascader",label:"Cascader"},{value:"switch",label:"Switch"},{value:"slider",label:"Slider"},{value:"time-picker",label:"TimePicker"},{value:"date-picker",label:"DatePicker"},{value:"datetime-picker",label:"DateTimePicker"},{value:"upload",label:"Upload"},{value:"rate",label:"Rate"},{value:"form",label:"Form"}]},{value:"data",label:"Data",children:[{value:"table",label:"Table"},{value:"tag",label:"Tag"},{value:"progress",label:"Progress"},{value:"tree",label:"Tree"},{value:"pagination",label:"Pagination"},{value:"badge",label:"Badge"}]},{value:"notice",label:"Notice",children:[{value:"alert",label:"Alert"},{value:"loading",label:"Loading"},{value:"message",label:"Message"},{value:"message-box",label:"MessageBox"},{value:"notification",label:"Notification"}]},{value:"navigation",label:"Navigation",children:[{value:"menu",label:"NavMenu"},{value:"tabs",label:"Tabs"},{value:"breadcrumb",label:"Breadcrumb"},{value:"dropdown",label:"Dropdown"},{value:"steps",label:"Steps"}]},{value:"others",label:"Others",children:[{value:"dialog",label:"Dialog"},{value:"tooltip",label:"Tooltip"},{value:"popover",label:"Popover"},{value:"card",label:"Card"},{value:"carousel",label:"Carousel"},{value:"collapse",label:"Collapse"}]}]},{value:"resource",label:"Resource",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"docs",label:"Design Documentation"}]}]}}})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si les options ont une structure hiérarchique claire, Le composant Cascader peut être utilisé pour les afficher et les sélectionner.")]),e._m(1),n("p",[e._v("Il y a deux manières d'étendres les options enfants.")]),n("demo-block",[n("div",[n("p",[e._v("Assigner l'attribut "),n("code",[e._v("options")]),e._v(" à un tableau d'options fournit un composant Cascader. L'attribut "),n("code",[e._v("props.expandTrigger")]),e._v(" définit comment les options enfants sont étendues.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Les options enfants se développent lorsque vous cliquez dessus (par défaut)</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Les options enfants se développent lorsqu'elles sont survolées</span>\n  <el-cascader\n    v-model=\"value\"\n    :options=\"options\"\n    :props=\"{ expandTrigger: 'hover' }\"\n    @change=\"handleChange\"></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [],\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, le premier élément du tableau "),n("code",[e._v("options")]),e._v(" a un champ"),n("code",[e._v("disabled: true")]),e._v(", il est donc désactivé. Par défaut, Cascader vérifie le champ "),n("code",[e._v("disabled")]),e._v(" dans chaque objet option. Si vous utilisez un autre nom de champ pour indiquer si une option est désactivée, vous pouvez l'affecter dans l'attribut "),n("code",[e._v("props.disabled")]),e._v(" (voir le tableau des API ci-dessous pour plus de détails). Et bien sûr, les noms de champs "),n("code",[e._v("value")]),e._v(","),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("children")]),e._v(" peuvent également être personnalisés de la même manière.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\"></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          disabled: true,\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" clearable></el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("L'entrée peut afficher uniquement le dernier niveau au lieu de tous les niveaux.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("show-all-levels")]),e._v(" définit si tous les niveaux sont affichés. S'il est "),n("code",[e._v("false")]),e._v(", seul le dernier niveau est affiché.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\" :show-all-levels=\"false\"></el-cascader>\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Lors de l'utilisation de la sélection multiple, toutes les balises sélectionnées seront affichées par défaut. Vous pouvez définir "),n("code",[e._v("collapse-tags = true")]),e._v(" pour replier les balises sélectionnées.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Afficher toutes les balises (par défaut)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Réduire les balises</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"props\"\n    collapse-tags\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: { multiple: true },\n        options: [{\n          value: 1,\n          label: 'Asia',\n          children: [{\n            value: 2,\n            label: 'China',\n            children: [\n              { value: 3, label: 'Beijing' },\n              { value: 4, label: 'Shanghai' },\n              { value: 5, label: 'Hangzhou' }\n            ]\n          }, {\n            value: 6,\n            label: 'Japan',\n            children: [\n              { value: 7, label: 'Tokyo' },\n              { value: 8, label: 'Osaka' },\n              { value: 9, label: 'Kyoto' }\n            ]\n          }, {\n            value: 10,\n            label: 'Korea',\n            children: [\n              { value: 11, label: 'Seoul' },\n              { value: 12, label: 'Busan' },\n              { value: 13, label: 'Taegu' }\n            ]\n          }]\n        }, {\n          value: 14,\n          label: 'Europe',\n          children: [{\n            value: 15,\n            label: 'France',\n            children: [\n              { value: 16, label: 'Paris' },\n              { value: 17, label: 'Marseille' },\n              { value: 18, label: 'Lyon' }\n            ]\n          }, {\n            value: 19,\n            label: 'UK',\n            children: [\n              { value: 20, label: 'London' },\n              { value: 21, label: 'Birmingham' },\n              { value: 22, label: 'Manchester' }\n            ]\n          }]\n        }, {\n          value: 23,\n          label: 'North America',\n          children: [{\n            value: 24,\n            label: 'US',\n            children: [\n              { value: 25, label: 'New York' },\n              { value: 26, label: 'Los Angeles' },\n              { value: 27, label: 'Washington' }\n            ]\n          }, {\n            value: 28,\n            label: 'Canada',\n            children: [\n              { value: 29, label: 'Toronto' },\n              { value: 30, label: 'Montreal' },\n              { value: 31, label: 'Ottawa' }\n            ]\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Dans la sélection simple, seuls les noeuds terminaux peuvent être coché, et dans la sélection multiple, coché les noeuds parents cochera les noeuds terminaux. Lorsque cette fonctionnalité est activée, les noeuds parents et enfants peuvent être dissociés et vous pouvez sélectionner n’importe quel niveau d’options.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("props.checkStrictly = true")]),e._v(" pour que l'état vérifié d'un noeud n'affecte pas ses noeuds parents et ses noeuds enfants. Vous pouvez ensuite sélectionner n'importe quel niveau d'options.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Sélectionnez n'importe quel niveau d'options (Sélection unique)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Sélectionnez n'importe quel niveau d'options (sélection multiple)</span>\n  <el-cascader\n    :options=\"options\"\n    :props=\"{ multiple: true, checkStrictly: true }\"\n    clearable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Charge dynamiquement ses noeuds enfants lorsque un noeud est sélectionné.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("lazy = true")]),e._v(" pour utiliser le chargement dynamique. Vous devez Spécifier comment charger la source de données avec"),n("code",[e._v("lazyload")]),e._v(". Il existe deux paramètres de "),n("code",[e._v("lazyload")]),e._v(", le premier paramètre"),n("code",[e._v("node")]),e._v(" est le noeud sur lequel l'utilisateur a cliqué, et "),n("code",[e._v("resolution")]),e._v(" est un callback indiquant que le chargement est terminé et qu'il doit être appelé. Pour afficher le statut du noeud plus précisément, vous pouvez ajouter un champ "),n("code",[e._v("leaf")]),e._v(" (modifiable par"),n("code",[e._v("props.leaf")]),e._v(") pour indiquer s'il s'agit d'un noeud feuille. Sinon, il sera déduit par ses noeuds enfants.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-cascader :props="props"></el-cascader>\n\n<script>\n  let id = 0;\n\n  export default {\n    data() {\n      return {\n        props: {\n          lazy: true,\n          lazyLoad (node, resolve) {\n            const { level } = node;\n            setTimeout(() => {\n              const nodes = Array.from({ length: level + 1 })\n                .map(item => ({\n                  value: ++id,\n                  label: `Option - ${id}`,\n                  leaf: level >= 2\n                }));\n              // Appelez le callback `resolve` pour renvoyer les données des noeuds enfants et indiquer que le chargement est terminé.\n              resolve(nodes);\n            }, 1000);\n          }\n        }\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Rechercher et sélectionner des options avec un mot clé.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter "),n("code",[e._v("filterable")]),e._v(" à"),n("code",[e._v("el-cascader")]),e._v(" permet le filtrage. Cascader recherchera les noeuds dont l'étiquette ou l'étiquette du parent (selon "),n("code",[e._v("show-all-levels")]),e._v(") inclut le mot-clé input. Bien sûr, vous pouvez personnaliser la logique de recherche en utilisant "),n("code",[e._v("filter-method")]),e._v(" qui accepte une fonction, le premier paramètre est "),n("code",[e._v("node")]),e._v(", le second est "),n("code",[e._v("keyword")]),e._v(" et doit renvoyer une valeur booléenne indiquant si le résultat est positif.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <span class=\"demonstration\">Filtrable (Sélection unique)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    filterable></el-cascader>\n</div>\n<div class=\"block\">\n  <span class=\"demonstration\">Filtrable (Sélection multiple)</span>\n  <el-cascader\n    placeholder=\"Try searchingL Guide\"\n    :options=\"options\"\n    :props=\"{ multiple: true }\"\n    filterable></el-cascader>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Vous pouvez personnaliser le contenu du noeud cascader.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser le contenu du noeud cascader avec "),n("code",[e._v("scoped slot")]),e._v(". Vous aurez accès à "),n("code",[e._v("node")]),e._v(" et"),n("code",[e._v("data")]),e._v(" dans la portée, correspondant respectivement à l'objet Node et aux données de noeud du noeud actuel.")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader :options=\"options\">\n  <template slot-scope=\"{ node, data }\">\n    <span>{{ data.label }}</span>\n    <span v-if=\"!node.isLeaf\"> ({{ data.children.length }}) </span>\n  </template>\n</el-cascader>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Tout comme "),n("code",[e._v("el-cascader")]),e._v(", vous pouvez définir des options alternatives par "),n("code",[e._v("options")]),e._v(", et activer d'autres fonctionnalités par "),n("code",[e._v("props")]),e._v(", voir le formulaire d'API ci-dessous pour plus de détails.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-cascader-panel :options=\"options\"></el-cascader-panel>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'guide',\n          label: 'Guide',\n          children: [{\n            value: 'disciplines',\n            label: 'Disciplines',\n            children: [{\n              value: 'consistency',\n              label: 'Consistency'\n            }, {\n              value: 'feedback',\n              label: 'Feedback'\n            }, {\n              value: 'efficiency',\n              label: 'Efficiency'\n            }, {\n              value: 'controllability',\n              label: 'Controllability'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'side nav',\n              label: 'Side Navigation'\n            }, {\n              value: 'top nav',\n              label: 'Top Navigation'\n            }]\n          }]\n        }, {\n          value: 'component',\n          label: 'Component',\n          children: [{\n            value: 'basic',\n            label: 'Basic',\n            children: [{\n              value: 'layout',\n              label: 'Layout'\n            }, {\n              value: 'color',\n              label: 'Color'\n            }, {\n              value: 'typography',\n              label: 'Typography'\n            }, {\n              value: 'icon',\n              label: 'Icon'\n            }, {\n              value: 'button',\n              label: 'Button'\n            }]\n          }, {\n            value: 'form',\n            label: 'Form',\n            children: [{\n              value: 'radio',\n              label: 'Radio'\n            }, {\n              value: 'checkbox',\n              label: 'Checkbox'\n            }, {\n              value: 'input',\n              label: 'Input'\n            }, {\n              value: 'input-number',\n              label: 'InputNumber'\n            }, {\n              value: 'select',\n              label: 'Select'\n            }, {\n              value: 'cascader',\n              label: 'Cascader'\n            }, {\n              value: 'switch',\n              label: 'Switch'\n            }, {\n              value: 'slider',\n              label: 'Slider'\n            }, {\n              value: 'time-picker',\n              label: 'TimePicker'\n            }, {\n              value: 'date-picker',\n              label: 'DatePicker'\n            }, {\n              value: 'datetime-picker',\n              label: 'DateTimePicker'\n            }, {\n              value: 'upload',\n              label: 'Upload'\n            }, {\n              value: 'rate',\n              label: 'Rate'\n            }, {\n              value: 'form',\n              label: 'Form'\n            }]\n          }, {\n            value: 'data',\n            label: 'Data',\n            children: [{\n              value: 'table',\n              label: 'Table'\n            }, {\n              value: 'tag',\n              label: 'Tag'\n            }, {\n              value: 'progress',\n              label: 'Progress'\n            }, {\n              value: 'tree',\n              label: 'Tree'\n            }, {\n              value: 'pagination',\n              label: 'Pagination'\n            }, {\n              value: 'badge',\n              label: 'Badge'\n            }]\n          }, {\n            value: 'notice',\n            label: 'Notice',\n            children: [{\n              value: 'alert',\n              label: 'Alert'\n            }, {\n              value: 'loading',\n              label: 'Loading'\n            }, {\n              value: 'message',\n              label: 'Message'\n            }, {\n              value: 'message-box',\n              label: 'MessageBox'\n            }, {\n              value: 'notification',\n              label: 'Notification'\n            }]\n          }, {\n            value: 'navigation',\n            label: 'Navigation',\n            children: [{\n              value: 'menu',\n              label: 'NavMenu'\n            }, {\n              value: 'tabs',\n              label: 'Tabs'\n            }, {\n              value: 'breadcrumb',\n              label: 'Breadcrumb'\n            }, {\n              value: 'dropdown',\n              label: 'Dropdown'\n            }, {\n              value: 'steps',\n              label: 'Steps'\n            }]\n          }, {\n            value: 'others',\n            label: 'Others',\n            children: [{\n              value: 'dialog',\n              label: 'Dialog'\n            }, {\n              value: 'tooltip',\n              label: 'Tooltip'\n            }, {\n              value: 'popover',\n              label: 'Popover'\n            }, {\n              value: 'card',\n              label: 'Card'\n            }, {\n              value: 'carousel',\n              label: 'Carousel'\n            }, {\n              value: 'collapse',\n              label: 'Collapse'\n            }]\n          }]\n        }, {\n          value: 'resource',\n          label: 'Resource',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'docs',\n            label: 'Design Documentation'\n          }]\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"cascader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"disabled-option"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[this._v("¶")]),this._v(" Disabled option")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Désactivez une option en définissant un champ "),n("code",[e._v("disabled")]),e._v(" dans l'objet d'option.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"clearable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#clearable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Clearable")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Définissez l'attribut "),n("code",[e._v("clearable")]),e._v(" pour"),n("code",[e._v("el-cascader")]),e._v(" et une icône claire apparaîtra une fois sélectionnée et survolée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"display-only-the-last-level"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[this._v("¶")]),this._v(" Display only the last level")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"multiple-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#multiple-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Multiple Selection")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Définissez "),n("code",[e._v("props.multiple = true")]),e._v(" pour utiliser la sélection multiple.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"select-any-level-of-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select-any-level-of-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select any level of options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dynamic-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dynamic-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dynamic loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filterable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filterable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-option-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-option-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom option content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-panel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-panel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader panel")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("CascaderPanel")]),e._v(" est le composant principal de"),n("code",[e._v("Cascader")]),e._v(". Il comporte diverses fonctionnalités telles que la sélection unique, la sélection multiple, le chargement dynamique, etc.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Valeur de liaison")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("Les données des options，la clé de "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("label")]),e._v(" peuvent être personnalisées par "),n("code",[e._v("Props")]),e._v(".")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir le tableau suivant.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de l'entrée")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder de l'input")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si Cascader est désactivé")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la valeur sélectionnée peut être effacée")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-all-levels")]),n("td",[e._v("Afficher ou non tous les niveaux de la valeur sélectionnée dans l'entrée")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("Réduire ou non les balises en mode de sélection multiple")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("separator")]),n("td",[e._v("Option label separator")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("' / '")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si les options peuvent être recherchées")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Personnaliser la logique de recherche, le premier paramètre est "),n("code",[e._v("node")]),e._v(", le second est "),n("code",[e._v("keyword")]),e._v(", et doit renvoyer une valeur booléenne indiquant si le résultat est positif.")]),n("td",[e._v("function(node, keyword)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai de réponse lors de la saisie du mot clé de filtre, en millisecondes")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("before-filter")]),n("td",[e._v("Hook fonction avant de filtrer avec la valeur à filtrer en tant que paramètre. Si "),n("code",[e._v("false")]),e._v(" est renvoyé ou si une "),n("code",[e._v("Promise")]),e._v(" est renvoyée puis rejetée, le filtrage sera annulé")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe personnalisé pour la liste déroulante de Cascader")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche lorsque la valeur de liaison change")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("Se déclenche lorsque l'option d'agrandissement change")]),n("td",[e._v("an array of the expanding node's parent nodes")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche lorsque Cascader blurs")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche lorsque Cascader à le focus")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche lorsque le menu déroulant apparaît / disparaît")]),n("td",[e._v("vrai quand il apparaît, et faux sinon")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("Se déclenche lors de la suppression d'une balise en mode de sélection multiple")]),n("td",[e._v("la valeur de la balise qui est supprimée")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("get an array of currently selected node")]),n("td",[e._v("(leafOnly) whether only return the leaf checked nodes, default is "),n("code",[e._v("false")])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascader-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascader-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cascader Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Slot Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("-")]),n("td",[e._v("Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels.")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("Contenu quand il n'y a pas d'options correspondantes.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Baleur de liaison")]),n("td",[e._v("-")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("options")]),n("td",[e._v("Les données des options, la clé de "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("label")]),e._v(" peuvent être personnalisées par "),n("code",[e._v("Props")]),e._v(".")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir le tableau suivant.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche lorsque la valeur de liaison change")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("Se déclenche lorsque l'option d'agrandissement change")]),n("td",[e._v("an array of the expanding node's parent nodes")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Method Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("get an array of currently selected node")]),n("td",[e._v("(leafOnly) whether only return the leaf checked nodes, default is "),n("code",[e._v("false")])])]),n("tr",[n("td",[e._v("clearCheckedNodes")]),n("td",[e._v("clear checked nodes")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cascaderpanel-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cascaderpanel-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" CascaderPanel Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Slot Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("-")]),n("td",[e._v("Le contenu personnalisé du noeud cascader, le paramètre est { node, data }, qui sont respectivement les objets de noeud et les données de noeud actuels.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" Props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("expandTrigger")]),n("td",[e._v("Mode de déclenchement des options de développement")]),n("td",[e._v("string")]),n("td",[e._v("click / hover")]),n("td",[e._v("'click'")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si la sélection multiple est activée")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("checkStrictly")]),n("td",[e._v("Si l'état coché d'un noeud n'affecte pas ses noeuds parents et enfants")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("emitPath")]),n("td",[e._v("Lorsque les noeuds cochés changent, émet ou non un tableau du chemin du noeud. Si la valeur est false, n'émet que la valeur du noeud.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("S'il faut charger dynamiquement les noeuds enfants, utiliser avec l'attribut "),n("code",[e._v("lazyload")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazyLoad")]),n("td",[e._v("Méthode de chargement de données de noeuds enfants, ne fonctionne que lorsque "),n("code",[e._v("lazy")]),e._v(" est vrai")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Spécifie quelle clé de l'objet noeud est utilisée comme valeur du noeud")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'value'")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Spécifie quelle clé de l'objet noeud est utilisée comme label du noeud")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'label'")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Spécifie quelle clé de l'objet noeud est utilisée en tant qu'enfant du noeud")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'children'")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Spécifie quelle clé de l'objet noeud est utilisée comme noeud désactivé")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'disabled'")])]),n("tr",[n("td",[e._v("leaf")]),n("td",[e._v("Spécifie quelle clé de l'objet est noeud utilisée comme champ feuille du noeud")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'leaf'")])])])])}],!1,null,null,null);t.default=s.exports},754:function(e,t,n){"use strict";n.r(t);var a,l,r,i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},s={name:"component-doc",components:{"element-demo0":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{model:{value:t.checked,callback:function(e){t.checked=e},expression:"checked"}},[t._v("Option")])]],2)},staticRenderFns:[]},{data:function(){return{checked:!0}}}),"element-demo1":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}},[t._v("Option")]),t._v(" "),n("el-checkbox",{attrs:{disabled:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}},[t._v("Option")])]],2)},staticRenderFns:[]},{data:function(){return{checked1:!1,checked2:!0}}}),"element-demo2":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{model:{value:t.checkList,callback:function(e){t.checkList=e},expression:"checkList"}},[n("el-checkbox",{attrs:{label:"Option A"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option B"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option C"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Désactivée",disabled:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Sélectionnée et désactivée",disabled:""}})],1)]],2)},staticRenderFns:[]},{data:function(){return{checkList:["selected and disabled","Option A"]}}}),"element-demo3":(r=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox",{attrs:{indeterminate:t.isIndeterminate},on:{change:t.handleCheckAllChange},model:{value:t.checkAll,callback:function(e){t.checkAll=e},expression:"checkAll"}},[t._v("Sélectionner tout")]),t._v(" "),n("div",{staticStyle:{margin:"15px 0"}}),t._v(" "),n("el-checkbox-group",{on:{change:t.handleCheckedCitiesChange},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkAll:!1,checkedCities:["Shanghai","Beijing"],cities:r,isIndeterminate:!0}},methods:{handleCheckAllChange:function(e){this.checkedCities=e?r:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(e){var t=e.length;this.checkAll=t===this.cities.length,this.isIndeterminate=0<t&&t<this.cities.length}}})),"element-demo4":(l=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-checkbox-group",{attrs:{min:1,max:2},model:{value:t.checkedCities,callback:function(e){t.checkedCities=e},expression:"checkedCities"}},t._l(t.cities,function(e){return n("el-checkbox",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)]],2)},staticRenderFns:[]},{data:function(){return{checkedCities:["Shanghai","Beijing"],cities:l}}})),"element-demo5":(a=["Shanghai","Beijing","Guangzhou","Shenzhen"],i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox-group",{model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"medium"},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup3,callback:function(e){t.checkboxGroup3=e},expression:"checkboxGroup3"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e,disabled:"Beijing"===e}},[t._v(t._s(e))])}),1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup4,callback:function(e){t.checkboxGroup4=e},expression:"checkboxGroup4"}},t._l(t.cities,function(e){return n("el-checkbox-button",{key:e,attrs:{label:e}},[t._v(t._s(e))])}),1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checkboxGroup1:["Shanghai"],checkboxGroup2:["Shanghai"],checkboxGroup3:["Shanghai"],checkboxGroup4:["Shanghai"],cities:a}}})),"element-demo6":i({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-checkbox",{attrs:{label:"Option1",border:""},model:{value:t.checked1,callback:function(e){t.checked1=e},expression:"checked1"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""},model:{value:t.checked2,callback:function(e){t.checked2=e},expression:"checked2"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox",{attrs:{label:"Option1",border:"",size:"medium"},model:{value:t.checked3,callback:function(e){t.checked3=e},expression:"checked3"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",size:"medium"},model:{value:t.checked4,callback:function(e){t.checked4=e},expression:"checked4"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"small"},model:{value:t.checkboxGroup1,callback:function(e){t.checkboxGroup1=e},expression:"checkboxGroup1"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:"",disabled:""}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-checkbox-group",{attrs:{size:"mini",disabled:""},model:{value:t.checkboxGroup2,callback:function(e){t.checkboxGroup2=e},expression:"checkboxGroup2"}},[n("el-checkbox",{attrs:{label:"Option1",border:""}}),t._v(" "),n("el-checkbox",{attrs:{label:"Option2",border:""}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{checked1:!0,checked2:!1,checked3:!1,checked4:!0,checkboxGroup1:[],checkboxGroup2:[]}}})}},o=n(0),d=Object(o.a)(s,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un groupe d'options à choix multiples.")]),e._m(1),n("p",[e._v("Checkbox peut être utilisé seul pour switcher entre deux états.")]),n("demo-block",[n("div",[n("p",[e._v("Définissez "),n("code",[e._v("v-model")]),e._v(" (variable liée) dans "),n("code",[e._v("el-checkbox")]),e._v(". La valeur par défaut est un "),n("code",[e._v("Boolean")]),e._v(" pour une seule "),n("code",[e._v("checkbox")]),e._v(" et devient "),n("code",[e._v("true")]),e._v(" quand elle est sélectionnée. Le contenu à l'intérieur de la balise "),n("code",[e._v("el-checkbox")]),e._v(" deviendra le label du bouton de la checkbox.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  \x3c!-- `checked` should be true or false --\x3e\n  <el-checkbox v-model="checked">Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("La checkbox peut être désactivée.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox v-model="checked1" disabled>Option</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>Option</el-checkbox>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        checked1: false,\n        checked2: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Utile pour grouper des checkbox, indiquant si une option est sélectionnée en vérifiant la case en question.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément "),n("code",[e._v("checkbox-group")]),e._v(" peut gérer plusieurs checkbox d'un groupe en utilisant "),n("code",[e._v("v-model")]),e._v(", qui sera un "),n("code",[e._v("Array")]),e._v(". Dans l'élément "),n("code",[e._v("el-checkbox")]),e._v(", "),n("code",[e._v("label")]),e._v(" est la valeur de la checkbox. S'il n'y a aucun contenu dans la balise, "),n("code",[e._v("label")]),e._v(" sera également la description de la checkbox. "),n("code",[e._v("label")]),e._v(" correspond aussi aux valeurs des éléments dans le tableau. Il est sélectionné si la valeur spécifiée existe dans le tableau, et vice-versa.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="Option A"></el-checkbox>\n    <el-checkbox label="Option B"></el-checkbox>\n    <el-checkbox label="Option C"></el-checkbox>\n    <el-checkbox label="Désactivée" disabled></el-checkbox>\n    <el-checkbox label="Sélectionnée et désactivée" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checkList: [\'selected and disabled\',\'Option A\']\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">Sélectionner tout</el-checkbox>\n  <div style="margin: 15px 0;"></div>\n  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">\n    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n  export default {\n    data() {\n      return {\n        checkAll: false,\n        checkedCities: [\'Shanghai\', \'Beijing\'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(val) {\n        this.checkedCities = val ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let checkedCount = value.length;\n        this.checkAll = checkedCount === this.cities.length;\n        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-checkbox-group\n    v-model=\"checkedCities\"\n    :min=\"1\"\n    :max=\"2\">\n    <el-checkbox v-for=\"city in cities\" :label=\"city\" :key=\"city\">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n<script>\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Des checkbox avec une apparence de bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Il vous suffit de changer "),n("code",[e._v("el-checkbox")]),e._v(" en "),n("code",[e._v("el-checkbox-button")]),e._v(". Il existe aussi un attribut "),n("code",[e._v("size")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox-group v-model="checkboxGroup1">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="medium">\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup3" size="small">\n      <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === \'Beijing\'" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>\n      <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>\n    </el-checkbox-group>\n  </div>\n</template>\n<script>\n  const cityOptions = [\'Shanghai\', \'Beijing\', \'Guangzhou\', \'Shenzhen\'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: [\'Shanghai\'],\n        checkboxGroup2: [\'Shanghai\'],\n        checkboxGroup3: [\'Shanghai\'],\n        checkboxGroup4: [\'Shanghai\'],\n        cities: cityOptions\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux checkbox.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-checkbox v-model="checked1" label="Option1" border></el-checkbox>\n    <el-checkbox v-model="checked2" label="Option2" border></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox v-model="checked3" label="Option1" border size="medium"></el-checkbox>\n    <el-checkbox v-model="checked4" label="Option2" border size="medium"></el-checkbox>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup1" size="small">\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border disabled></el-checkbox>\n    </el-checkbox-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>\n      <el-checkbox label="Option1" border></el-checkbox>\n      <el-checkbox label="Option2" border></el-checkbox>\n    </el-checkbox-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        checked1: true,\n        checked2: false,\n        checked3: false,\n        checked4: true,\n        checkboxGroup1: [],\n        checkboxGroup2: []\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactivation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactivation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-groupees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-groupees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox groupées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indeterminee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indeterminee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indéterminée")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La propriété "),n("code",[e._v("indeterminate")]),e._v(' permet de réaliser un effet "Sélectionner tout".')])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"minimum-maximum-d-elements-selectionnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-d-elements-selectionnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Minimum / Maximum d'éléments sélectionnés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les propriétés "),n("code",[e._v("min")]),e._v(" et "),n("code",[e._v("max")]),e._v(" permettent de limiter la quantité d'éléments sélectionnés.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")]),e._v(".")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Ajoute une bordure à la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("taille de la checkbox, ne marche que si "),n("code",[e._v("border")]),e._v(" est 'true'")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("Si la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indeterminate")]),n("td",[e._v("Identique à "),n("code",[e._v("indeterminate")]),e._v(" dans les checkbox natives.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des checkbox-boutons ou des checkbox avec bordure.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les checkbox imbriquées sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Nombre minimum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Nombre maximum de checkbox cochées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur de police quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Couleur de la bordure et du fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-checkbox-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-checkbox-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements Checkbox-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La nouvelle valeur")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-checkbox-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-checkbox-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Checkbox-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur de la checkbox quand utilisée dans un "),n("code",[e._v("checkbox-group")])]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("true-label")]),n("td",[e._v("Valeur de la checkbox si cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("false-label")]),n("td",[e._v("Valeur de la checkbox si non cochée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la checkbox est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("checked")]),n("td",[e._v("Si la checkbox est cochée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=d.exports},755:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{on:{change:t.handleChange},model:{value:t.activeNames,callback:function(e){t.activeNames=e},expression:"activeNames"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque opération simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeNames:["1"]}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-collapse",{attrs:{accordion:""},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-collapse-item",{attrs:{title:"Cohérence",name:"1"}},[n("div",[t._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),t._v(" "),n("div",[t._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[t._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t._v(" "),n("div",[t._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[t._v("Simplifier le processus: garde chaque opération simple et intuitive.;")]),t._v(" "),n("div",[t._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),t._v(" "),n("div",[t._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),t._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[t._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),t._v(" "),n("div",[t._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeName:"1"}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-collapse",{attrs:{accordion:""}},[n("el-collapse-item",{attrs:{name:"1"}},[n("template",{slot:"title"},[e._v("\n      Cohérence"),n("i",{staticClass:"header-icon el-icon-info"})]),e._v(" "),n("div",[e._v("Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;")]),e._v(" "),n("div",[e._v("Cohérence au sein de l'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.")])],2),e._v(" "),n("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[n("div",[e._v("Retour d'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),e._v(" "),n("div",[e._v("Retour visuel: reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Efficacité",name:"3"}},[n("div",[e._v("Simplifier le processus: garde chaque opération simple et intuitive.;")]),e._v(" "),n("div",[e._v("Clair et défini: énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement;")]),e._v(" "),n("div",[e._v("Facile à identifier: l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])]),e._v(" "),n("el-collapse-item",{attrs:{title:"Controllabilité",name:"4"}},[n("div",[e._v("Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;")]),e._v(" "),n("div",[e._v("Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez Collapse pour stocker du contenu.")]),e._m(1),n("p",[e._v("Vous pouvez agrandir plusieurs panneaux.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeNames" @change="handleChange">\n  <el-collapse-item title="Cohérence" name="1">\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n    <div>Retour d\'expérience: permets aux utilisateurs de percevoir clairement leurs opérations par le biais d\'animations et d\'effets interactifs.</div>\n    <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n    <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n    <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n    <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n    <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n    <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeNames: [\'1\']\n      };\n    },\n    methods: {\n      handleChange(val) {\n        console.log(val);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("En mode accordéon, un seul panneau peut être ouvert à la fois.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("accordion")]),e._v(" pour activer le mode accordéon.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse v-model="activeName" accordion>\n    <el-collapse-item title="Cohérence" name="1">\n      <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n      <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n    </el-collapse-item>\n    <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n    </el-collapse-item>\n</el-collapse>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-collapse accordion>\n  <el-collapse-item name="1">\n    <template slot="title">\n      Cohérence<i class="header-icon el-icon-info"></i>\n    </template>\n    <div>Cohérence avec la vraie vie: en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs;</div>\n    <div>Cohérence au sein de l\'interface: tout les éléments doivent être cohérents entre eux et suivre les mêmes règles, par exemple: le style global, les icônes, la position des éléments, etc.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Feedback" name="2">\n      <div>Retour d\'expèrience: permets aux utilisateurs de percevoir clairement leur opérations par le biais d\'animations et d\'effets interactifs.</div>\n      <div>Retour visuel: reflète l\'état actuel de la page via le réarrangement ou la mise à jour des éléments.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Efficacité" name="3">\n      <div>Simplifier le processus: garde chaque opération simple et intuitive.;</div>\n      <div>Clair et défini: énonce clairement ses intentions afin que l\'utilisateur puisse comprendre et prendre une décision rapidement;</div>\n      <div>Facile à identifier: l\'interface devrait être simple et facile d\'accès, afin que les utilisateurs n\'ai pas d\'efforts de mémorisation à faire.</div>\n  </el-collapse-item>\n  <el-collapse-item title="Controllabilité" name="4">\n      <div>Prise de décision: possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs;</div>\n      <div>Contrôle des conséquences: les utilisateurs devraient pouvoir contrôler l\'exécution de leurs opérations, y compris l\'annulation et la suppression des opérations courantes.</div>\n  </el-collapse-item>\n</el-collapse>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"titre-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#titre-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Titre personnalisé")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("En plus de l'utilisation de l'attribut "),n("code",[e._v("title")]),e._v(", vous pouvez configurer les titres de panneau, ce qui rend possible l'ajout de contenu personnalisé, comme des icônes par exemple.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Le panneau actuellement activé.")]),n("td",[e._v("string (en mode accordéon) / array (en mode normal)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Active le mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Collapse")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un panneau est activé / désactivé.")]),n("td",[e._v("(activeNames: array (en mode normal) / string (en mode accordéon))")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-collapse-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-collapse-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Collapse-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant unique du panneau.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du panneau.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le panneau.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},756:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color1,callback:function(e){t.color1=e},expression:"color1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Sans valeur par défaut")]),t._v(" "),n("el-color-picker",{model:{value:t.color2,callback:function(e){t.color2=e},expression:"color2"}})],1)])},staticRenderFns:[]},{data:function(){return{color1:"#409EFF",color2:null}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":""},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"rgba(19, 206, 102, 0.8)"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{attrs:{"show-alpha":"",predefine:t.predefineColors},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"rgba(255, 69, 0, 0.68)",predefineColors:["#ff4500","#ff8c00","#ffd700","#90ee90","#00ced1","#1e90ff","#c71585","rgba(255, 69, 0, 0.68)","rgb(255, 120, 0)","hsv(51, 100, 98)","hsva(120, 40, 94, 0.5)","hsl(181, 100%, 37%)","hsla(209, 100%, 56%, 0.73)","#c7158577"]}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-color-picker",{model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"medium"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"small"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}}),t._v(" "),n("el-color-picker",{attrs:{size:"mini"},model:{value:t.color,callback:function(e){t.color=e},expression:"color"}})],1)},staticRenderFns:[]},{data:function(){return{color:"#409EFF"}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("ColorPicker est un sélecteur de couleur qui supporte plusieurs formats.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("ColorPicker nécessite une variable de type string liée à v-model.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Avec valeur par défaut</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">Sans valeur par défaut</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        color1: \'#409EFF\',\n        color2: null\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte le canal alpha. Pour activer la sélection du canal alpha, ajoutez l'attribut "),n("code",[e._v("show-alpha")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker v-model=\"color\" show-alpha></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("ColorPicker supporte les couleurs prédéfinies.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-color-picker\n  v-model=\"color\"\n  show-alpha\n  :predefine=\"predefineColors\">\n</el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: 'rgba(255, 69, 0, 0.68)',\n        predefineColors: [\n          '#ff4500',\n          '#ff8c00',\n          '#ffd700',\n          '#90ee90',\n          '#00ced1',\n          '#1e90ff',\n          '#c71585',\n          'rgba(255, 69, 0, 0.68)',\n          'rgb(255, 120, 0)',\n          'hsv(51, 100, 98)',\n          'hsva(120, 40, 94, 0.5)',\n          'hsl(181, 100%, 37%)',\n          'hsla(209, 100%, 56%, 0.73)',\n          '#c7158577'\n        ]\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-color-picker v-model="color"></el-color-picker>\n<el-color-picker v-model="color" size="medium"></el-color-picker>\n<el-color-picker v-model="color" size="small"></el-color-picker>\n<el-color-picker v-model="color" size="mini"></el-color-picker>\n\n<script>\n  export default {\n    data() {\n      return {\n        color: \'#409EFF\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"colorpicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" ColorPicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"canal-alpha"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#canal-alpha","aria-hidden":"true"}},[this._v("¶")]),this._v(" Canal Alpha")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-predefinies"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-predefinies","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs prédéfinies")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Désactive le ColorPicker.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("medium / small / mini")])]),n("tr",[n("td",[e._v("show-alpha")]),n("td",[e._v("Affiche la sélection du canal alpha.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color-format")]),n("td",[e._v("Format de couleur du v-model.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("hex (quand show-alpha est false)/ rgb (quand show-alpha est true)")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant du ColorPicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("predefine")]),n("td",[e._v("Couleurs prédéfinies.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("La valeur de la couleur")])]),n("tr",[n("td",[e._v("active-change")]),n("td",[e._v("Se déclenche quand la couleur active change.")]),n("td",[e._v("La valeur de la couleur active")])])])])}],!1,null,null,null);t.default=i.exports},757:function(e,t,n){"use strict";n.r(t);var a=n(24),l=n(398),r=n(25),i={primary:"$--color-primary",success:"$--color-success",warning:"$--color-warning",danger:"$--color-danger",info:"$--color-info",white:"$--color-white",black:"$--color-black",textPrimary:"$--color-text-primary",textRegular:"$--color-text-regular",textSecondary:"$--color-text-secondary",textPlaceholder:"$--color-text-placeholder",borderBase:"$--border-color-base",borderLight:"$--border-color-light",borderLighter:"$--border-color-lighter",borderExtraLight:"$--border-color-extra-light"},s={primary:"#409EFF",success:"#67C23A",warning:"#E6A23C",danger:"#F56C6C",info:"#909399",white:"#FFFFFF",black:"#000000",textPrimary:"#303133",textRegular:"#606266",textSecondary:"#909399",textPlaceholder:"#C0C4CC",borderBase:"#DCDFE6",borderLight:"#E4E7ED",borderLighter:"#EBEEF5",borderExtraLight:"#F2F6FC"},o={created:function(){a.a.$on(r.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(e,t){return Object(l.a)(e,t)},setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},primary:"",success:"",warning:"",danger:"",info:"",white:"",black:"",textPrimary:"",textRegular:"",textSecondary:"",textPlaceholder:"",borderBase:"",borderLight:"",borderLighter:"",borderExtraLight:""}},watch:{global:{immediate:!0,handler:function(t){var n=this;Object.keys(s).forEach(function(e){t[i[e]]?n[e]=t[i[e]]:n[e]=s[e]})}}}},d=n(0),c=Object(d.a)(o,function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("section",{staticClass:"content element-doc"},[n._m(0),a("p",[n._v("Element utilise un ensemble de palettes spécifiques afin de fournir un style consistant pour vos produits.")]),n._m(1),a("p",[n._v("La couleur principale d'Element est un bleu clair et agréable.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:10,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.primary}},[n._v("Couleur principale\n      "),a("div",{staticClass:"value"},[n._v("#409EFF")]),a("div",{staticClass:"bg-color-sub",style:{background:n.tintColor(n.primary,.9)}},n._l(Array(8),function(e,t){return a("div",{key:t,staticClass:"bg-blue-sub-item",style:{background:n.tintColor(n.primary,(t+1)/10)}})}),0)])])],1),n._m(2),a("p",[n._v("En plus de la couleur principale, vous devrez sans doute utiliser d'autres couleurs pour différents cas de figures, par exemple une couleur de danger pour indiquer une opération dangereuse.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.success}},[n._v("Succès\n      "),a("div",{staticClass:"value"},[n._v("#67C23A")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.success,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.warning}},[n._v("Avertissement\n      "),a("div",{staticClass:"value"},[n._v("#E6A23C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.warning,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.danger}},[n._v("Danger\n      "),a("div",{staticClass:"value"},[n._v("#F56C6C")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.danger,(t+8)/10)}})}),0)])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box",style:{background:n.info}},[n._v("Info\n      "),a("div",{staticClass:"value"},[n._v("#909399")]),a("div",{staticClass:"bg-color-sub"},n._l(Array(2),function(e,t){return a("div",{key:t,staticClass:"bg-success-sub-item",style:{background:n.tintColor(n.info,(t+8)/10)}})}),0)])])],1),n._m(3),a("p",[n._v("Les couleurs neutres sont les couleurs du fond, du texte et des bordures. Vous pouvez utiliser différentes couleurs neutres pour représenter une structure hiérarchique.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPrimary}},[n._v("Texte principal"),a("div",{staticClass:"value"},[n._v(n._s(n.textPrimary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textRegular}},[n._v("\n      Texte normal"),a("div",{staticClass:"value"},[n._v(n._s(n.textRegular))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textSecondary}},[n._v("Texte secondaire"),a("div",{staticClass:"value"},[n._v(n._s(n.textSecondary))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.textPlaceholder}},[n._v("Texte de placeholder"),a("div",{staticClass:"value"},[n._v(n._s(n.textPlaceholder))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderBase}},[n._v("Bordure de base"),a("div",{staticClass:"value"},[n._v(n._s(n.borderBase))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLight}},[n._v("Bordure claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLight))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderLighter}},[n._v("Bordure très claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderLighter))])]),a("div",{staticClass:"demo-color-box demo-color-box-other demo-color-box-lite",style:{background:n.borderExtraLight}},[n._v("Bordure extra claire"),a("div",{staticClass:"value"},[n._v(n._s(n.borderExtraLight))])])])]),a("el-col",{attrs:{span:6,xs:{span:12}}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.black}},[n._v("Noir"),a("div",{staticClass:"value"},[n._v(n._s(n.black))])]),a("div",{staticClass:"demo-color-box demo-color-box-other",style:{background:n.white,color:"#303133",border:"1px solid #eee"}},[n._v("Blanc"),a("div",{staticClass:"value"},[n._v(n._s(n.white))])]),a("div",{staticClass:"demo-color-box demo-color-box-other bg-transparent"},[n._v("Transparent"),a("div",{staticClass:"value"},[n._v("Transparent")])])])])],1)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"couleur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleur-principale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur-principale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur principale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-secondaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-secondaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs secondaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleurs-neutres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleurs-neutres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleurs neutres")])}],!1,null,null,null);t.default=c.exports},758:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")])],1)],1),e._v(" "),n("el-container",[n("el-aside",{attrs:{width:"200px"}},[e._v("Aside")]),e._v(" "),n("el-container",[n("el-header",[e._v("Header")]),e._v(" "),n("el-main",[e._v("Main")]),e._v(" "),n("el-footer",[e._v("Footer")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-container",{staticStyle:{height:"500px",border:"1px solid #eee"}},[n("el-aside",{staticStyle:{"background-color":"rgb(238, 241, 246)"},attrs:{width:"200px"}},[n("el-menu",{attrs:{"default-openeds":["1","3"]}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-message"}),e._v("Navigator One")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("Option4")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-menu"}),e._v("Navigator Two")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"2-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("Option 4-1")])],2)],2),e._v(" "),n("el-submenu",{attrs:{index:"3"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-setting"}),e._v("Navigator Three")]),e._v(" "),n("el-menu-item-group",[n("template",{slot:"title"},[e._v("Group 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-1"}},[e._v("Option 1")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-2"}},[e._v("Option 2")])],2),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group 2"}},[n("el-menu-item",{attrs:{index:"3-3"}},[e._v("Option 3")])],1),e._v(" "),n("el-submenu",{attrs:{index:"3-4"}},[n("template",{slot:"title"},[e._v("Option 4")]),e._v(" "),n("el-menu-item",{attrs:{index:"3-4-1"}},[e._v("Option 4-1")])],2)],2)],1)],1),e._v(" "),n("el-container",[n("el-header",{staticStyle:{"text-align":"right","font-size":"12px"}},[n("el-dropdown",[n("i",{staticClass:"el-icon-setting",staticStyle:{"margin-right":"15px"}}),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("View")]),e._v(" "),n("el-dropdown-item",[e._v("Add")]),e._v(" "),n("el-dropdown-item",[e._v("Delete")])],1)],1),e._v(" "),n("span",[e._v("Tom")])],1),e._v(" "),n("el-main",[n("el-table",{attrs:{data:e.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",width:"140"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),e._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)],1)],1)],1)],1)},staticRenderFns:[]},{data:function(){return{tableData:Array(20).fill({date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les composants Container servent à structurer la page:")]),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-main>Main</el-main>\n  <el-footer>Footer</el-footer>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-main>Main</el-main>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-header>Header</el-header>\n  <el-container>\n    <el-aside width="200px">Aside</el-aside>\n    <el-container>\n      <el-main>Main</el-main>\n      <el-footer>Footer</el-footer>\n    </el-container>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n  </el-container>\n</el-container>\n\n<el-container>\n  <el-aside width="200px">Aside</el-aside>\n  <el-container>\n    <el-header>Header</el-header>\n    <el-main>Main</el-main>\n    <el-footer>Footer</el-footer>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header, .el-footer {\n    background-color: #B3C0D1;\n    color: #333;\n    text-align: center;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    background-color: #D3DCE6;\n    color: #333;\n    text-align: center;\n    line-height: 200px;\n  }\n\n  .el-main {\n    background-color: #E9EEF3;\n    color: #333;\n    text-align: center;\n    line-height: 160px;\n  }\n\n  body > .el-container {\n    margin-bottom: 40px;\n  }\n\n  .el-container:nth-child(5) .el-aside,\n  .el-container:nth-child(6) .el-aside {\n    line-height: 260px;\n  }\n\n  .el-container:nth-child(7) .el-aside {\n    line-height: 320px;\n  }\n</style>\n')])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-container style="height: 500px; border: 1px solid #eee">\n  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">\n    <el-menu :default-openeds="[\'1\', \'3\']">\n      <el-submenu index="1">\n        <template slot="title"><i class="el-icon-message"></i>Navigator One</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="1-1">Option 1</el-menu-item>\n          <el-menu-item index="1-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="1-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">Option4</template>\n          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="2">\n        <template slot="title"><i class="el-icon-menu"></i>Navigator Two</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="2-1">Option 1</el-menu-item>\n          <el-menu-item index="2-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="2-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="2-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-submenu index="3">\n        <template slot="title"><i class="el-icon-setting"></i>Navigator Three</template>\n        <el-menu-item-group>\n          <template slot="title">Group 1</template>\n          <el-menu-item index="3-1">Option 1</el-menu-item>\n          <el-menu-item index="3-2">Option 2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group 2">\n          <el-menu-item index="3-3">Option 3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="3-4">\n          <template slot="title">Option 4</template>\n          <el-menu-item index="3-4-1">Option 4-1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n    </el-menu>\n  </el-aside>\n\n  <el-container>\n    <el-header style="text-align: right; font-size: 12px">\n      <el-dropdown>\n        <i class="el-icon-setting" style="margin-right: 15px"></i>\n        <el-dropdown-menu slot="dropdown">\n          <el-dropdown-item>View</el-dropdown-item>\n          <el-dropdown-item>Add</el-dropdown-item>\n          <el-dropdown-item>Delete</el-dropdown-item>\n        </el-dropdown-menu>\n      </el-dropdown>\n      <span>Tom</span>\n    </el-header>\n\n    <el-main>\n      <el-table :data="tableData">\n        <el-table-column prop="date" label="Date" width="140">\n        </el-table-column>\n        <el-table-column prop="name" label="Name" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="Address">\n        </el-table-column>\n      </el-table>\n    </el-main>\n  </el-container>\n</el-container>\n\n<style>\n  .el-header {\n    background-color: #B3C0D1;\n    color: #333;\n    line-height: 60px;\n  }\n\n  .el-aside {\n    color: #333;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const item = {\n        date: \'2016-05-02\',\n        name: \'Tom\',\n        address: \'No. 189, Grove St, Los Angeles\'\n      };\n      return {\n        tableData: Array(20).fill(item)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[n("code",[e._v("<el-container>")]),e._v(": Conteneur de wrapping. Quand il est placé à l'intérieur de "),n("code",[e._v("<el-header>")]),e._v(" ou "),n("code",[e._v("<el-footer>")]),e._v(", tous les éléments enfants seront placés verticalement. Dans le cas contraire ils seront placés horizontalement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-header>")]),this._v(": Conteneur pour headers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-aside>")]),this._v(": Conteneur pour section latérale (en général un menu).")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-main>")]),this._v(": Conteneur pour la section principal.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("<el-footer>")]),this._v(": Conteneur pour footers.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Ces composants utilisent flexbox, assurez vous que le navigateur supporte cette fonctionnalité. De plus, les éléments enfants directs de "),n("code",[e._v("<el-container>")]),e._v(" doivent être un des quatre éléments précédents, leur élément père devant obligatoirement être "),n("code",[e._v("<el-container>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mises-en-page-habituelles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mises-en-page-habituelles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mises en page habituelles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"exemple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#exemple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Exemple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-container"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-container","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Container")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Direction d'affichage pour les éléments enfants.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical quand dans "),n("code",[e._v("el-header")]),e._v(" ou "),n("code",[e._v("el-footer")]),e._v("; horizontal sinon")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-header"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-header","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Header")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du header.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-aside"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-aside","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Aside")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la section.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("300px")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-footer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-footer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Footer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du footer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("60px")])])])])}],!1,null,null,null);t.default=i.exports},759:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Picker avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Choississez un jour","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{disabledDate:function(e){return e.getTime()>Date.now()},shortcuts:[{text:"Aujourd'hui",onClick:function(e){e.$emit("pick",new Date)}},{text:"Hier",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"Il y a une semaine",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Semaine")]),t._v(" "),n("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Sélectionnez une semaine"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Mois")]),t._v(" "),n("el-date-picker",{attrs:{type:"month",placeholder:"Sélectionnez un mois"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]),t._v(" "),n("div",{staticClass:"container"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Année")]),t._v(" "),n("el-date-picker",{attrs:{type:"year",placeholder:"Sélectionnez une année"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"dates",placeholder:"Sélectionnez une ou plusieurs dates"},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1)])])},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:"",value4:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec des options")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","unlink-panels":"","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Semaine dernière",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Mois dernier",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Trois derniers mois",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value1:"",value2:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange","range-separator":"à","start-placeholder":"Mois de début","end-placeholder":"Mois de fin"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec options")]),t._v(" "),n("el-date-picker",{attrs:{type:"monthrange",align:"right","unlink-panels":"","range-separator":"à","start-placeholder":"Mois de début","end-placeholder":"Mois de fin","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Ce mois",onClick:function(e){e.$emit("pick",[new Date,new Date])}},{text:"Cette année",onClick:function(e){var t=new Date,n=new Date((new Date).getFullYear(),0);e.$emit("pick",[n,t])}},{text:"Les derniers 6 mois",onClick:function(e){var t=new Date,n=new Date;n.setMonth(n.getMonth()-6),e.$emit("pick",[n,t])}}]},value1:"",value2:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Date")]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date","default-value":"2010-10-01"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Plage de dates")]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-value":"2010-10-01"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Émet un objet Date")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value1))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Utilise value-format")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value: "+t._s(t.value2))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"yyyy-MM-dd"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Timestamp")]),t._v(" "),n("div",{staticClass:"demonstration"},[t._v("Value："+t._s(t.value3))]),t._v(" "),n("el-date-picker",{attrs:{type:"date",placeholder:"Sélectionnez une date",format:"yyyy/MM/dd","value-format":"timestamp"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:"",value3:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("p",[t._v("Valeur: "+t._s(t.value))]),t._v(" "),n("el-date-picker",{attrs:{type:"daterange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["00:00:00","23:59:59"]},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:""}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisez DatePicker pour les champs de dates.")]),e._m(1),n("p",[e._v("L'unité de base du DatePicker est le jour.")]),n("demo-block",[n("div",[n("p",[e._v("L'unité est déterminée par l'attribut "),n("code",[e._v("type")]),e._v(". Vous pouvez ajouter des options en créant un objet "),n("code",[e._v("picker-options")]),e._v(" avec la propriété "),n("code",[e._v("shortcuts")]),e._v(". L'état désactivé est contrôlé par "),n("code",[e._v("disabledDate")]),e._v(" qui est une fonction.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Choississez un jour">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Picker avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Choississez un jour"\n      :picker-options="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          disabledDate(time) {\n            return time.getTime() > Date.now();\n          },\n          shortcuts: [{\n            text: \'Aujourd\\\'hui\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Hier\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'Il y a une semaine\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en ajoutant des options grâce aux attributs.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="container">\n  <div class="block">\n    <span class="demonstration">Semaine</span>\n    <el-date-picker\n      v-model="value1"\n      type="week"\n      format="Week WW"\n      placeholder="Sélectionnez une semaine">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Mois</span>\n    <el-date-picker\n      v-model="value2"\n      type="month"\n      placeholder="Sélectionnez un mois">\n    </el-date-picker>\n  </div>\n</div>\n<div class="container">\n  <div class="block">\n    <span class="demonstration">Année</span>\n    <el-date-picker\n      v-model="value3"\n      type="year"\n      placeholder="Sélectionnez une année">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Dates</span>\n    <el-date-picker\n      type="dates"\n      v-model="value4"\n      placeholder="Sélectionnez une ou plusieurs dates">\n    </el-date-picker>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\',\n        value3: \'\',\n        value4: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez sélectionner une plage de dates.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque ce mode est activé, les deux panneaux sont liés par défaut. Si vous souhaitez qu'ils changent de mois de manière indépendante, ajoutez l'attribut "),n("code",[e._v("unlink-panels")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="daterange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec des options</span>\n    <el-date-picker\n      v-model="value2"\n      type="daterange"\n      align="right"\n      unlink-panels\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :picker-options="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: \'Semaine dernière\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Mois dernier\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Trois derniers mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez sélectionner une plage de mois.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque ce mode est activé, les panneaux gauche et droit sont liés par défaut. Si vous voulez que les deux panneaux switch indépendamment les années en cours, vous pouvez utiliser l'attribut "),n("code",[e._v("unlink-panels")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="monthrange"\n      range-separator="à"\n      start-placeholder="Mois de début"\n      end-placeholder="Mois de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec options</span>\n    <el-date-picker\n      v-model="value2"\n      type="monthrange"\n      align="right"\n      unlink-panels\n      range-separator="à"\n      start-placeholder="Mois de début"\n      end-placeholder="Mois de fin"\n      :picker-options="pickerOptions">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: \'Ce mois\',\n            onClick(picker) {\n              picker.$emit(\'pick\', [new Date(), new Date()]);\n            }\n          }, {\n            text: \'Cette année\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date(new Date().getFullYear(), 0);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Les derniers 6 mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setMonth(start.getMonth() - 6);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Date</span>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Sélectionnez une date"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Plage de dates</span>\n    <el-date-picker\n      v-model="value2"\n      type="daterange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      default-value="2010-10-01">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Émet un objet Date</span>\n    <div class="demonstration">Value: {{ value1 }}</div>\n    <el-date-picker\n      v-model="value1"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Utilise value-format</span>\n    <div class="demonstration">Value: {{ value2 }}</div>\n    <el-date-picker\n      v-model="value2"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="yyyy-MM-dd">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Timestamp</span>\n    <div class="demonstration">Value：{{ value3 }}</div>\n    <el-date-picker\n      v-model="value3"\n      type="date"\n      placeholder="Sélectionnez une date"\n      format="yyyy/MM/dd"\n      value-format="timestamp">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de départ et de fin pour chacune des dates.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, l'horaire pour les dates de début et de fin est "),n("code",[e._v("00:00:00")]),e._v(". Configurez "),n("code",[e._v("default-time")]),e._v(" pour changer l'horaire. Cet attribut prends un tableau de un ou deux horaires au format "),n("code",[e._v("12:00:00")]),e._v(". Le premier est pour la date de début, le deuxième pour la date de fin.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <p>Valeur: {{ value }}</p>\n    <el-date-picker\n      v-model="value"\n      type="daterange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'00:00:00\', \'23:59:59\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DatePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"entrez-la-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#entrez-la-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Entrez la date")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autres-unites"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autres-unites","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autres unités")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-mois"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-mois","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de mois")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeur-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeur-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeur par défaut")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si l'utilisateur n'a pas sélectionné de date, vous pouvez montrer la date d'aujourd'hui par défaut. Utilisez "),n("code",[e._v("default-value")]),e._v(" pour montrer une autre date. Sa valeur doit être parsable par "),n("code",[e._v("new Date()")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si le type est "),n("code",[e._v("daterange")]),e._v(", "),n("code",[e._v("default-value")]),e._v(" configure la panneau de gauche.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formats-de-date"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formats-de-date","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formats de date")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez "),n("code",[e._v("format")]),e._v(" pour contrôler l'affichage de la date dans le champ. Utilisez "),n("code",[e._v("value-format")]),e._v(" pour contrôler le format de la variable stockée.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, le composant accepte et émet un objet "),n("code",[e._v("Date")]),e._v(". Les formats supportés se trouvent ci-dessous, avec la date UTC 2017-01-02 03:04:05 comme exemple:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"warning"},[t("p",[this._v("Attention à la capitalisation !")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Format")]),n("th",[e._v("Signification")]),n("th",[e._v("Note")]),n("th",[e._v("Exemple")])])]),n("tbody",[n("tr",[n("td",[n("code",[e._v("yyyy")])]),n("td",[e._v("Année")]),n("td"),n("td",[e._v("2017")])]),n("tr",[n("td",[n("code",[e._v("M")])]),n("td",[e._v("Mois")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("MM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("MMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Jan")])]),n("tr",[n("td",[n("code",[e._v("MMMM")])]),n("td",[e._v("Mois")]),n("td"),n("td",[e._v("Janvier")])]),n("tr",[n("td",[n("code",[e._v("W")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine' ; pas de 0 au début")]),n("td",[e._v("1")])]),n("tr",[n("td",[n("code",[e._v("WW")])]),n("td",[e._v("Semaine")]),n("td",[e._v("uniquement pour les "),n("code",[e._v("format")]),e._v(" des types 'semaine'")]),n("td",[e._v("01")])]),n("tr",[n("td",[n("code",[e._v("d")])]),n("td",[e._v("Jour")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("2")])]),n("tr",[n("td",[n("code",[e._v("dd")])]),n("td",[e._v("Jour")]),n("td"),n("td",[e._v("02")])]),n("tr",[n("td",[n("code",[e._v("H")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("HH")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 24 heures")]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("h")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")]),e._v("; pas de 0 au début")]),n("td",[e._v("3")])]),n("tr",[n("td",[n("code",[e._v("hh")])]),n("td",[e._v("Heure")]),n("td",[e._v("Horloge 12 heures ; doit être utilisé avec "),n("code",[e._v("A")]),e._v(" ou "),n("code",[e._v("a")])]),n("td",[e._v("03")])]),n("tr",[n("td",[n("code",[e._v("m")])]),n("td",[e._v("Minute")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("4")])]),n("tr",[n("td",[n("code",[e._v("mm")])]),n("td",[e._v("Minute")]),n("td"),n("td",[e._v("04")])]),n("tr",[n("td",[n("code",[e._v("s")])]),n("td",[e._v("Seconde")]),n("td",[e._v("pas de 0 au début")]),n("td",[e._v("5")])]),n("tr",[n("td",[n("code",[e._v("ss")])]),n("td",[e._v("Seconde")]),n("td"),n("td",[e._v("05")])]),n("tr",[n("td",[n("code",[e._v("A")])]),n("td",[e._v("AM/PM")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", majuscules")]),n("td",[e._v("AM")])]),n("tr",[n("td",[n("code",[e._v("a")])]),n("td",[e._v("am/pm")]),n("td",[e._v("uniquement pour "),n("code",[e._v("format")]),e._v(", minuscules")]),n("td",[e._v("am")])]),n("tr",[n("td",[n("code",[e._v("timestamp")])]),n("td",[e._v("timestamp JS")]),n("td",[e._v("uniquement pour "),n("code",[e._v("value-format")]),e._v("; la variable stockée sera un "),n("code",[e._v("number")])]),n("td",[e._v("1483326245000")])]),n("tr",[n("td",[n("code",[e._v("[MM]")])]),n("td",[e._v("Pas de caractère d'échappement")]),n("td",[e._v("Pour échapper des caractères, placez-les entre crochets (ex: [A] [MM])")]),n("td",[e._v("MM")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-dates-de-fin-et-de-debut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-dates-de-fin-et-de-debut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les dates de fin et de début")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DatePicker) / array(DateRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champs.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder pour la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder pour la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")]),e._v(".")]),n("td",[e._v("yyyy-MM-dd")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DatePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("Tout ce qui est accepté par "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("Horaire par défaut quand on sélectionne une plage dates, optionnel.")]),n("td",[e._v("string[]")]),n("td",[e._v("Tableau de taille 2, chaque valeur est au format "),n("code",[e._v("12:00:00")]),e._v(". La première pour la date de début, la deuxième pour la date de fin.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non spécifié, la valeur sera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit être déclenchée.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("S'il faut ajouter le DatePicker au body")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("Un tableau d'objets { text, onClick } pour configurer les raccourcis, voir table ci-dessous.")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("Une fonction qui détermine si une date est désactivée ou pas, avec cette date en paramètre. Doit retourner un booléen.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cellClassName")]),n("td",[e._v("set custom className")]),n("td",[e._v("Function(Date)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("Premier jour du mois.")]),n("td",[e._v("Number")]),n("td",[e._v("1 to 7")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("onPick")]),n("td",[e._v("Callback se déclenchant quand la date sélectionnée change. Uniquement pour "),n("code",[e._v("daterange")]),e._v(" et "),n("code",[e._v("datetimerange")]),e._v(".")]),n("td",[e._v("Function({ maxDate, minDate })")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle personnalisé.")])])])])}],!1,null,null,null);t.default=i.exports},760:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","picker-options":t.pickerOptions},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec horaire par défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetime",placeholder:"Selectionnez date et horaire","default-time":"12:00:00"},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"Aujourd'hui",onClick:function(e){e.$emit("pick",new Date)}},{text:"Hier",onClick:function(e){var t=new Date;t.setTime(t.getTime()-864e5),e.$emit("pick",t)}},{text:"Il y a une semaine",onClick:function(e){var t=new Date;t.setTime(t.getTime()-6048e5),e.$emit("pick",t)}}]},value1:"",value2:"",value3:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Avec raccourcis")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","picker-options":t.pickerOptions,"range-separator":"à","start-placeholder":"Date de début","end-placeholder":"Date de fin",align:"right"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{pickerOptions:{shortcuts:[{text:"La semaine passée",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-6048e5),e.$emit("pick",[n,t])}},{text:"Le mois dernier",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-2592e6),e.$emit("pick",[n,t])}},{text:"Les 2 derniers mois",onClick:function(e){var t=new Date,n=new Date;n.setTime(n.getTime()-7776e6),e.$emit("pick",[n,t])}}]},value1:[new Date(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value2:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00"]},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Heure de la date de début 12:00:00, heure de la date de fin 08:00:00")]),t._v(" "),n("el-date-picker",{attrs:{type:"datetimerange",align:"right","start-placeholder":"Date de début","end-placeholder":"Date de fin","default-time":["12:00:00","08:00:00"]},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:"",value2:""}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Sélectionnez une date et une heure dans un seul picker.")]),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner une date et un horaire en un seul picker en réglant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetime")]),e._v(". La manière d'utiliser des raccourcis est la même que pour DatePicker.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetime"\n      placeholder="Selectionnez date et horaire">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      :picker-options="pickerOptions">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec horaire par défaut</span>\n    <el-date-picker\n      v-model="value3"\n      type="datetime"\n      placeholder="Selectionnez date et horaire"\n      default-time="12:00:00">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: \'Aujourd\\\'hui\',\n            onClick(picker) {\n              picker.$emit(\'pick\', new Date());\n            }\n          }, {\n            text: \'Hier\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit(\'pick\', date);\n            }\n          }, {\n            text: \'Il y a une semaine\',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', date);\n            }\n          }]\n        },\n        value1: \'\',\n        value2: \'\',\n        value3: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez sélectionner des plages en configurant "),n("code",[e._v("type")]),e._v(" sur "),n("code",[e._v("datetimerange")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetimerange"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Avec raccourcis</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetimerange"\n      :picker-options="pickerOptions"\n      range-separator="à"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        pickerOptions: {\n          shortcuts: [{\n            text: \'La semaine passée\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Le mois dernier\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }, {\n            text: \'Les 2 derniers mois\',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);\n              picker.$emit(\'pick\', [start, end]);\n            }\n          }]\n        },\n        value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous sélectionnez une plage de dates dans le panneau de date avec le type "),n("code",[e._v("datetimerange")]),e._v(", "),n("code",[e._v("00:00:00")]),e._v(" sera utilisé comme horaire par défaut pour les dates de début et de fin. Vous pouvez contrôler cette valeur avec l'attribut "),n("code",[e._v("default-time")]),e._v(". Il accepte un tableau de une ou deux chaînes de caractères. La première indique l'horaire de la date de début, la deuxième celui de la date de fin.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00</span>\n    <el-date-picker\n      v-model="value1"\n      type="datetimerange"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\']">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">Heure de la date de début 12:00:00, heure de la date de fin 08:00:00</span>\n    <el-date-picker\n      v-model="value2"\n      type="datetimerange"\n      align="right"\n      start-placeholder="Date de début"\n      end-placeholder="Date de fin"\n      :default-time="[\'12:00:00\', \'08:00:00\']">\n    </el-date-picker>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: \'\',\n        value2: \'\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"datetimepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" DateTimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("DateTimePicker est dérivé de DatePicker et TimePicker. Pour plus d'informations sur "),n("code",[e._v("pickerOptions")]),e._v(" et d'autres attributs, vous pouvez vous référer à DatePicker et TimePicker.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"date-et-horaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#date-et-horaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Date et horaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plage-de-dates-et-d-horaires"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plage-de-dates-et-d-horaires","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plage de dates et d'horaires")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"horaire-par-defaut-pour-les-plages-de-dates"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#horaire-par-defaut-pour-les-plages-de-dates","aria-hidden":"true"}},[this._v("¶")]),this._v(" Horaire par défaut pour les plages de dates")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(DateTimePicker) / array(DateTimeRangePicker)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si le DatePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le DatePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la croix de reset doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder en mode normal.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Le placeholder de la date de début en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Le placeholder de la date de fin en mode plage de dates.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("time-arrow-control")]),n("td",[e._v("Si l'horaire peut être sélectionné en utilisant les flèches de direction.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du picker.")]),n("td",[e._v("string")]),n("td",[e._v("year/month/date/datetime/ week/datetimerange/daterange")]),n("td",[e._v("date")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format d'affichage de la date dans le champ.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("yyyy-MM-dd HH:mm:ss")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignements.")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu déroulant du DateTimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur de plage.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Date par défaut du calendrier, optionnelle.")]),n("td",[e._v("Date")]),n("td",[e._v("N'importe quelle valeur acceptée par "),n("code",[e._v("new Date()")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-time")]),n("td",[e._v("L'horaire par défaut après avoir choisi une date.")]),n("td",[e._v("normal: string / plage de dates: string[]")]),n("td",[e._v("normal: un string tel que "),n("code",[e._v("12:00:00")]),e._v(", range: tableau de deux strings, le premier pour la date de début, le deuxième pour la date de fin. Si non spécifié, "),n("code",[e._v("00:00:00")]),e._v(" est utilisé.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Format de la variable stockée, optionnel. Si non spécifié, La valeur sera un objet Date.")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/fr-FR/component/date-picker#formats-de-date"}},[e._v("formats de date")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique au "),n("code",[e._v("name")]),e._v(" de l'input natif")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unlink-panels")]),n("td",[e._v("Rend indépendants les deux panneaux de plage de dates")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-date")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Icône de reset")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-du-picker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-du-picker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options du Picker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("shortcuts")]),n("td",[e._v("Un tableau d'objets { text, onClick } pour mettre en place des raccourcis, vérifier le tableau ci-dessous")]),n("td",[e._v("object[]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabledDate")]),n("td",[e._v("Une fonction déterminant si une date est désactivée avec cette date en paramètre. Retourne un Boolean")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cellClassName")]),n("td",[e._v("set custom className")]),n("td",[e._v("Function(Date)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("firstDayOfWeek")]),n("td",[e._v("Le premier jour de la semaine")]),n("td",[e._v("Number")]),n("td",[e._v("1 à 7")]),n("td",[e._v("7")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"raccourcis"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#raccourcis","aria-hidden":"true"}},[this._v("¶")]),this._v(" Raccourcis")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("text")]),n("td",[e._v("Titre du raccourci.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback se déclenchant quand le raccourci est cliqué, avec "),n("code",[e._v("vm")]),e._v(" en paramètre. Vous pouvez changer la valeur du picker en émettant l'évènement "),n("code",[e._v("pick")]),e._v(". Exemple: "),n("code",[e._v("vm.$emit('pick', new Date())")])]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur")]),n("td",[e._v("component's binding value")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("component instance")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("component instance")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},761:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-descriptions",{attrs:{title:"User Info"}},[n("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Place"}},[e._v("Suzhou")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Remarks"}},[n("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{model:{value:t.size,callback:function(e){t.size=e},expression:"size"}},[n("el-radio",{attrs:{label:""}},[t._v("Default")]),t._v(" "),n("el-radio",{attrs:{label:"medium"}},[t._v("Medium")]),t._v(" "),n("el-radio",{attrs:{label:"small"}},[t._v("Small")]),t._v(" "),n("el-radio",{attrs:{label:"mini"}},[t._v("Mini")])],1),t._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"With border",column:3,size:t.size,border:""}},[n("template",{slot:"extra"},[n("el-button",{attrs:{type:"primary",size:"small"}},[t._v("Operation")])],1),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-user"}),t._v("\n        Username\n      ")]),t._v("\n      kooriookami\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-mobile-phone"}),t._v("\n        Telephone\n      ")]),t._v("\n      18100000000\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-location-outline"}),t._v("\n        Place\n      ")]),t._v("\n      Suzhou\n    ")],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-tickets"}),t._v("\n        Remarks\n      ")]),t._v(" "),n("el-tag",{attrs:{size:"small"}},[t._v("School")])],2),t._v(" "),n("el-descriptions-item",[n("template",{slot:"label"},[n("i",{staticClass:"el-icon-office-building"}),t._v("\n        Address\n      ")]),t._v("\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    ")],2)],2),t._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"Without border",column:3,size:t.size}},[n("template",{slot:"extra"},[n("el-button",{attrs:{type:"primary",size:"small"}},[t._v("Operation")])],1),t._v(" "),n("el-descriptions-item",{attrs:{label:"Username"}},[t._v("kooriookami")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"Telephone"}},[t._v("18100000000")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"Place"}},[t._v("Suzhou")]),t._v(" "),n("el-descriptions-item",{attrs:{label:"Remarks"}},[n("el-tag",{attrs:{size:"small"}},[t._v("School")])],1),t._v(" "),n("el-descriptions-item",{attrs:{label:"Address"}},[t._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],2)]],2)},staticRenderFns:[]},{data:function(){return{size:""}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-descriptions",{attrs:{title:"Vertical list with border",direction:"vertical",column:4,border:""}},[n("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Place",span:2}},[e._v("Suzhou")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Remarks"}},[n("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1),e._v(" "),n("el-descriptions",{staticClass:"margin-top",attrs:{title:"Vertical list without border",column:4,direction:"vertical"}},[n("el-descriptions-item",{attrs:{label:"Username"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Place",span:2}},[e._v("Suzhou")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Remarks"}},[n("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"Address"}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-descriptions",{attrs:{title:"Customized style list",column:3,border:""}},[n("el-descriptions-item",{attrs:{label:"Username","label-class-name":"my-label","content-class-name":"my-content"}},[e._v("kooriookami")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Telephone"}},[e._v("18100000000")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Place"}},[e._v("Suzhou")]),e._v(" "),n("el-descriptions-item",{attrs:{label:"Remarks"}},[n("el-tag",{attrs:{size:"small"}},[e._v("School")])],1),e._v(" "),n("el-descriptions-item",{attrs:{label:"Address","content-style":{"text-align":"right"}}},[e._v("No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Display multiple fields in list form.")]),e._m(1),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="User Info">\n    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n    <el-descriptions-item label="Remarks">\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n')])])])],2),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="size">\n    <el-radio label="">Default</el-radio>\n    <el-radio label="medium">Medium</el-radio>\n    <el-radio label="small">Small</el-radio>\n    <el-radio label="mini">Mini</el-radio>\n  </el-radio-group>\n\n  <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>\n    <template slot="extra">\n      <el-button type="primary" size="small">Operation</el-button>\n    </template>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-user"></i>\n        Username\n      </template>\n      kooriookami\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-mobile-phone"></i>\n        Telephone\n      </template>\n      18100000000\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-location-outline"></i>\n        Place\n      </template>\n      Suzhou\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-tickets"></i>\n        Remarks\n      </template>\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item>\n      <template slot="label">\n        <i class="el-icon-office-building"></i>\n        Address\n      </template>\n      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province\n    </el-descriptions-item>\n  </el-descriptions>\n\n  <el-descriptions class="margin-top" title="Without border" :column="3" :size="size">\n    <template slot="extra">\n      <el-button type="primary" size="small">Operation</el-button>\n    </template>\n    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n    <el-descriptions-item label="Remarks">\n      <el-tag size="small">School</el-tag>\n    </el-descriptions-item>\n    <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n  </el-descriptions>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        size: \'\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="Vertical list with border" direction="vertical" :column="4" border>\n  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n\n<el-descriptions class="margin-top" title="Vertical list without border" :column="4" direction="vertical">\n  <el-descriptions-item label="Username">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place" :span="2">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n')])])])],2),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-descriptions title="Customized style list" :column="3" border>\n  <el-descriptions-item label="Username" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>\n  <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>\n  <el-descriptions-item label="Place">Suzhou</el-descriptions-item>\n  <el-descriptions-item label="Remarks">\n    <el-tag size="small">School</el-tag>\n  </el-descriptions-item>\n  <el-descriptions-item label="Address" :content-style="{\'text-align\': \'right\'}">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province</el-descriptions-item>\n</el-descriptions>\n<style>\n  .my-label {\n    background: #E1F3D8;\n  }\n\n  .my-content {\n    background: #FDE2E2;\n  }\n</style>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"descriptions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"sizes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sizes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"vertical-list"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#vertical-list","aria-hidden":"true"}},[this._v("¶")]),this._v(" Vertical List")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-style"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-style","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized Style")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("border")]),n("td",[e._v("with or without border")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("column")]),n("td",[e._v("numbers of "),n("code",[e._v("Descriptions Item")]),e._v(" in one line")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("direction of list")]),n("td",[e._v("string")]),n("td",[e._v("vertical / horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("size of list")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("title text, display on the top left")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("extra text, display on the top right")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("colon")]),n("td",[e._v("change default props colon value of Descriptions Item")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("labelClassName")]),n("td",[e._v("custom label class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentClassName")]),n("td",[e._v("custom content class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("labelStyle")]),n("td",[e._v("custom label style")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentStyle")]),n("td",[e._v("custom content style")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("custom title, display on the top left")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("custom extra area, display on the top right")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("label text")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span")]),n("td",[e._v("colspan of column")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("labelClassName")]),n("td",[e._v("custom label class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentClassName")]),n("td",[e._v("custom content class name")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("labelStyle")]),n("td",[e._v("custom label style")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("contentStyle")]),n("td",[e._v("custom content style")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"descriptions-item-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#descriptions-item-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Descriptions Item Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("custom label")])])])])}],!1,null,null,null);t.default=i.exports},762:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Tips",visible:t.dialogVisible,width:"30%","before-close":t.handleClose},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("span",[t._v("Ceci est un message")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]},{data:function(){return{dialogVisible:!1}},methods:{handleClose:function(t){this.$confirm("Voulez-vous vraiment quitter ?").then(function(e){t()}).catch(function(e){})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogTableVisible=!0}}},[t._v("Ouvrir un modal avec tableau")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogTableVisible},on:{"update:visible":function(e){t.dialogTableVisible=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1)],1),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialogFormVisible=!0}}},[t._v("Ouvrir un modal avec formulaire")]),t._v(" "),n("el-dialog",{attrs:{title:"Adresse d'expédition",visible:t.dialogFormVisible},on:{"update:visible":function(e){t.dialogFormVisible=e}}},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Nom de promotion","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Zones","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Sélectionnez une zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.dialogFormVisible=!1}}},[t._v("Confirmer")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-03",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"120px"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.outerVisible=!0}}},[t._v("Ouvrir le modal extérieur")]),t._v(" "),n("el-dialog",{attrs:{title:"Modal extérieur",visible:t.outerVisible},on:{"update:visible":function(e){t.outerVisible=e}}},[n("el-dialog",{attrs:{width:"30%",title:"Modal intérieur",visible:t.innerVisible,"append-to-body":""},on:{"update:visible":function(e){t.innerVisible=e}}}),t._v(" "),n("div",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.outerVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.innerVisible=!0}}},[t._v("Ouvrir le modal intérieur")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{outerVisible:!1,innerVisible:!1}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.centerDialogVisible=!0}}},[t._v("Cliquez pour ouvrir le modal")]),t._v(" "),n("el-dialog",{attrs:{title:"Attention",visible:t.centerDialogVisible,width:"30%",center:""},on:{"update:visible":function(e){t.centerDialogVisible=e}}},[n("span",[t._v("Le contenu du modal n'est pas centré par défaut.")]),t._v(" "),n("span",{staticClass:"dialog-footer",attrs:{slot:"footer"},slot:"footer"},[n("el-button",{on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.centerDialogVisible=!1}}},[t._v("Confirmer")])],1)])],1)},staticRenderFns:[]},{data:function(){return{centerDialogVisible:!1}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Informe les utilisateurs tout en préservant l'état de la page.")]),e._m(1),n("p",[e._v("Le Dialog ouvre un modal personnalisable.")]),n("demo-block",[n("div",[n("p",[e._v("Configurez l'attribut "),n("code",[e._v("visible")]),e._v(" avec un "),n("code",[e._v("Boolean")]),e._v(", un modal apparaîtra quand la valeur sera à "),n("code",[e._v("true")]),e._v(". Le Dialog possède deux parties: "),n("code",[e._v("body")]),e._v(" et "),n("code",[e._v("footer")]),e._v(", ce-dernier nécessitant un "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("footer")]),e._v(". L'attribut optionnel "),n("code",[e._v("title")]),e._v(" (vide par défaut) définit le titre. Cet exemple montre également comment "),n("code",[e._v("before-close")]),e._v(" peut être utilisé.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="dialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Tips"\n  :visible.sync="dialogVisible"\n  width="30%"\n  :before-close="handleClose">\n  <span>Ceci est un message</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Voulez-vous vraiment quitter ?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("p",[e._v("Le contenu du modal peut être n'importe quoi, tableau ou formulaire compris.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\x3c!-- Table --\x3e\n<el-button type="text" @click="dialogTableVisible = true">Ouvrir un modal avec tableau</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="Date" width="150"></el-table-column>\n    <el-table-column property="name" label="Nom" width="200"></el-table-column>\n    <el-table-column property="address" label="Adresse"></el-table-column>\n  </el-table>\n</el-dialog>\n\n\x3c!-- Form --\x3e\n<el-button type="text" @click="dialogFormVisible = true">Ouvrir un modal avec formulaire</el-button>\n\n<el-dialog title="Adresse d\'expédition" :visible.sync="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="Nom de promotion" :label-width="formLabelWidth">\n      <el-input v-model="form.name" autocomplete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="Zones" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="Sélectionnez une zone">\n        <el-option label="Zone No.1" value="shanghai"></el-option>\n        <el-option label="Zone No.2" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        dialogTableVisible: false,\n        dialogFormVisible: false,\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        formLabelWidth: \'120px\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Normalement l'utilisation de Dialog imbriqué est déconseillée. Si vous avez besoin de plusieurs Dialogs sur la page, vous pouvez les aplatir afin qu'ils soit au même niveau. Si vous devez absolument utiliser un Dialog imbriqué, configurez l'attribut "),n("code",[e._v("append-to-body")]),e._v(" du Dialog imbriqué à "),n("code",[e._v("true")]),e._v(" et il sera ajouté au body au lieu de son noeud parent, afin d'avoir un affichage correct.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button type="text" @click="outerVisible = true">Ouvrir le modal extérieur</el-button>\n\n  <el-dialog title="Modal extérieur" :visible.sync="outerVisible">\n    <el-dialog\n        width="30%"\n        title="Modal intérieur"\n        :visible.sync="innerVisible"\n        append-to-body>\n    </el-dialog>\n    <div slot="footer" class="dialog-footer">\n      <el-button @click="outerVisible = false">Annuler</el-button>\n      <el-button type="primary" @click="innerVisible = true">Ouvrir le modal intérieur</el-button>\n    </div>\n  </el-dialog>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        outerVisible: false,\n        innerVisible: false\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Le contenu du modal peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Régler "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera horizontalement le header et le footer. "),n("code",[e._v("center")]),e._v(" n'affecte que le header et le footer. Le contenu du body pouvant être n'importe quoi, si vous désirez le centrer vous devrez ajouter des règles CSS.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="centerDialogVisible = true">Cliquez pour ouvrir le modal</el-button>\n\n<el-dialog\n  title="Attention"\n  :visible.sync="centerDialogVisible"\n  width="30%"\n  center>\n  <span>Le contenu du modal n\'est pas centré par défaut.</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="centerDialogVisible = false">Annuler</el-button>\n    <el-button type="primary" @click="centerDialogVisible = false">Confirmer</el-button>\n  </span>\n</el-dialog>\n\n<script>\n  export default {\n    data() {\n      return {\n        centerDialogVisible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dialog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("code",[e._v("before-close")]),e._v(" ne fonctionne que quand l'utilisateur clique sur l'icône de fermeture en dehors du modal. S'il y a des boutons dans le "),n("code",[e._v("footer")]),e._v(", vous pouvez configurer "),n("code",[e._v("before-close")]),e._v(" grâce à leur évènement click.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dialog-imbrique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dialog-imbrique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dialog imbriqué")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si un Dialog est imbriqué dans un autre Dialog, "),n("code",[e._v("append-to-body")]),e._v(" est requis.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer-le-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer-le-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer le contenu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de Dialog bénéficie du lazy loading, ce qui signifie que le slot par défaut n'est pas généré par le DOM avant la première ouverture. Si vous avez besoin de manipuler le DOM ou d'accéder à un composant via "),n("code",[e._v("ref")]),e._v(", vous pouvez le faire avec la callback de l'évènement "),n("code",[e._v("open")]),e._v(".")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Si la variable liée à "),n("code",[e._v("visible")]),e._v(" est gérée dans Vuex, le modificateur "),n("code",[e._v(".sync")]),e._v(" ne peut pas fonctionner. Dans ce cas retirez-le, écoutez les évènements "),n("code",[e._v("open")]),e._v(" et "),n("code",[e._v("close")]),e._v(", et commitez les mutations Vuex pour mettre à jour la valeur de cette variable.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("visible")]),n("td",[e._v("Visibilité du Dialog, supporte le modificateur .sync.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du Dialog. Peut aussi être passé via un slot (voir la table suivante).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("50%")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Si le Dialog doit être en plein écran.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("top")]),n("td",[e._v("Valeur du "),n("code",[e._v("margin-top")]),e._v(" du CSS du Dialog.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("15vh")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("Si un masque est affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("S'il faut ajouter le modal au body. Si "),n("code",[e._v("false")]),e._v(", le modal sera ajouter à l'élément parent du Dialog.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("S'il faut ajouter le Dialog au body. Un Dialog imbriqué doit avoir cet attribut à "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lock-scroll")]),n("td",[e._v("Si le défilement du body est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Nom de classe pour le Dialog")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-click-modal")]),n("td",[e._v("Si le Dialog peut être fermé en cliquant sur le masque.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("Si le Dialog peut être fermé en appuyant sur Echap.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("Si le bouton de fermeture doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("Callback avant la fermeture du Dialog.")]),n("td",[e._v("function(done)，done est utilisé pour fermer le Dialog.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le header et le footer doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("destroy-on-close")]),n("td",[e._v("Destroy elements in Dialog when closed")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dialog.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Contenu du titre.")])]),n("tr",[n("td",[e._v("footer")]),n("td",[e._v("Contenu du footer.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Se déclenche quand le Dialog s'ouvre.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Se déclenche quand l'animation d'ouverture est terminée.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le Dialog se ferme.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Se déclenche quand l'animation de fermeture du Dialog est terminée.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},763:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("span",[e._v("Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.")]),e._v(" "),n("el-divider"),e._v(" "),n("span",[e._v("Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("span",[e._v("Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.")]),e._v(" "),n("el-divider",{attrs:{"content-position":"left"}},[e._v("Rabindranath Tagore")]),e._v(" "),n("span",[e._v("Je ne peux pas choisir le meilleur. Le meilleur me choisit.")]),e._v(" "),n("el-divider",[n("i",{staticClass:"el-icon-star-on"})]),e._v(" "),n("span",[e._v("Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.")]),e._v(" "),n("el-divider",{attrs:{"content-position":"right"}},[e._v("Rabindranath Tagore")])],1)]],2)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("span",[e._v("Pluie")]),e._v(" "),n("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),n("span",[e._v("Maison")]),e._v(" "),n("el-divider",{attrs:{direction:"vertical"}}),e._v(" "),n("span",[e._v("Herbe")])],1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Une ligne de séparation entre deux contenus.")]),e._m(1),n("p",[e._v("Séparer le texte de deux paragraphes.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <div>\n    <span>Je suis assis à ma fenêtre ce matin où le monde, tel un passant, s’arrête un instant, me fait signe de la tête et part.</span>\n    <el-divider></el-divider>\n    <span>Les petites pensées sont le bruissement des feuilles; ils ont leur murmure de joie dans mon esprit.</span>\n  </div>\n</template>\n")])])])],2),e._m(2),n("p",[e._v("Vous ajouter du contenu dans la ligne de séparation.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <span>Vous ne voyez pas ce que vous êtes, ce que vous voyez est votre ombre.</span>\n    <el-divider content-position="left">Rabindranath Tagore</el-divider>\n    <span>Je ne peux pas choisir le meilleur. Le meilleur me choisit.</span>\n    <el-divider><i class="el-icon-star-on"></i></el-divider>\n    <span>Mes souhaits sont des imbéciles, ils crient à travers ta chanson, mon Maître. Laisse-moi mais écoute.</span>\n    <el-divider content-position="right">Rabindranath Tagore</el-divider>\n  </div>\n</template>\n')])])])],2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <span>Pluie</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>Maison</span>\n    <el-divider direction="vertical"></el-divider>\n    <span>Herbe</span>\n  </div>\n</template>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"divider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#divider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Divider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"separation-verticale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#separation-verticale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Séparation verticale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Règle la direction du séparateur.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("content-position")]),n("td",[e._v("Personnalise le contenu du séparateur.")]),n("td",[e._v("String")]),n("td",[e._v("left / right / center")]),n("td",[e._v("center")])])])])}],!1,null,null,null);t.default=i.exports},764:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.direction,callback:function(e){t.direction=e},expression:"direction"}},[n("el-radio",{attrs:{label:"ltr"}},[t._v("left to right")]),t._v(" "),n("el-radio",{attrs:{label:"rtl"}},[t._v("right to left")]),t._v(" "),n("el-radio",{attrs:{label:"ttb"}},[t._v("top to bottom")]),t._v(" "),n("el-radio",{attrs:{label:"btt"}},[t._v("bottom to top")])],1),t._v(" "),n("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  open\n")]),t._v(" "),n("el-drawer",{attrs:{title:"I am the title",visible:t.drawer,direction:t.direction,"before-close":t.handleClose},on:{"update:visible":function(e){t.drawer=e}}},[n("span",[t._v("Hi, there!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,direction:"rtl"}},methods:{handleClose:function(t){this.$confirm("Are you sure you want to close this?").then(function(e){t()}).catch(function(e){})}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  open\n")]),t._v(" "),n("el-drawer",{attrs:{title:"I am the title",visible:t.drawer,"with-header":!1},on:{"update:visible":function(e){t.drawer=e}}},[n("span",[t._v("Hi there!")])])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{attrs:{type:"text"},on:{click:function(e){t.table=!0}}},[t._v("Open Drawer with nested table")]),t._v(" "),n("el-button",{attrs:{type:"text"},on:{click:function(e){t.dialog=!0}}},[t._v("Open Drawer with nested form")]),t._v(" "),n("el-drawer",{attrs:{title:"I have a nested table inside!",visible:t.table,direction:"rtl",size:"50%"},on:{"update:visible":function(e){t.table=e}}},[n("el-table",{attrs:{data:t.gridData}},[n("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),t._v(" "),n("el-drawer",{ref:"drawer",attrs:{title:"I have a nested form inside!","before-close":t.handleClose,visible:t.dialog,direction:"ltr","custom-class":"demo-drawer"},on:{"update:visible":function(e){t.dialog=e}}},[n("div",{staticClass:"demo-drawer__content"},[n("el-form",{attrs:{model:t.form}},[n("el-form-item",{attrs:{label:"Name","label-width":t.formLabelWidth}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Area","label-width":t.formLabelWidth}},[n("el-select",{attrs:{placeholder:"Please select activity area"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Area1",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Area2",value:"beijing"}})],1)],1)],1),t._v(" "),n("div",{staticClass:"demo-drawer__footer"},[n("el-button",{on:{click:t.cancelForm}},[t._v("Cancel")]),t._v(" "),n("el-button",{attrs:{type:"primary",loading:t.loading},on:{click:function(e){t.$refs.drawer.closeDrawer()}}},[t._v(t._s(t.loading?"Submitting ...":"Submit"))])],1)],1)])],1)},staticRenderFns:[]},{data:function(){return{table:!1,dialog:!1,loading:!1,gridData:[{date:"2016-05-02",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-04",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-01",name:"Peter Parker",address:"Queens, New York City"},{date:"2016-05-03",name:"Peter Parker",address:"Queens, New York City"}],form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px",timer:null}},methods:{handleClose:function(t){var n=this;this.loading||this.$confirm("Do you want to submit?").then(function(e){n.loading=!0,n.timer=setTimeout(function(){t(),setTimeout(function(){n.loading=!1},400)},2e3)}).catch(function(e){})},cancelForm:function(){this.loading=!1,this.dialog=!1,clearTimeout(this.timer)}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-button",{staticStyle:{"margin-left":"16px"},attrs:{type:"primary"},on:{click:function(e){t.drawer=!0}}},[t._v("\n  open\n")]),t._v(" "),n("el-drawer",{attrs:{title:"I'm outer Drawer",visible:t.drawer,size:"50%"},on:{"update:visible":function(e){t.drawer=e}}},[n("div",[n("el-button",{on:{click:function(e){t.innerDrawer=!0}}},[t._v("Click me!")]),t._v(" "),n("el-drawer",{attrs:{title:"I'm inner Drawer","append-to-body":!0,"before-close":t.handleClose,visible:t.innerDrawer},on:{"update:visible":function(e){t.innerDrawer=e}}},[n("p",[t._v("_(:зゝ∠)_")])])],1)])],1)},staticRenderFns:[]},{data:function(){return{drawer:!1,innerDrawer:!1}},methods:{handleClose:function(t){this.$confirm("You still have unsaved data, proceed?").then(function(e){t()}).catch(function(e){})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("p",[e._v("Callout a temporary drawer, from multiple direction")]),n("demo-block",[n("div",[n("p",[e._v("You must set "),n("code",[e._v("visible")]),e._v(" for "),n("code",[e._v("Drawer")]),e._v(" like "),n("code",[e._v("Dialog")]),e._v(" does to control the visibility of "),n("code",[e._v("Drawer")]),e._v(" itself, it's "),n("code",[e._v("boolean")]),e._v(" type. "),n("code",[e._v("Drawer")]),e._v(" has to parts: "),n("code",[e._v("title")]),e._v(" & "),n("code",[e._v("body")]),e._v(", the "),n("code",[e._v("title")]),e._v(" is a named slot, you can also set the title through attribute named "),n("code",[e._v("title")]),e._v(", default to an empty string, the "),n("code",[e._v("body")]),e._v(" part is the main area of "),n("code",[e._v("Drawer")]),e._v(", which contains user defined content. When opening, "),n("code",[e._v("Drawer")]),e._v(" expand itself from the "),n("strong",[e._v("right corner to left")]),e._v(" which size is "),n("strong",[e._v("30%")]),e._v(" of the browser window by default. You can change that default behavior by setting "),n("code",[e._v("direction")]),e._v(" and "),n("code",[e._v("size")]),e._v(" attribute. This show case also demonstrated how to use the "),n("code",[e._v("before-close")]),e._v(" API, check the Attribute section for more detail")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="direction">\n  <el-radio label="ltr">left to right</el-radio>\n  <el-radio label="rtl">right to left</el-radio>\n  <el-radio label="ttb">top to bottom</el-radio>\n  <el-radio label="btt">bottom to top</el-radio>\n</el-radio-group>\n\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I am the title"\n  :visible.sync="drawer"\n  :direction="direction"\n  :before-close="handleClose">\n  <span>Hi, there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        direction: \'rtl\',\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'Are you sure you want to close this?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("When you no longer need a title, you can remove title from drawer.")]),n("demo-block",[n("div",[n("p",[e._v("Set the "),n("code",[e._v("withHeader")]),e._v(" attribute to "),n("strong",[e._v("false")]),e._v(", you can remove the title from drawer, thus your drawer can have more space on screen. If you want to be accessible, make sure to set the "),n("code",[e._v("title")]),e._v(" attribute.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I am the title"\n  :visible.sync="drawer"\n  :with-header="false">\n  <span>Hi there!</span>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-button type="text" @click="table = true">Open Drawer with nested table</el-button>\n<el-button type="text" @click="dialog = true">Open Drawer with nested form</el-button>\n<el-drawer\n  title="I have a nested table inside!"\n  :visible.sync="table"\n  direction="rtl"\n  size="50%">\n   <el-table :data="gridData">\n      <el-table-column property="date" label="Date" width="150"></el-table-column>\n      <el-table-column property="name" label="Name" width="200"></el-table-column>\n      <el-table-column property="address" label="Address"></el-table-column>\n    </el-table>\n</el-drawer>\n\n<el-drawer\n  title="I have a nested form inside!"\n  :before-close="handleClose"\n  :visible.sync="dialog"\n  direction="ltr"\n  custom-class="demo-drawer"\n  ref="drawer"\n  >\n  <div class="demo-drawer__content">\n    <el-form :model="form">\n      <el-form-item label="Name" :label-width="formLabelWidth">\n        <el-input v-model="form.name" autocomplete="off"></el-input>\n      </el-form-item>\n      <el-form-item label="Area" :label-width="formLabelWidth">\n        <el-select v-model="form.region" placeholder="Please select activity area">\n          <el-option label="Area1" value="shanghai"></el-option>\n          <el-option label="Area2" value="beijing"></el-option>\n        </el-select>\n      </el-form-item>\n    </el-form>\n    <div class="demo-drawer__footer">\n      <el-button @click="cancelForm">Cancel</el-button>\n      <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? \'Submitting ...\' : \'Submit\' }}</el-button>\n    </div>\n  </div>\n</el-drawer>\n\n<script>\nexport default {\n  data() {\n    return {\n      table: false,\n      dialog: false,\n      loading: false,\n      gridData: [{\n        date: \'2016-05-02\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-04\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-01\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }, {\n        date: \'2016-05-03\',\n        name: \'Peter Parker\',\n        address: \'Queens, New York City\'\n      }],\n      form: {\n        name: \'\',\n        region: \'\',\n        date1: \'\',\n        date2: \'\',\n        delivery: false,\n        type: [],\n        resource: \'\',\n        desc: \'\'\n      },\n      formLabelWidth: \'80px\',\n      timer: null,\n    };\n  },\n  methods: {\n    handleClose(done) {\n      if (this.loading) {\n        return;\n      }\n      this.$confirm(\'Do you want to submit?\')\n        .then(_ => {\n          this.loading = true;\n          this.timer = setTimeout(() => {\n            done();\n            // animation takes time\n            setTimeout(() => {\n              this.loading = false;\n            }, 400);\n          }, 2000);\n        })\n        .catch(_ => {});\n    },\n    cancelForm() {\n      this.loading = false;\n      this.dialog = false;\n      clearTimeout(this.timer);\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("If you need multiple Drawer in different layer, you must set the "),n("code",[e._v("append-to-body")]),e._v(" attribute to "),n("strong",[e._v("true")])])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">\n  open\n</el-button>\n\n<el-drawer\n  title="I\'m outer Drawer"\n  :visible.sync="drawer"\n  size="50%">\n  <div>\n   <el-button @click="innerDrawer = true">Click me!</el-button>\n   <el-drawer\n     title="I\'m inner Drawer"\n     :append-to-body="true"\n     :before-close="handleClose"\n     :visible.sync="innerDrawer">\n     <p>_(:зゝ∠)_</p>\n   </el-drawer>\n  </div>\n</el-drawer>\n\n<script>\n  export default {\n    data() {\n      return {\n        drawer: false,\n        innerDrawer: false,\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm(\'You still have unsaved data, proceed?\')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n<\/script>\n\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"drawer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Sometimes, "),n("code",[e._v("Dialog")]),e._v(" does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like "),n("code",[e._v("terms & conditions")]),e._v(", "),n("code",[e._v("Drawer")]),e._v(" has almost identical API with "),n("code",[e._v("Dialog")]),e._v(", but it introduces different user experience.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"no-title"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#no-title","aria-hidden":"true"}},[this._v("¶")]),this._v(" No Title")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customization-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customization-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customization Content")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Like "),n("code",[e._v("Dialog")]),e._v(", "),n("code",[e._v("Drawer")]),e._v(" can do many diverse interaction as you wanted.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nested-drawer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nested-drawer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nested Drawer")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("You can also have multiple layer of "),n("code",[e._v("Drawer")]),e._v(" just like "),n("code",[e._v("Dialog")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through "),n("code",[e._v("ref")]),e._v(" or after "),n("code",[e._v("open")]),e._v(" event emitted.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Drawer provides an API called "),n("code",[e._v("destroyOnClose")]),e._v(", which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your "),n("code",[e._v("mounted")]),e._v(" life cycle to be called every time the Drawer opens.")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("If the variable bound to "),n("code",[e._v("visible")]),e._v(" is managed in Vuex store, the "),n("code",[e._v(".sync")]),e._v(" can not work properly. In this case, please remove the "),n("code",[e._v(".sync")]),e._v(" modifier, listen to "),n("code",[e._v("open")]),e._v(" and "),n("code",[e._v("close")]),e._v(" events of Dialog, and commit Vuex mutations to update the value of that variable in the event handlers.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Parameter")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Acceptable Values")]),n("th",[e._v("Defaults")])])]),n("tbody",[n("tr",[n("td",[e._v("append-to-body")]),n("td",[e._v("Controls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to "),n("strong",[e._v("true")])]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-close")]),n("td",[e._v("If set, closing procedure will be halted")]),n("td",[e._v("function(done), done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-on-press-escape")]),n("td",[e._v("Indicates whether Drawer can be closed by pressing ESC")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("custom-class")]),n("td",[e._v("Extra class names for Drawer")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("destroy-on-close")]),n("td",[e._v("Indicates whether children should be destroyed after Drawer closed")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("modal")]),n("td",[e._v("Should show shadowing layer")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("modal-append-to-body")]),n("td",[e._v("Indicates should shadowing layer be insert into DocumentBody element")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("Drawer's opening direction")]),n("td",[e._v("Direction")]),n("td",[e._v("rtl / ltr / ttb / btt")]),n("td",[e._v("rtl")])]),n("tr",[n("td",[e._v("show-close")]),n("td",[e._v("Should show close button at the top right of Drawer")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Drawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is "),n("code",[e._v("number")]),e._v(" type, it describes the size by unit of pixels; when size is "),n("code",[e._v("string")]),e._v(" type, it should be used with "),n("code",[e._v("x%")]),e._v(" notation, other wise it will be interpreted to pixel unit")]),n("td",[e._v("number / string")]),n("td",[e._v("-")]),n("td",[e._v("'30%'")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Drawer's title, can also be set by named slot, detailed descriptions can be found in the slot form")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("visible")]),n("td",[e._v("Should Drawer be displayed, also support the "),n("code",[e._v(".sync")]),e._v(" notation")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("wrapperClosable")]),n("td",[e._v("Indicates whether user can close Drawer by clicking the shadowing layer.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("withHeader")]),n("td",[e._v("Flag that controls the header section's existance, default to true, when withHeader set to false, both "),n("code",[e._v("title attribute")]),e._v(" and "),n("code",[e._v("title slot")]),e._v(" won't work")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Drawer's Content")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Drawer Title Section")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-methods"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-methods","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Methods")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("closeDrawer")]),n("td",[e._v("In order to close Drawer, this method will call "),n("code",[e._v("before-close")]),e._v(".")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"drawer-events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#drawer-events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Drawer Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameter")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Triggered before Drawer opening animation begins")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("opened")]),n("td",[e._v("Triggered after Drawer opening animation ended")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Triggered before Drawer closing animation begins")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closed")]),n("td",[e._v("Triggered after Drawer closing animation ended")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},765:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Menu déroulant"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",[n("el-button",{attrs:{type:"primary"}},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:e.handleClick}},[e._v("\n  Liste déroulante\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleClick:function(){alert("button click")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"block-col-2"},[n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En passant la souris")]),e._v(" "),n("el-dropdown",[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check"}},[e._v("Action 5")])],1)],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("span",{staticClass:"demonstration"},[e._v("En cliquant")]),e._v(" "),n("el-dropdown",{attrs:{trigger:"click"}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n        Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{icon:"el-icon-plus"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-plus-outline"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-check"}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{icon:"el-icon-circle-check"}},[e._v("Action 5")])],1)],1)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"hide-on-click":!1}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{on:{command:e.handleCommand}},[n("span",{staticClass:"el-dropdown-link"},[e._v("\n    Liste déroulante"),n("i",{staticClass:"el-icon-arrow-down el-icon--right"})]),e._v(" "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",{attrs:{command:"a"}},[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"b"}},[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"c"}},[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"d",disabled:""}},[e._v("Action 4")]),e._v(" "),n("el-dropdown-item",{attrs:{command:"e",divided:""}},[e._v("Action 5")])],1)],1)],1)},staticRenderFns:[]},{methods:{handleCommand:function(e){this.$message("click on item "+e)}}}),"element-demo5":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-dropdown",{attrs:{"split-button":"",type:"primary"}},[e._v("\n  Défaut\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"medium","split-button":"",type:"primary"}},[e._v("\n  Medium\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"small","split-button":"",type:"primary"}},[e._v("\n  Small\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1),e._v(" "),n("el-dropdown",{attrs:{size:"mini","split-button":"",type:"primary"}},[e._v("\n  Mini\n  "),n("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[n("el-dropdown-item",[e._v("Action 1")]),e._v(" "),n("el-dropdown-item",[e._v("Action 2")]),e._v(" "),n("el-dropdown-item",[e._v("Action 3")]),e._v(" "),n("el-dropdown-item",[e._v("Action 4")])],1)],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu déroulant pour afficher des listes de liens et d'actions possibles.")]),e._m(1),n("p",[e._v("Passez sur le menu avec la souris pour dérouler son contenu.")]),n("demo-block",[n("div",[n("p",[e._v("L'élément déclencheur est généré par le "),n("code",[e._v("slot")]),e._v(" par défaut, et le menu déroulant est généré par le "),n("code",[e._v("slot")]),e._v(" appelé "),n("code",[e._v("dropdown")]),e._v(". Par défaut le menu apparaît simplement en passant la souris sur l'élément déclencheur, sans avoir à cliquer.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <span class="el-dropdown-link">\n    Menu déroulant<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\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 disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n')])])])],2),e._m(2),n("p",[e._v("Utilisez le bouton pour ouvrir le menu déroulant.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("split-button")]),e._v(" pour séparer le déclencheur du reste du bouton, ce dernier devenant la partie gauche et le déclencheur la partie droite.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown>\n  <el-button type="primary">\n    Liste déroulante<i class="el-icon-arrow-down 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  Liste déroulante\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\n<style>\n  .el-dropdown {\n    vertical-align: top;\n  }\n  .el-dropdown + .el-dropdown {\n    margin-left: 15px;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        alert(\'button click\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez choisir de déclencher le menu au moment du clic, ou en passant la souris sur l'élément.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("trigger")]),e._v(". Par défaut, il est à "),n("code",[e._v("hover")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">En passant la souris</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">En cliquant</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item icon="el-icon-plus">Action 1</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus">Action 2</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-plus-outline">Action 3</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-check">Action 4</el-dropdown-item>\n        <el-dropdown-item icon="el-icon-circle-check">Action 5</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n  .demonstration {\n    display: block;\n    color: #8492a6;\n    font-size: 14px;\n    margin-bottom: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu se ferme après avoir cliqué dans la liste. Vous pouvez changer cette option en mettant "),n("code",[e._v("hide-on-click")]),e._v(" à "),n("code",[e._v("false")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\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 disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v('Cliquer sur un élément du dropdown déclenche un évènement "command".\nLe paramètre de cet évènement peut être assigné à chaque élément de la liste.')]),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    Liste déroulante<i class="el-icon-arrow-down el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">Action 1</el-dropdown-item>\n    <el-dropdown-item command="b">Action 2</el-dropdown-item>\n    <el-dropdown-item command="c">Action 3</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>Action 4</el-dropdown-item>\n    <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n<style>\n  .el-dropdown-link {\n    cursor: pointer;\n    color: #409EFF;\n  }\n  .el-icon-arrow-down {\n    font-size: 12px;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message(\'click on item \' + command);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("En plus de la taille par défaut, le composant Dropdown propose trois autres tailles différentes.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour déterminer une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-dropdown split-button type="primary">\n  Défaut\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-menu>\n</el-dropdown>\n\n<el-dropdown size="medium" split-button type="primary">\n  Medium\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-menu>\n</el-dropdown>\n\n<el-dropdown size="small" split-button type="primary">\n  Small\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-menu>\n</el-dropdown>\n\n<el-dropdown size="mini" split-button type="primary">\n  Mini\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-menu>\n</el-dropdown>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"element-declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#element-declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Élément déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"declencheur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#declencheur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Déclencheur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermer-le-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermer-le-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermer le menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("hide-on-click")]),e._v(" pour déterminer si le menu se ferme après avoir cliqué sur un élément de la liste.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenement-command"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenement-command","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènement command")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du bouton, se référer au composant "),n("code",[e._v("Button")]),e._v(". Ne marche que si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du menu, marche aussi avec "),n("code",[e._v("split button")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("split-button")]),n("td",[e._v("Si le bouton est séparé en deux.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu déroulant")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end")]),n("td",[e._v("bottom-end")])]),n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment déclencher l'ouverture du menu.")]),n("td",[e._v("string")]),n("td",[e._v("hover/click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("hide-on-click")]),n("td",[e._v("Si le menu doit disparaître après avoir cliqué sur un élément.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant d'afficher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("250")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher le menu (ne marche que si "),n("code",[e._v("trigger")]),e._v(" est "),n("code",[e._v("hover")]),e._v(")")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("150")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex"}},[e._v("tabindex")]),e._v(" de Dropdown")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Dropdown est désactivé")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"dropdown-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Dropdown Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu du Dropdown. Note: doit être un élément du DOM valide (ex. "),n("code",[e._v("<span>, <button> etc.")]),e._v(") ou "),n("code",[e._v("el-component")]),e._v(", pour y attacher un évènement.")])]),n("tr",[n("td",[e._v("dropdown")]),n("td",[e._v("Contenu du menu du Dropdown, en général un élément "),n("code",[e._v("<el-dropdown-menu>")]),e._v(".")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-dropdown"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-dropdown","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du Dropdown")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Si "),n("code",[e._v("split-button")]),e._v(" est "),n("code",[e._v("true")]),e._v(", se déclenche quand le bouton de gauche est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("command")]),n("td",[e._v("Se déclenche quand un élément de la liste est cliqué.")]),n("td",[e._v("L'attribut command de l'élément de la liste.")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu s'affiche ou disparaît.")]),n("td",[n("code",[e._v("true")]),e._v(" quand il apparaît, "),n("code",[e._v("false")]),e._v(" sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-elements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-elements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des éléments du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("command")]),n("td",[e._v("Le contenu à envoyer au callback de l'évènement "),n("code",[e._v("command")]),e._v(" du Dropdown.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'élément est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("divided")]),n("td",[e._v("Si un diviseur doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},766:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{description:"description"}})],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{image:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",{attrs:{"image-size":200}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-empty",[t("el-button",{attrs:{type:"primary"}},[this._v("Button")])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Placeholder hints for empty states.")]),e._m(1),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty description="description"></el-empty>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-empty>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty :image-size="200"></el-empty>\n')])])])],2),e._m(6),n("p",[e._v("Use the default slot to insert content at the bottom.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-empty>\n  <el-button type="primary">Button</el-button>\n</el-empty>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"empty"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-image"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-image","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom image")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("image")]),e._v(" prop to set image URL.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"image-size"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image-size","aria-hidden":"true"}},[this._v("¶")]),this._v(" Image size")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Use "),n("code",[e._v("image-size")]),e._v(" prop to control image size.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"bottom-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#bottom-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Bottom content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"empty-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Acceptable Value")]),n("th",[e._v("Default Value")])])]),n("tbody",[n("tr",[n("td",[e._v("image")]),n("td",[e._v("image URL")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("image-size")]),n("td",[e._v("image size (width)")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("description")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"empty-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#empty-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Empty Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("default")]),n("td",[e._v("Custom bottom content")])]),n("tr",[n("td",[e._v("image")]),n("td",[e._v("Custom image")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Custom description")])])])])}],!1,null,null,null);t.default=i.exports},767:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.form,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.form.name,callback:function(e){t.$set(t.form,"name",e)},expression:"form.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"please select your zone"},model:{value:t.form.region,callback:function(e){t.$set(t.form,"region",e)},expression:"form.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Choisissez une date"},model:{value:t.form.date1,callback:function(e){t.$set(t.form,"date1",e)},expression:"form.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.form.date2,callback:function(e){t.$set(t.form,"date2",e)},expression:"form.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery"}},[n("el-switch",{model:{value:t.form.delivery,callback:function(e){t.$set(t.form,"delivery",e)},expression:"form.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.form.type,callback:function(e){t.$set(t.form,"type",e)},expression:"form.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{model:{value:t.form.resource,callback:function(e){t.$set(t.form,"resource",e)},expression:"form.resource"}},[n("el-radio",{attrs:{label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.form.desc,callback:function(e){t.$set(t.form,"desc",e)},expression:"form.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Créer")]),t._v(" "),n("el-button",[t._v("Annuler")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:t.formInline}},[n("el-form-item",{attrs:{label:"Approved by"}},[n("el-input",{attrs:{placeholder:"Approved by"},model:{value:t.formInline.user,callback:function(e){t.$set(t.formInline,"user",e)},expression:"formInline.user"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.formInline.region,callback:function(e){t.$set(t.formInline,"region",e)},expression:"formInline.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Query")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{formInline:{user:"",region:""}}},methods:{onSubmit:function(){console.log("submit!")}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{attrs:{size:"small"},model:{value:t.labelPosition,callback:function(e){t.labelPosition=e},expression:"labelPosition"}},[n("el-radio-button",{attrs:{label:"left"}},[t._v("Left")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("Right")]),t._v(" "),n("el-radio-button",{attrs:{label:"top"}},[t._v("Top")])],1),t._v(" "),n("div",{staticStyle:{margin:"20px"}}),t._v(" "),n("el-form",{attrs:{"label-position":t.labelPosition,"label-width":"100px",model:t.formLabelAlign}},[n("el-form-item",{attrs:{label:"Name"}},[n("el-input",{model:{value:t.formLabelAlign.name,callback:function(e){t.$set(t.formLabelAlign,"name",e)},expression:"formLabelAlign.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-input",{model:{value:t.formLabelAlign.region,callback:function(e){t.$set(t.formLabelAlign,"region",e)},expression:"formLabelAlign.region"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form"}},[n("el-input",{model:{value:t.formLabelAlign.type,callback:function(e){t.$set(t.formLabelAlign,"type",e)},expression:"formLabelAlign.type"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{labelPosition:"right",formLabelAlign:{name:"",region:"",type:""}}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[n("el-input",{model:{value:t.ruleForm.name,callback:function(e){t.$set(t.ruleForm,"name",e)},expression:"ruleForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[n("el-select",{attrs:{placeholder:"Activity zone"},model:{value:t.ruleForm.region,callback:function(e){t.$set(t.ruleForm,"region",e)},expression:"ruleForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time",required:""}},[n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date1"}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Choisissez une date"},model:{value:t.ruleForm.date1,callback:function(e){t.$set(t.ruleForm,"date1",e)},expression:"ruleForm.date1"}})],1)],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-form-item",{attrs:{prop:"date2"}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Pick a time"},model:{value:t.ruleForm.date2,callback:function(e){t.$set(t.ruleForm,"date2",e)},expression:"ruleForm.date2"}})],1)],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[n("el-switch",{model:{value:t.ruleForm.delivery,callback:function(e){t.$set(t.ruleForm,"delivery",e)},expression:"ruleForm.delivery"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[n("el-checkbox-group",{model:{value:t.ruleForm.type,callback:function(e){t.$set(t.ruleForm,"type",e)},expression:"ruleForm.type"}},[n("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),t._v(" "),n("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[n("el-radio-group",{model:{value:t.ruleForm.resource,callback:function(e){t.$set(t.ruleForm,"resource",e)},expression:"ruleForm.resource"}},[n("el-radio",{attrs:{label:"Sponsorship"}}),t._v(" "),n("el-radio",{attrs:{label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[n("el-input",{attrs:{type:"textarea"},model:{value:t.ruleForm.desc,callback:function(e){t.$set(t.ruleForm,"desc",e)},expression:"ruleForm.desc"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Créer")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Réinitialiser")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{ruleForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},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"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:t.ruleForm,"status-icon":"",rules:t.rules,"label-width":"120px"}},[n("el-form-item",{attrs:{label:"Password",prop:"pass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm.pass,callback:function(e){t.$set(t.ruleForm,"pass",e)},expression:"ruleForm.pass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[n("el-input",{attrs:{type:"password",autocomplete:"off"},model:{value:t.ruleForm.checkPass,callback:function(e){t.$set(t.ruleForm,"checkPass",e)},expression:"ruleForm.checkPass"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Age",prop:"age"}},[n("el-input",{model:{value:t.ruleForm.age,callback:function(e){t.$set(t.ruleForm,"age",t._n(e))},expression:"ruleForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("ruleForm")}}},[t._v("Submit")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("ruleForm")}}},[t._v("Réinitialiser")])],1)],1)],1)},staticRenderFns:[]},{data:function(){var a=this;return{ruleForm:{pass:"",checkPass:"",age:""},rules:{pass:[{validator:function(e,t,n){""===t?n(new Error("Veuillez entrer le mot de passe")):(""!==a.ruleForm.checkPass&&a.$refs.ruleForm.validateField("checkPass"),n())},trigger:"blur"}],checkPass:[{validator:function(e,t,n){""===t?n(new Error("Veuillez entrer à nouveau le mot de passe")):t!==a.ruleForm.pass?n(new Error("Les deux entrées ne correspondent pas!")):n()},trigger:"blur"}],age:[{validator:function(e,t,n){if(!t)return n(new Error("Veuillez entrer l'âge"));setTimeout(function(){Number.isInteger(t)?t<18?n(new Error("L'âge doit être supérieur à 18 ans")):n():n(new Error("Veuillez entrer des chiffres"))},1e3)},trigger:"blur"}]}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo5":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:n.dynamicValidateForm,"label-width":"120px"}},[a("el-form-item",{attrs:{prop:"email",label:"Email",rules:[{required:!0,message:"Veuillez entrer l'adresse e-mail",trigger:"blur"},{type:"email",message:"Veuillez entrer une adresse e-mail valide",trigger:["blur","change"]}]}},[a("el-input",{model:{value:n.dynamicValidateForm.email,callback:function(e){n.$set(n.dynamicValidateForm,"email",e)},expression:"dynamicValidateForm.email"}})],1),n._v(" "),n._l(n.dynamicValidateForm.domains,function(t,e){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+e,prop:"domains."+e+".value",rules:{required:!0,message:"domain ne peut pas être null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(e){n.$set(t,"value",e)},expression:"domain.value"}}),a("el-button",{on:{click:function(e){e.preventDefault(),n.removeDomain(t)}}},[n._v("Supprimer")])],1)}),n._v(" "),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(e){n.submitForm("dynamicValidateForm")}}},[n._v("Soumettre")]),n._v(" "),a("el-button",{on:{click:n.addDomain}},[n._v("Nouveau domaine")]),n._v(" "),a("el-button",{on:{click:function(e){n.resetForm("dynamicValidateForm")}}},[n._v("Réinitialiser")])],1)],2)],1)},staticRenderFns:[]},{data:function(){return{dynamicValidateForm:{domains:[{key:1,value:""}],email:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()},removeDomain:function(e){var t=this.dynamicValidateForm.domains.indexOf(e);-1!==t&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:t.numberValidateForm,"label-width":"100px"}},[n("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"l'âge est requis"},{type:"number",message:"l'âge doit être un nombre"}]}},[n("el-input",{attrs:{autocomplete:"off"},model:{value:t.numberValidateForm.age,callback:function(e){t.$set(t.numberValidateForm,"age",t._n(e))},expression:"numberValidateForm.age"}})],1),t._v(" "),n("el-form-item",[n("el-button",{attrs:{type:"primary"},on:{click:function(e){t.submitForm("numberValidateForm")}}},[t._v("Soumettre")]),t._v(" "),n("el-button",{on:{click:function(e){t.resetForm("numberValidateForm")}}},[t._v("Réinitialiser")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{numberValidateForm:{age:""}}},methods:{submitForm:function(e){this.$refs[e].validate(function(e){if(!e)return console.log("error submit!!"),!1;alert("submit!")})},resetForm:function(e){this.$refs[e].resetFields()}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-form",{ref:"form",attrs:{model:t.sizeForm,"label-width":"120px",size:"mini"}},[n("el-form-item",{attrs:{label:"Activity name"}},[n("el-input",{model:{value:t.sizeForm.name,callback:function(e){t.$set(t.sizeForm,"name",e)},expression:"sizeForm.name"}})],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity zone"}},[n("el-select",{attrs:{placeholder:"veuillez sélectionner votre zone"},model:{value:t.sizeForm.region,callback:function(e){t.$set(t.sizeForm,"region",e)},expression:"sizeForm.region"}},[n("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),t._v(" "),n("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity time"}},[n("el-col",{attrs:{span:11}},[n("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Choisissez une date"},model:{value:t.sizeForm.date1,callback:function(e){t.$set(t.sizeForm,"date1",e)},expression:"sizeForm.date1"}})],1),t._v(" "),n("el-col",{staticClass:"line",attrs:{span:2}},[t._v("-")]),t._v(" "),n("el-col",{attrs:{span:11}},[n("el-time-picker",{staticStyle:{width:"100%"},attrs:{placeholder:"Choisissez une heure"},model:{value:t.sizeForm.date2,callback:function(e){t.$set(t.sizeForm,"date2",e)},expression:"sizeForm.date2"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Activity type"}},[n("el-checkbox-group",{model:{value:t.sizeForm.type,callback:function(e){t.$set(t.sizeForm,"type",e)},expression:"sizeForm.type"}},[n("el-checkbox-button",{attrs:{label:"Online activities",name:"type"}}),t._v(" "),n("el-checkbox-button",{attrs:{label:"Promotion activities",name:"type"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{label:"Resources"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.sizeForm.resource,callback:function(e){t.$set(t.sizeForm,"resource",e)},expression:"sizeForm.resource"}},[n("el-radio",{attrs:{border:"",label:"Sponsor"}}),t._v(" "),n("el-radio",{attrs:{border:"",label:"Venue"}})],1)],1),t._v(" "),n("el-form-item",{attrs:{size:"large"}},[n("el-button",{attrs:{type:"primary"},on:{click:t.onSubmit}},[t._v("Créer")]),t._v(" "),n("el-button",[t._v("Annuler")])],1)],1)],1)},staticRenderFns:[]},{data:function(){return{sizeForm:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""}}},methods:{onSubmit:function(){console.log("submit!")}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Dans chaque composant "),n("code",[e._v("form")]),e._v(", il vous faudra utiliser la balise "),n("code",[e._v("form-item")]),e._v(" pour servir de conteneur à chaque champ.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="form" label-width="120px">\n  <el-form-item label="Activity name">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="form.region" placeholder="please select your zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Choisissez une date" v-model="form.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Pick a time" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery">\n    <el-switch v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="Sponsor"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form">\n    <el-input type="textarea" v-model="form.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Créer</el-button>\n    <el-button>Annuler</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        form: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("p",[e._v("Lorsque l'espace vertical est limité et que le formulaire est relativement simple, vous pouvez le placer sur une seule ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("inline")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et le formulaire sera en une seul ligne.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="Approved by">\n    <el-input v-model="formInline.user" placeholder="Approved by"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="formInline.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="onSubmit">Query</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: \'\',\n          region: \'\'\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Suivant votre design, il y a différents moyens d'aligner vos labels.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("label-position")]),e._v(" permet de régler l'alignement, il peut être à "),n("code",[e._v("top")]),e._v(" ou "),n("code",[e._v("left")]),e._v(". Quand il est à "),n("code",[e._v("top")]),e._v(", les labels sont placés au-dessus des champs.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<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<script>\n  export default {\n    data() {\n      return {\n        labelPosition: \'right\',\n        formLabelAlign: {\n          name: \'\',\n          region: \'\',\n          type: \'\'\n        }\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),n("p",[e._v("Le composant Form vous permet d'effectuer des vérifications, afin de détecter et corriger les erreurs facilement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("rules")]),e._v(" au composant "),n("code",[e._v("Form")]),e._v(", passez les règles de validation, et configurez l'attribut "),n("code",[e._v("prop")]),e._v(" de "),n("code",[e._v("Form-Item")]),e._v(" pour ajouter la clé de la règle correspondante au champ. Plus d'informations ici:  "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">\n  <el-form-item label="Activity name" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="Activity zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="Choisissez une date" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>\n      </el-form-item>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-form-item prop="date2">\n        <el-time-picker placeholder="Pick a time" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>\n      </el-form-item>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Instant delivery" prop="delivery">\n    <el-switch v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="Activity type" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="Online activities" name="type"></el-checkbox>\n      <el-checkbox label="Promotion activities" name="type"></el-checkbox>\n      <el-checkbox label="Offline activities" name="type"></el-checkbox>\n      <el-checkbox label="Simple brand exposure" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="Sponsorship"></el-radio>\n      <el-radio label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="Activity form" prop="desc">\n    <el-input type="textarea" v-model="ruleForm.desc"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'ruleForm\')">Créer</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        ruleForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        },\n        rules: {\n          name: [\n            { required: true, message: \'Please input Activity name\', trigger: \'blur\' },\n            { min: 3, max: 5, message: \'Length should be 3 to 5\', trigger: \'blur\' }\n          ],\n          region: [\n            { required: true, message: \'Please select Activity zone\', trigger: \'change\' }\n          ],\n          date1: [\n            { type: \'date\', required: true, message: \'Please pick a date\', trigger: \'change\' }\n          ],\n          date2: [\n            { type: \'date\', required: true, message: \'Please pick a time\', trigger: \'change\' }\n          ],\n          type: [\n            { type: \'array\', required: true, message: \'Please select at least one activity type\', trigger: \'change\' }\n          ],\n          resource: [\n            { required: true, message: \'Please select activity resource\', trigger: \'change\' }\n          ],\n          desc: [\n            { required: true, message: \'Please input activity form\', trigger: \'blur\' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("p",[e._v("Cet exemple montre comment vous pouvez personnaliser vos règles de validation pour effectuer une identification à deux facteurs.")]),n("demo-block",[n("div",[n("p",[e._v("Ici, nous utilisons "),n("code",[e._v("status-icon")]),e._v(" pour afficher le résultat de la validation sous forme d'icône.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-form :model=\"ruleForm\" status-icon :rules=\"rules\" ref=\"ruleForm\" label-width=\"120px\" class=\"demo-ruleForm\">\n  <el-form-item label=\"Password\" prop=\"pass\">\n    <el-input type=\"password\" v-model=\"ruleForm.pass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Confirm\" prop=\"checkPass\">\n    <el-input type=\"password\" v-model=\"ruleForm.checkPass\" autocomplete=\"off\"></el-input>\n  </el-form-item>\n  <el-form-item label=\"Age\" prop=\"age\">\n    <el-input v-model.number=\"ruleForm.age\"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type=\"primary\" @click=\"submitForm('ruleForm')\">Submit</el-button>\n    <el-button @click=\"resetForm('ruleForm')\">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Veuillez entrer l\\'âge'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('Veuillez entrer des chiffres'));\n          } else {\n            if (value < 18) {\n              callback(new Error('L\\'âge doit être supérieur à 18 ans'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Veuillez entrer le mot de passe'));\n        } else {\n          if (this.ruleForm.checkPass !== '') {\n            this.$refs.ruleForm.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('Veuillez entrer à nouveau le mot de passe'));\n        } else if (value !== this.ruleForm.pass) {\n          callback(new Error('Les deux entrées ne correspondent pas!'));\n        } else {\n          callback();\n        }\n      };\n      return {\n        ruleForm: {\n          pass: '',\n          checkPass: '',\n          age: ''\n        },\n        rules: {\n          pass: [\n            { validator: validatePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validatePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("demo-block",[n("div",[n("p",[e._v("En plus de pouvoir passer toutes les règles de validation en une seule fois au formulaire, vous pouvez aussi ajouter ou supprimer des règles sur un seul champ de manière dynamique.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">\n  <el-form-item\n    prop="email"\n    label="Email"\n    :rules="[\n      { required: true, message: \'Veuillez entrer l\\\'adresse e-mail\', trigger: \'blur\' },\n      { type: \'email\', message: \'Veuillez entrer une adresse e-mail valide\', trigger: [\'blur\', \'change\'] }\n    ]"\n  >\n    <el-input v-model="dynamicValidateForm.email"></el-input>\n  </el-form-item>\n  <el-form-item\n    v-for="(domain, index) in dynamicValidateForm.domains"\n    :label="\'Domain\' + index"\n    :key="domain.key"\n    :prop="\'domains.\' + index + \'.value\'"\n    :rules="{\n      required: true, message: \'domain ne peut pas être null\', trigger: \'blur\'\n    }"\n  >\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Supprimer</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">Soumettre</el-button>\n    <el-button @click="addDomain">Nouveau domaine</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: \'\'\n          }],\n          email: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: \'\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("demo-block",[n("div",[n("p",[e._v("Pour valider les nombres correctement, il vous faudra ajouter le modificateur "),n("code",[e._v(".number")]),e._v(" à l'attribut "),n("code",[e._v("v-model")]),e._v(". Il est utilisé par Vuejs pour transformer les valeurs en nombres .")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item\n    label="age"\n    prop="age"\n    :rules="[\n      { required: true, message: \'l\\\'âge est requis\'},\n      { type: \'number\', message: \'l\\\'âge doit être un nombre\'}\n    ]"\n  >\n    <el-input v-model.number="numberValidateForm.age" autocomplete="off"></el-input>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'numberValidateForm\')">Soumettre</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">Réinitialiser</el-button>\n  </el-form-item>\n</el-form>\n<script>\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: \'\'\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert(\'submit!\');\n          } else {\n            console.log(\'error submit!!\');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(12),e._m(13),e._m(14),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez régler le "),n("code",[e._v("size")]),e._v(" de chaque item si vous ne souhaitez pas qu'il hérite de son parent.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">\n  <el-form-item label="Activity name">\n    <el-input v-model="sizeForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="Activity zone">\n    <el-select v-model="sizeForm.region" placeholder="veuillez sélectionner votre zone">\n      <el-option label="Zone one" value="shanghai"></el-option>\n      <el-option label="Zone two" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="Activity time">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="Choisissez une date" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>\n    </el-col>\n    <el-col class="line" :span="2">-</el-col>\n    <el-col :span="11">\n      <el-time-picker placeholder="Choisissez une heure" v-model="sizeForm.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="Activity type">\n    <el-checkbox-group v-model="sizeForm.type">\n      <el-checkbox-button label="Online activities" name="type"></el-checkbox-button>\n      <el-checkbox-button label="Promotion activities" name="type"></el-checkbox-button>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="Resources">\n    <el-radio-group v-model="sizeForm.resource" size="medium">\n      <el-radio border label="Sponsor"></el-radio>\n      <el-radio border label="Venue"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item size="large">\n    <el-button type="primary" @click="onSubmit">Créer</el-button>\n    <el-button>Annuler</el-button>\n  </el-form-item>\n</el-form>\n\n<script>\n  export default {\n    data() {\n      return {\n        sizeForm: {\n          name: \'\',\n          region: \'\',\n          date1: \'\',\n          date2: \'\',\n          delivery: false,\n          type: [],\n          resource: \'\',\n          desc: \'\'\n        }\n      };\n    },\n    methods: {\n      onSubmit() {\n        console.log(\'submit!\');\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Un formulaire est constitué des éléments "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("radio")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("checkbox")]),e._v(", etc. Il sert principalement à collecter, vérifier et soumettre des données.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-de-base"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-de-base","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire de base")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il peut contenir toutes sortes de champs tels que "),n("code",[e._v("input")]),e._v(", "),n("code",[e._v("select")]),e._v(", "),n("code",[e._v("radio")]),e._v(" et "),n("code",[e._v("checkbox")]),e._v(".")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[n("a",{attrs:{href:"https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2"}},[e._v("W3C")]),e._v(" stipule que")]),n("blockquote",[n("p",[n("i",[e._v("Lorsqu'il n'y a qu'un seul champ de type texte dans un formulaire, le navigateur devrait accepter la pression de la touche Entrée sur ce champ comme méthode de soumission du formulaire")])])]),n("p",[e._v("Pour éviter ce comportement, vous pouvez ajouter "),n("code",[e._v("@submit.native.prevent")]),e._v(" dans "),n("code",[e._v("<el-form>")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"formulaire-horizontal"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#formulaire-horizontal","aria-hidden":"true"}},[this._v("¶")]),this._v(" Formulaire horizontal")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validations-personnalisees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validations-personnalisees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validations personnalisées")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Les callback de validations personnalisées doivent être appelées. Un usage plus avancé se trouve ici: "),n("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-ou-supprimer-des-champs-dynamiquement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-ou-supprimer-des-champs-dynamiquement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter ou supprimer des champs dynamiquement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"validation-des-nombres"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#validation-des-nombres","aria-hidden":"true"}},[this._v("¶")]),this._v(" Validation des nombres")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Lorsqu'un "),n("code",[e._v("el-form-item")]),e._v(" est imbriqué dans un autre "),n("code",[e._v("el-form-item")]),e._v(", la largeur de son label sera "),n("code",[e._v("0")]),e._v(". Utilisez "),n("code",[e._v("label-width")]),e._v(" sur ce "),n("code",[e._v("el-form-item")]),e._v(" si besoin.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Tout les composants d'un formulaire héritent leur attribut "),n("code",[e._v("size")]),e._v(" de ce formulaire. Il est aussi possible de l'utiliser individuellement sur chaque FormItem.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("model")]),n("td",[e._v("Données du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inline")]),n("td",[e._v("Si le formulaire est horizontal.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label-position")]),n("td",[e._v("Position des labels. Si 'left' ou 'right', "),n("code",[e._v("label-width")]),e._v(" est aussi requis.")]),n("td",[e._v("string")]),n("td",[e._v("left / right / top")]),n("td",[e._v("right")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur des labels, tout les enfants directs hériteront de cette valeur. La largeur "),n("code",[e._v("auto")]),e._v(" est supportée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-suffix")]),n("td",[e._v("Suffixe de labels.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-required-asterisk")]),n("td",[e._v("Si les champs obligatoires doivent avoir une astérisque rouge (étoile) à coté de leurs labels.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit apparaître en ligne avec son champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status-icon")]),n("td",[e._v("Si une icône indiquant le résultat de validation doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("validate-on-rule-change")]),n("td",[e._v("Si la validation doit se déclencher lorsque "),n("code",[e._v("rules")]),e._v(" est modifié.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille des champs du formulaire.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si tout les champs du formulaire doivent être désactivés. Si "),n("code",[e._v("true")]),e._v(", il ne peut pas être modifié par l'attribut "),n("code",[e._v("disabled")]),e._v(" des enfants.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Valide le formulaire. Prends une callback en paramètre. Après la validation, la callback est exécutée avec deux paramètres: un boolean indiquant si la validation est bonne, et un objet contenant tout les champs qui ont échoués. Retourne une promesse si aucune callback n'est passée.")]),n("td",[e._v("Function(callback: Function(boolean, object))")])]),n("tr",[n("td",[e._v("validateField")]),n("td",[e._v("Valide un ou plusieurs champs du formulaire.")]),n("td",[e._v("Function(props: string | array, callback: Function(errorMessage: string))")])]),n("tr",[n("td",[e._v("resetFields")]),n("td",[e._v("Efface tout les champs et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface les messages de validation de certains champs. Le paramètre est le nom du champ ou une liste des champs concernés. S'il est omis, tout les champs seront concernés.")]),n("td",[e._v("Function(props: string | array)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evennements-de-form"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evennements-de-form","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènnements de Form")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("validate")]),n("td",[e._v("Se déclenche après la validation d'un champ.")]),n("td",[e._v("Nom du champs qui a été validé, si la validation est bonne et le message d'erreur sinon.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-formitem"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-formitem","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de FormItem")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Une des clés de "),n("code",[e._v("model")]),e._v(". Utilisés par les méthodes validate et resetFields. Requis.")]),n("td",[e._v("string")]),n("td",[e._v("Clés du model passé à "),n("code",[e._v("form")]),e._v(".")]),n("td")]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Le label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-width")]),n("td",[e._v("Largeur du label, e.g. '50px'. La largeur "),n("code",[e._v("auto")]),e._v(" est supportée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("required")]),n("td",[e._v("Si le champ est requis ou non. Si omis, sera déterminé par les règles de validation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("rules")]),n("td",[e._v("Règles de validation du formulaire.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Message d'erreur du champ. S'il est modifié, le champ l'affichera immédiatement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-message")]),n("td",[e._v("Si le message d'erreur doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inline-message")]),n("td",[e._v("Si le message d'erreur doit être en ligne avec le champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Contrôle la taille du FormItem.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu de Form Item.")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Contenu du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("error")]),n("td",[e._v("Contenu personnalisé pour les messages de validation. Le paramètre du scope est { error }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-form-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-form-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Form-Item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("resetField")]),n("td",[e._v("Efface le champ et les résultats de validation.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearValidate")]),n("td",[e._v("Efface le status de validation du champ.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},768:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("i",{staticClass:"el-icon-edit"}),e._v(" "),n("i",{staticClass:"el-icon-share"}),e._v(" "),n("i",{staticClass:"el-icon-delete"}),e._v(" "),n("el-button",{attrs:{type:"primary",icon:"el-icon-search"}},[e._v("Chercher")])],1)},staticRenderFns:[]},{})}},l=n(0),r=Object(l.a)(a,function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"content element-doc"},[t._m(0),n("p",[t._v("Element fournit un ensemble d'icônes basiques.")]),t._m(1),t._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[t._v('<i class="el-icon-edit"></i>\n<i class="el-icon-share"></i>\n<i class="el-icon-delete"></i>\n<el-button type="primary" icon="el-icon-search">Chercher</el-button>\n\n')])])])],2),t._m(3),n("ul",{staticClass:"icon-list"},t._l(t.$icon,function(e){return n("li",{key:e},[n("span",[n("i",{class:"el-icon-"+e}),n("span",{staticClass:"icon-name"},[t._v(t._s("el-icon-"+e))])])])}),0)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Il vous suffit d'assigner le nom de classe "),n("code",[e._v("el-icon-iconName")]),e._v(" à une balise "),n("code",[e._v("<i>")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icones-2"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icones-2","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icônes")])}],!1,null,null,null);t.default=r.exports},769:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-image"},t._l(t.fits,function(e){return n("div",{key:e,staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v(t._s(e))]),t._v(" "),n("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:t.url,fit:e}})],1)}),0)])},staticRenderFns:[]},{data:function(){return{fits:["fill","contain","cover","none","scale-down"],url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"demo-image__placeholder"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Défaut")]),e._v(" "),n("el-image",{attrs:{src:e.src}})],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Personnalisé")]),e._v(" "),n("el-image",{attrs:{src:e.src}},[n("div",{staticClass:"image-slot",attrs:{slot:"placeholder"},slot:"placeholder"},[e._v("\n        Chargement"),n("span",{staticClass:"dot"},[e._v("...")])])])],1)])])},staticRenderFns:[]},{data:function(){return{src:"https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"demo-image__error"},[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Défaut")]),e._v(" "),n("el-image")],1),e._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[e._v("Personnalisé")]),e._v(" "),n("el-image",[n("div",{staticClass:"image-slot",attrs:{slot:"error"},slot:"error"},[n("i",{staticClass:"el-icon-picture-outline"})])])],1)])])},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"demo-image__lazy"},this._l(this.urls,function(e){return t("el-image",{key:e,attrs:{src:e,lazy:""}})}),1)])},staticRenderFns:[]},{data:function(){return{urls:["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg","https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg","https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg","https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg","https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg","https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg","https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg"]}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"demo-image__preview"},[t("el-image",{staticStyle:{width:"100px",height:"100px"},attrs:{src:this.url,"preview-src-list":this.srcList}})],1)])},staticRenderFns:[]},{data:function(){return{url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",srcList:["https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg","https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"]}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("En plus des propriétés natives de img, ce composant supporte le lazy loading, les placeholder personnalisés, les échecs de téléchargement, etc.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur grâce à "),n("code",[e._v("fit")]),e._v(", identique au "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")]),e._v(" natif.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image">\n  <div class="block" v-for="fit in fits" :key="fit">\n    <span class="demonstration">{{ fit }}</span>\n    <el-image\n      style="width: 100px; height: 100px"\n      :src="url"\n      :fit="fit"></el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        fits: [\'fill\', \'contain\', \'cover\', \'none\', \'scale-down\'],\n        url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Placeholder personnalisé qui s'affiche lorsque l'image n'est pas encore chargée, grâce à "),n("code",[e._v("slot = placeholder")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__placeholder">\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-image :src="src"></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">Personnalisé</span>\n    <el-image :src="src">\n      <div slot="placeholder" class="image-slot">\n        Chargement<span class="dot">...</span>\n      </div>\n    </el-image>\n  </div>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        src: \'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Contenu personnalisé qui s'affiche lorsque le chargement a échoué, grâce à "),n("code",[e._v("slot = error")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__error">\n  <div class="block">\n    <span class="demonstration">Défaut</span>\n    <el-image></el-image>\n  </div>\n  <div class="block">\n    <span class="demonstration">Personnalisé</span>\n    <el-image>\n      <div slot="error" class="image-slot">\n        <i class="el-icon-picture-outline"></i>\n      </div>\n    </el-image>\n  </div>\n</div>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Utilisez le lazy loading avec "),n("code",[e._v("lazy = true")]),e._v(". Les images ne se chargeront que lorsque le scrolling les atteindra. Vous pouvez indiquer le conteneur grâce à "),n("code",[e._v("scroll-container")]),e._v(". Si undefined, ce sera le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"demo-image__lazy\">\n  <el-image v-for=\"url in urls\" :key=\"url\" :src=\"url\" lazy></el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        urls: [\n          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',\n          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',\n          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',\n          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',\n          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',\n          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'\n        ]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("allow big image preview by setting "),n("code",[e._v("previewSrcList")]),e._v(" prop.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-image__preview">\n  <el-image \n    style="width: 100px; height: 100px"\n    :src="url" \n    :preview-src-list="srcList">\n  </el-image>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        url: \'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg\',\n        srcList: [\n          \'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg\',\n          \'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg\'\n        ]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"image"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image","aria-hidden":"true"}},[this._v("¶")]),this._v(" Image")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"placeholder"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#placeholder","aria-hidden":"true"}},[this._v("¶")]),this._v(" Placeholder")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"echec-du-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#echec-du-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Échec du chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lazy-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lazy-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lazy Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"image-preview"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#image-preview","aria-hidden":"true"}},[this._v("¶")]),this._v(" Image Preview")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("src")]),n("td",[e._v("Source de l'image, identique au natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"}},[e._v("object-fit")])]),n("td",[e._v("string")]),n("td",[e._v("fill / contain / cover / none / scale-down")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("alt")]),n("td",[e._v("Attribut alt natif.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("referrer-policy")]),n("td",[e._v("Attribut referrerPolicy natif.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si le lazy loading doit être utilisé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("scroll-container")]),n("td",[e._v("Le conteneur auquel ajouter le listener du scroll en mode lazy loading.")]),n("td",[e._v("string / HTMLElement")]),n("td",[e._v("—")]),n("td",[e._v("Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll.")])]),n("tr",[n("td",[e._v("preview-src-list")]),n("td",[e._v("allow big image preview")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("z-index")]),n("td",[e._v("set image preview z-index")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("2000")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("load")]),n("td",[e._v("Identique au load natif.")]),n("td",[e._v("(e: Event)")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Identique au error natif.")]),n("td",[e._v("(e: Error)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Se déclenche quand l'image charge.")])]),n("tr",[n("td",[e._v("error")]),n("td",[e._v("Se déclenche quand le chargement de l'image a échoué.")])])])])}],!1,null,null,null);t.default=i.exports},770:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.load,expression:"load"}],staticClass:"infinite-list",staticStyle:{overflow:"auto"}},t._l(t.count,function(e){return n("li",{staticClass:"infinite-list-item"},[t._v(t._s(e))])}),0)]],2)},staticRenderFns:[]},{data:function(){return{count:0}},methods:{load:function(){this.count+=2}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"infinite-list-wrapper",staticStyle:{overflow:"auto"}},[n("ul",{directives:[{name:"infinite-scroll",rawName:"v-infinite-scroll",value:t.load,expression:"load"}],staticClass:"list",attrs:{"infinite-scroll-disabled":"disabled"}},t._l(t.count,function(e){return n("li",{staticClass:"list-item"},[t._v(t._s(e))])}),0),t._v(" "),t.loading?n("p",[t._v("Loading...")]):t._e(),t._v(" "),t.noMore?n("p",[t._v("Pas plus")]):t._e()])]],2)},staticRenderFns:[]},{data:function(){return{count:10,loading:!1}},computed:{noMore:function(){return 20<=this.count},disabled:function(){return this.loading||this.noMore}},methods:{load:function(){var e=this;this.loading=!0,setTimeout(function(){e.count+=2,e.loading=!1},2e3)}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Charge plus de données quand le bas de la page est atteint")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">\n    <li v-for="i in count" class="infinite-list-item">{{ i }}</li>\n  </ul>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 0\n      }\n    },\n    methods: {\n      load () {\n        this.count += 2\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="infinite-list-wrapper" style="overflow:auto">\n    <ul\n      class="list"\n      v-infinite-scroll="load"\n      infinite-scroll-disabled="disabled">\n      <li v-for="i in count" class="list-item">{{ i }}</li>\n    </ul>\n    <p v-if="loading">Loading...</p>\n    <p v-if="noMore">Pas plus</p>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        count: 10,\n        loading: false\n      }\n    },\n    computed: {\n      noMore () {\n        return this.count >= 20\n      },\n      disabled () {\n        return this.loading || this.noMore\n      }\n    },\n    methods: {\n      load () {\n        this.loading = true\n        setTimeout(() => {\n          this.count += 2\n          this.loading = false\n        }, 2000)\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"infinitescroll"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#infinitescroll","aria-hidden":"true"}},[this._v("¶")]),this._v(" InfiniteScroll")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utilisation-de-base"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utilisation-de-base","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utilisation de base")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Ajoutez "),n("code",[e._v("v-infinite-scroll")]),e._v(" à la liste pour exécuter automatiquement la méthode de chargement lors du défilement vers le bas.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactiver-le-chargement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactiver-le-chargement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactiver le chargement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeur acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("infinite-scroll-disabled")]),n("td",[e._v("Est désactivé")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("infinite-scroll-delay")]),n("td",[e._v("Throttle le delais (ms)")]),n("td",[e._v("number")]),n("td",[e._v("-")]),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("infinite-scroll-distance")]),n("td",[e._v("Distance de déclenchement (px)")]),n("td",[e._v("number")]),n("td",[e._v("-")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("infinite-scroll-immediate")]),n("td",[e._v("S'il faut exécuter la méthode de chargement immédiatement, au cas où le contenu ne pourrait pas être set à l'état initial.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])}],!1,null,null,null);t.default=i.exports},771:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{min:1,max:10},on:{change:t.handleChange},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{disabled:!0},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:5}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{step:2,"step-strictly":""},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:2}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{precision:2,step:.1,max:10},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{model:{value:t.num1,callback:function(e){t.num1=e},expression:"num1"}}),t._v(" "),n("el-input-number",{attrs:{size:"medium"},model:{value:t.num2,callback:function(e){t.num2=e},expression:"num2"}}),t._v(" "),n("el-input-number",{attrs:{size:"small"},model:{value:t.num3,callback:function(e){t.num3=e},expression:"num3"}}),t._v(" "),n("el-input-number",{attrs:{size:"mini"},model:{value:t.num4,callback:function(e){t.num4=e},expression:"num4"}})]],2)},staticRenderFns:[]},{data:function(){return{num1:1,num2:1,num3:1,num4:1}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-input-number",{attrs:{"controls-position":"right",min:1,max:10},on:{change:t.handleChange},model:{value:t.num,callback:function(e){t.num=e},expression:"num"}})]],2)},staticRenderFns:[]},{data:function(){return{num:1}},methods:{handleChange:function(e){console.log(e)}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un champ d'input de valeurs numériques, avec un domaine personnalisable.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez une variable à "),n("code",[e._v("v-model")]),e._v(" dans l'élément "),n("code",[e._v("<el-input-number>")]),e._v(" et c'est tout !")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("disabled")]),e._v(" accepte un "),n("code",[e._v("boolean")]),e._v(" et si la valeur est "),n("code",[e._v("true")]),e._v(", le composant sera désactivé. Si vous souhaitez juste contrôler le domaine des valeurs possibles, ajoutez l'attribut "),n("code",[e._v("min")]),e._v(" pour régler la valeur minimale et "),n("code",[e._v("max")]),e._v(" pour la valeur maximale. Par défaut, la valeur minimale est "),n("code",[e._v("0")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :disabled="true"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez déterminer un pas pour le champs.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("step")]),e._v(" pour configurer le pas.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :step="2"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 5\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("step-strictly")]),e._v(" accepte un "),n("code",[e._v("boolean")]),e._v(". Si cet attribut est "),n("code",[e._v("true")]),e._v(", la valeur de l'input ne peut être qu'un multiple de "),n("code",[e._v("step")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :step="2" step-strictly></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 2\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("precision")]),e._v(" pour régler la précision du champs.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" :precision="2" :step="0.1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num1"></el-input-number>\n    <el-input-number size="medium" v-model="num2"></el-input-number>\n    <el-input-number size="small" v-model="num3"></el-input-number>\n    <el-input-number size="mini" v-model="num4"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num1: 1,\n        num2: 1,\n        num3: 1,\n        num4: 1\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(9),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("controls-position")]),e._v(" pour déterminer la position des boutons.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        num: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"inputnumber"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[this._v("¶")]),this._v(" InputNumber")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pas"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pas","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pas")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pas-strict"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pas-strict","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pas strict")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"precision"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#precision","aria-hidden":"true"}},[this._v("¶")]),this._v(" Précision")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("La valeur de "),n("code",[e._v("precision")]),e._v(" doit être un integer non négatif et ne doit pas être inférieure aux décimales de "),n("code",[e._v("step")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("size")]),e._v(" pour régler la taille avec "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-controles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-controles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des contrôles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("La valeur minimale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("-Infinity")])])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("La valeur maximale autorisée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[n("code",[e._v("Infinity")])])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Le pas pour l'incrémentation.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("step-strictly")]),n("td",[e._v("Si la valeur ne peut être qu'un multiple du pas.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("precision")]),n("td",[e._v("La précision de la valeur.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du composant.")]),n("td",[e._v("string")]),n("td",[e._v("large/small")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("controls")]),n("td",[e._v("Si les boutons sont visibles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("controls-position")]),n("td",[e._v("Position des boutons.")]),n("td",[e._v("string")]),n("td",[e._v("right")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("currentValue, oldValue")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le champ a le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le composant.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte dans le champ.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},772:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",disabled:!0},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose",clearable:""},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Entrez votre mot de passe","show-password":""},model:{value:t.input,callback:function(e){t.input=e},expression:"input"}})],1)},staticRenderFns:[]},{data:function(){return{input:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les attributs")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date","suffix-icon":"el-icon-date"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte","prefix-icon":"el-icon-search"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}})],1),t._v(" "),n("div",{staticClass:"demo-input-suffix"},[n("span",{staticClass:"demo-input-label"},[t._v("Avec les slots")]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez une date"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("i",{staticClass:"el-input__icon el-icon-date",attrs:{slot:"suffix"},slot:"suffix"})]),t._v(" "),n("el-input",{attrs:{placeholder:"Entrez du texte"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}},[n("i",{staticClass:"el-input__icon el-icon-search",attrs:{slot:"prefix"},slot:"prefix"})])],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Entrez quelque chose"},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{textarea:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Entrez quelque chose"},model:{value:t.textarea1,callback:function(e){t.textarea1=e},expression:"textarea1"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Entrez quelque chose"},model:{value:t.textarea2,callback:function(e){t.textarea2=e},expression:"textarea2"}})],1)},staticRenderFns:[]},{data:function(){return{textarea1:"",textarea2:""}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}},[n("template",{slot:"prepend"},[t._v("Http://")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}},[n("template",{slot:"append"},[t._v(".com")])],2)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"15px"}},[n("el-input",{staticClass:"input-with-select",attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}},[n("el-select",{attrs:{slot:"prepend",placeholder:"Choisir"},slot:"prepend",model:{value:t.select,callback:function(e){t.select=e},expression:"select"}},[n("el-option",{attrs:{label:"Restaurant",value:"1"}}),t._v(" "),n("el-option",{attrs:{label:"Num. Commande",value:"2"}}),t._v(" "),n("el-option",{attrs:{label:"Tel",value:"3"}})],1),t._v(" "),n("el-button",{attrs:{slot:"append",icon:"el-icon-search"},slot:"append"})],1)],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",select:""}}}),"element-demo8":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"demo-input-size"},[n("el-input",{attrs:{placeholder:"Entrez quelque chose"},model:{value:t.input1,callback:function(e){t.input1=e},expression:"input1"}}),t._v(" "),n("el-input",{attrs:{size:"medium",placeholder:"Entrez quelque chose"},model:{value:t.input2,callback:function(e){t.input2=e},expression:"input2"}}),t._v(" "),n("el-input",{attrs:{size:"small",placeholder:"Entrez quelque chose"},model:{value:t.input3,callback:function(e){t.input3=e},expression:"input3"}}),t._v(" "),n("el-input",{attrs:{size:"mini",placeholder:"Entrez quelque chose"},model:{value:t.input4,callback:function(e){t.input4=e},expression:"input4"}})],1)])},staticRenderFns:[]},{data:function(){return{input1:"",input2:"",input3:"",input4:""}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-row",{staticClass:"demo-autocomplete"},[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions au focus")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state1,callback:function(e){t.state1=e},expression:"state1"}})],1),t._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"sub-title"},[t._v("Liste des suggestions à l'écriture")]),t._v(" "),n("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":t.querySearch,placeholder:"Entrez quelque chose","trigger-on-focus":!1},on:{select:t.handleSelect},model:{value:t.state2,callback:function(e){t.state2=e},expression:"state2"}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{links:[],state1:"",state2:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo10":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":n.querySearch,placeholder:"Entrez quelque chose"},on:{select:n.handleSelect},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.item;return[a("div",{staticClass:"value"},[n._v(n._s(t.value))]),n._v(" "),a("span",{staticClass:"link"},[n._v(n._s(t.link))])]}}]),model:{value:n.state,callback:function(e){n.state=e},expression:"state"}},[a("i",{staticClass:"el-icon-edit el-input__icon",attrs:{slot:"suffix"},on:{click:n.handleIconClick},slot:"suffix"})])],1)},staticRenderFns:[]},{data:function(){return{links:[],state:""}},methods:{querySearch:function(e,t){var n=this.links;t(e?n.filter(this.createFilter(e)):n)},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},handleSelect:function(e){console.log(e)},handleIconClick:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo11":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-autocomplete",{attrs:{"fetch-suggestions":t.querySearchAsync,placeholder:"Entrez quelque chose"},on:{select:t.handleSelect},model:{value:t.state,callback:function(e){t.state=e},expression:"state"}})],1)},staticRenderFns:[]},{data:function(){return{links:[],state:"",timeout:null}},methods:{loadAll:function(){return[{value:"vue",link:"https://github.com/vuejs/vue"},{value:"element",link:"https://github.com/ElemeFE/element"},{value:"cooking",link:"https://github.com/ElemeFE/cooking"},{value:"mint-ui",link:"https://github.com/ElemeFE/mint-ui"},{value:"vuex",link:"https://github.com/vuejs/vuex"},{value:"vue-router",link:"https://github.com/vuejs/vue-router"},{value:"babel",link:"https://github.com/babel/babel"}]},querySearchAsync:function(e,t){var n=this.links,a=e?n.filter(this.createFilter(e)):n;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(a)},3e3*Math.random())},createFilter:function(t){return function(e){return 0===e.value.toLowerCase().indexOf(t.toLowerCase())}},handleSelect:function(e){console.log(e)}},mounted:function(){this.links=this.loadAll()}}),"element-demo12":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{type:"text",placeholder:"Please input",maxlength:"10","show-word-limit":""},model:{value:t.text,callback:function(e){t.text=e},expression:"text"}}),t._v(" "),n("div",{staticStyle:{margin:"20px 0"}}),t._v(" "),n("el-input",{attrs:{type:"textarea",placeholder:"Please input",maxlength:"30","show-word-limit":""},model:{value:t.textarea,callback:function(e){t.textarea=e},expression:"textarea"}})],1)},staticRenderFns:[]},{data:function(){return{text:"",textarea:""}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Le champ d'input de base.")]),e._m(1),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez quelque chose" v-model="input"></el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Désactivez l'input avec l'attribut "),n("code",[e._v("disabled")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input"\n  :disabled="true">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Rendez l'input effaçable avec l'attribut "),n("code",[e._v("clearable")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  placeholder="Entrez quelque chose"\n  v-model="input"\n  clearable>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      input: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Créez un champ de mot de passe avec icône de visualisation grâce à l'attribut "),n("code",[e._v("show-password")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input placeholder="Entrez votre mot de passe" v-model="input" show-password></el-input>\n\n<script>\n  export default {\n    data() {\n      return {\n        input: \'\'\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Ajoutez une icône pour indiquer le type d'input.")]),n("demo-block",[n("div",[n("p",[e._v("Pour ajouter une icône, vous pouvez utiliser les attributs "),n("code",[e._v("prefix-icon")]),e._v(" et "),n("code",[e._v("suffix-icon")]),e._v(". De plus, les slots nommés "),n("code",[e._v("prefix")]),e._v(" et "),n("code",[e._v("suffix")]),e._v(" fonctionnent aussi.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les attributs</span>\n  <el-input\n    placeholder="Entrez une date"\n    suffix-icon="el-icon-date"\n    v-model="input1">\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    prefix-icon="el-icon-search"\n    v-model="input2">\n  </el-input>\n</div>\n<div class="demo-input-suffix">\n  <span class="demo-input-label">Avec les slots</span>\n  <el-input\n    placeholder="Entrez une date"\n    v-model="input3">\n    <i slot="suffix" class="el-input__icon el-icon-date"></i>\n  </el-input>\n  <el-input\n    placeholder="Entrez du texte"\n    v-model="input4">\n    <i slot="prefix" class="el-input__icon el-icon-search"></i>\n  </el-input>\n</div>\n\n<style>\n  .demo-input-label {\n    display: inline-block;\n    width: 130px;\n  }\n</style>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\',\n      input2: \'\',\n      input3: \'\',\n      input4: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Réglez la hauteur grâce à la propriété "),n("code",[e._v("rows")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  :rows="2"\n  placeholder="Entrez quelque chose"\n  v-model="textarea">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="textarea"\n  autosize\n  placeholder="Entrez quelque chose"\n  v-model="textarea1">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  :autosize="{ minRows: 2, maxRows: 4}"\n  placeholder="Entrez quelque chose"\n  v-model="textarea2">\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      textarea1: \'\',\n      textarea2: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Ajouter un élément avant ou après l'input, généralement du texte ou un bouton.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("slot")]),e._v(" pour ajouter des éléments avant ou après l'input.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-input placeholder="Entrez quelque chose" v-model="input1">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input2">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="Entrez quelque chose" v-model="input3" class="input-with-select">\n    <el-select v-model="select" slot="prepend" placeholder="Choisir">\n      <el-option label="Restaurant" value="1"></el-option>\n      <el-option label="Num. Commande" value="2"></el-option>\n      <el-option label="Tel" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="el-icon-search"></el-button>\n  </el-input>\n</div>\n\n<style>\n  .el-select .el-input {\n    width: 110px;\n  }\n  .input-with-select .el-input-group__prepend {\n    background-color: #fff;\n  }\n</style>\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\',\n      input2: \'\',\n      input3: \'\',\n      select: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(12),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("size")]),e._v(" pour changer la taille de l'input. En plus de la taille par défaut, il y a trois autres options: "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" et "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="demo-input-size">\n  <el-input\n    placeholder="Entrez quelque chose"\n    v-model="input1">\n  </el-input>\n  <el-input\n    size="medium"\n    placeholder="Entrez quelque chose"\n    v-model="input2">\n  </el-input>\n  <el-input\n    size="small"\n    placeholder="Entrez quelque chose"\n    v-model="input3">\n  </el-input>\n  <el-input\n    size="mini"\n    placeholder="Entrez quelque chose"\n    v-model="input4">\n  </el-input>\n</div>\n\n<script>\nexport default {\n  data() {\n    return {\n      input1: \'\',\n      input2: \'\',\n      input3: \'\',\n      input4: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(13),n("p",[e._v("Vous pouvez obtenir de l'aide ou des suggestions basées sur ce que vous entrez.")]),n("demo-block",[n("div",[n("p",[e._v("Le composant d'autocomplétion fournit des suggestions d'entrées. L'attribut "),n("code",[e._v("fetch-suggestions")]),e._v(" est une méthode qui retourne les suggestions. Dans cet exemple, "),n("code",[e._v("querySearch(queryString, cb)")]),e._v(" renvoie des suggestions à l'autocomplétion via "),n("code",[e._v("cb(data)")]),e._v(" quand elles sont prêtes.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions au focus</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state1"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">Liste des suggestions à l\'écriture</div>\n    <el-autocomplete\n      class="inline-input"\n      v-model="state2"\n      :fetch-suggestions="querySearch"\n      placeholder="Entrez quelque chose"\n      :trigger-on-focus="false"\n      @select="handleSelect"\n    ></el-autocomplete>\n  </el-col>\n</el-row>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestions\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(14),n("p",[e._v("Vous pouvez personnaliser la manière dont les suggestions sont affichées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("scoped slot")]),e._v(" pour personnaliser les différentes suggestions. Dans le scope, vous pouvez accéder à l'objet suggestion via la clé "),n("code",[e._v("item")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo10")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  popper-class="my-autocomplete"\n  v-model="state"\n  :fetch-suggestions="querySearch"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect">\n  <i\n    class="el-icon-edit el-input__icon"\n    slot="suffix"\n    @click="handleIconClick">\n  </i>\n  <template slot-scope="{ item }">\n    <div class="value">{{ item.value }}</div>\n    <span class="link">{{ item.link }}</span>\n  </template>\n</el-autocomplete>\n\n<style>\n  .my-autocomplete {\n    li {\n      line-height: normal;\n      padding: 7px;\n\n      .value {\n        text-overflow: ellipsis;\n        overflow: hidden;\n      }\n      .link {\n        font-size: 12px;\n        color: #b4b4b4;\n      }\n    }\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n        // call callback function to return suggestion objects\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez aller chercher des infos de suggestions sur un serveur distant.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo11")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-autocomplete\n  v-model="state"\n  :fetch-suggestions="querySearchAsync"\n  placeholder="Entrez quelque chose"\n  @select="handleSelect"\n></el-autocomplete>\n<script>\n  export default {\n    data() {\n      return {\n        links: [],\n        state: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "vue", "link": "https://github.com/vuejs/vue" },\n          { "value": "element", "link": "https://github.com/ElemeFE/element" },\n          { "value": "cooking", "link": "https://github.com/ElemeFE/cooking" },\n          { "value": "mint-ui", "link": "https://github.com/ElemeFE/mint-ui" },\n          { "value": "vuex", "link": "https://github.com/vuejs/vuex" },\n          { "value": "vue-router", "link": "https://github.com/vuejs/vue-router" },\n          { "value": "babel", "link": "https://github.com/babel/babel" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        var links = this.links;\n        var results = queryString ? links.filter(this.createFilter(queryString)) : links;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n<\/script>\n')])])])],2),e._m(16),n("demo-block",[n("div",[n("p",[n("code",[e._v("maxlength")]),e._v(" et "),n("code",[e._v("minlength")]),e._v(" sont des attributs natifs, indiquant la taille limite de l'input. Le nombre de caractères est mesuré par la taille de la chaine Javascript. Si vous utilisez "),n("code",[e._v("maxlength")]),e._v(", vous pourrez montrer le nombre de caractères en mettant "),n("code",[e._v("show-word-limit")]),e._v(" à "),n("code",[e._v("true")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo12")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-input\n  type="text"\n  placeholder="Please input"\n  v-model="text"\n  maxlength="10"\n  show-word-limit\n>\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input\n  type="textarea"\n  placeholder="Please input"\n  v-model="textarea"\n  maxlength="30"\n  show-word-limit\n>\n</el-input>\n\n<script>\nexport default {\n  data() {\n    return {\n      text: \'\',\n      textarea: \'\'\n    }\n  }\n}\n<\/script>\n')])])])],2),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33),e._m(34)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Input est un composant contrôlé, il "),n("strong",[e._v("affiche toujours la valeur liée de Vue")]),e._v(".")]),n("p",[e._v("En règle générale, l'évènement "),n("code",[e._v("input")]),e._v(" devrait être géré. Son handler devrait mettre à jour la valeur du composant (ou utilisez "),n("code",[e._v("v-model")]),e._v("). Dans le cas contraire, la valeur du champ ne sera pas modifiée.")]),n("p",[e._v("Les modificateurs de "),n("code",[e._v("v-model")]),e._v(" ne sont pas supportés.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effaçable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"champ-de-mot-de-passe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#champ-de-mot-de-passe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Champ de mot de passe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Une zone de texte de taille réglable à la souris pour écrire plusieurs lignes. Ajoutez l'attribut "),n("code",[e._v('type="textarea"')]),e._v(" pour changer "),n("code",[e._v("input")]),e._v(" en un "),n("code",[e._v("textarea")]),e._v(" natif.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zone-de-texte-avec-taille-automatique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zone-de-texte-avec-taille-automatique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zone de texte avec taille automatique")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Configurer la propriété "),n("code",[e._v("autosize")]),e._v(" pour une zone de texte permet de rendre la hauteur automatique en fonction de la taille du texte. Un objet options pour être fournit à "),n("code",[e._v("autosize")]),e._v(" les nombres minimal et maximal de lignes.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"input-mixte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#input-mixte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Input mixte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-distante"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-distante","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche distante")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"taille-limite"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#taille-limite","aria-hidden":"true"}},[this._v("¶")]),this._v(" Taille limite")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("text, textarea et autres "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types"}},[e._v("types d'input natifs")])]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("maxlength")]),n("td",[e._v("Identique à "),n("code",[e._v("maxlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("minlength")]),n("td",[e._v("Identique à "),n("code",[e._v("minlength")]),e._v(" dans l'input natif.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-word-limit")]),n("td",[e._v("Affiche le nombre de caractères restant， ne marche que lorsque "),n("code",[e._v("type")]),e._v(" est 'text' ou 'textarea'.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder de l' Input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si le bouton de reset apparaît.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-password")]),n("td",[e._v("Si le champ doit un champ de mot de passe avec bouton de visualisation.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le champ est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ, marche quand "),n("code",[e._v("type")]),e._v(" n'est pas 'textarea'.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("Nombre de ligne pour une zone de texte, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("autosize")]),n("td",[e._v("Si la zone de texte à une hauteur adaptative, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'textarea'. Peut accepter un objet, e.g. { minRows: 2, maxRows: 6 }")]),n("td",[e._v("boolean / object")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("Identique à "),n("code",[e._v("autocomplete")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("on / off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("on/off")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Identique à "),n("code",[e._v("readonly")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Identique à "),n("code",[e._v("max")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Identique à "),n("code",[e._v("min")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Identique à "),n("code",[e._v("step")]),e._v(" dans l'input natif.")]),n("td",[e._v("—")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("resize")]),n("td",[e._v("Contrôle les changements de taille autorisés.")]),n("td",[e._v("string")]),n("td",[e._v("none, both, horizontal, vertical")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autofocus")]),n("td",[e._v("Identique à "),n("code",[e._v("autofocus")]),e._v(" dans l'input natif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("form")]),n("td",[e._v("Identique à "),n("code",[e._v("form")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[e._v("tabindex de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après l'Input, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'text'.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand Input perds le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand Input a le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("(value: string \\ number)")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Déclenché uniquement lorsque la zone de saisie perd le focus ou que l'utilisateur appuie sur Entrée.")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("input")]),n("td",[e._v("Déclenché lorsque la valeur d'entrée change.")]),n("td",[e._v("(value: string | number)")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé par le bouton de reset.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'Input")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Met le focus sur le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Retire le focus de le champ.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select")]),n("td",[e._v("Sélectionne le texte du champ.")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit apparaître.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'autocomplétion est déactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Nom de la clé de l'objet suggestion pour l'affichage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Nom de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value")]),n("td",[e._v("Variable liée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai d'attente après écriture, en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("top / top-start / top-end / bottom / bottom-start / bottom-end")]),n("td",[e._v("bottom-start")])]),n("tr",[n("td",[e._v("fetch-suggestions")]),n("td",[e._v("La méthode pour rechercher les suggestions. Lorsqu'elles sont prêtes, appelle "),n("code",[e._v("callback(data:[])")]),e._v(" pour les renvoyer à l'autocomplétion.")]),n("td",[e._v("Function(queryString, callback)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Nom de classe pour le menu de l'autocomplétion.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("trigger-on-focus")]),n("td",[e._v("Si les suggestions doivent apparaître quand l'input a le focus.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identique à "),n("code",[e._v("name")]),e._v(" dans l'input natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-when-unmatched")]),n("td",[e._v("Si un évènement "),n("code",[e._v("select")]),e._v(" doit être émis après pression sur entrée quand il n'y a pas de résultats.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Texte du label.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("suffix-icon")]),n("td",[e._v("Classe de l'iĉone de suffixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-loading")]),n("td",[e._v("Si l'icône de chargement doit être cachée dans le cas d'une recherche distante.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu doit être ajouter au body. Si le positionnement du menu est incorrect, essayez de mettre cette propriété à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-first-item")]),n("td",[e._v("Si la première suggestion de la liste issue de la recherche distante doit être en surbrillance par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe.")])]),n("tr",[n("td",[e._v("suffix")]),n("td",[e._v("Contenu du suffixe.")])]),n("tr",[n("td",[e._v("prepend")]),n("td",[e._v("Contenu à ajouter avant le champ.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Contenu à ajouter après le champ.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise-pour-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise-pour-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé pour l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les suggestions. Le paramètre de scope est { item }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de l'autocomplétion")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand une suggestion est cliquée.")]),n("td",[e._v("La suggestion sélectionnée.")])]),n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("(value: string \\ number)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-l-autocompletion"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-l-autocompletion","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de l'autocomplétion")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Met le focus sur l'élément.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);t.default=i.exports},773:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",[n("el-col",{attrs:{span:24}},[n("div",{staticClass:"grid-content bg-purple-dark"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:12}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1),e._v(" "),n("el-row",[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:8}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{attrs:{gutter:20}},[n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:16}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:4}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{span:6,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1),this._v(" "),t("el-row",{attrs:{gutter:20}},[t("el-col",{attrs:{span:12,offset:6}},[t("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1),e._v(" "),n("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple-light"})]),e._v(" "),n("el-col",{attrs:{span:6}},[n("div",{staticClass:"grid-content bg-purple"})])],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",{attrs:{gutter:10}},[t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple-light"})]),this._v(" "),t("el-col",{attrs:{xs:4,sm:6,md:8,lg:9,xl:11}},[t("div",{staticClass:"grid-content bg-purple"})]),this._v(" "),t("el-col",{attrs:{xs:8,sm:6,md:4,lg:3,xl:1}},[t("div",{staticClass:"grid-content bg-purple-light"})])],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Vous pouvez créer une mise en page facilement et rapidement grâce à une base de 24 colonnes.")]),e._m(1),n("p",[e._v("Créez une grille de mise en page basique grâce aux colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Grâce à "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("col")]),e._v(", vous pouvez arranger la mise en page en utilisant l'attribut "),n("code",[e._v("span")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n<el-row>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(2),n("p",[e._v("L'espacement entre colonnes est configurable.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("gutter")]),e._v(" dans el-row pour spécifier l'espacement entre colonnes. La valeur par défaut est 0.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez former une mise en page complexe en combinant les systèmes de colonnes 1 / 24 comme vous le souhaitez.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez spécifier un décalage pour les colonnes.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser l'attribut "),n("code",[e._v("offset")]),e._v(" pour régler le décalage.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="20">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row :gutter="20">\n  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(5),n("p",[e._v("Utilisez la mise en page flex pour rendre l'alignement des colonnes flexible.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez activer la mise en page flex en réglant l'attribut "),n("code",[e._v("type")]),e._v(" à 'flex', puis en configurant la disposition des éléments enfants avec l'attribut "),n("code",[e._v("justify")]),e._v(" définit à 'start', 'center', 'end', 'space-between' ou 'space-around'.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row type="flex" class="row-bg">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="center">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="end">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-between">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n<el-row type="flex" class="row-bg" justify="space-around">\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>\n</el-row>\n\n<style>\n  .el-row {\n    margin-bottom: 20px;\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n  .row-bg {\n    padding: 10px 0;\n    background-color: #f9fafc;\n  }\n</style>\n')])])])],2),e._m(6),n("p",[e._v("Se basant sur le design responsive de Bootstrap, il existe cinq breakpoints déjà définit: xs, sm, md, lg and xl.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row :gutter="10">\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>\n  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>\n  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>\n</el-row>\n\n<style>\n  .el-col {\n    border-radius: 4px;\n  }\n  .bg-purple-dark {\n    background: #99a9bf;\n  }\n  .bg-purple {\n    background: #d3dce6;\n  }\n  .bg-purple-light {\n    background: #e5e9f2;\n  }\n  .grid-content {\n    border-radius: 4px;\n    min-height: 36px;\n  }\n</style>\n')])])])],2),e._m(7),n("p",[e._v("Element fournit également une série de classes pour cacher des éléments dans certaines circonstances. Ces classes peuvent être ajoutées à n'importe quel élément du DOM ou composant. Vous devrez importer le fichier CSS suivant pour pouvoir les utiliser:")]),e._m(8),n("p",[e._v("Ces classes sont:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"layout"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[this._v("¶")]),this._v(" Layout")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"espacement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#espacement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Espacement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-complexe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-complexe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page complexe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"decalage-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#decalage-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Décalage des colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alignement"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alignement","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alignement")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mise-en-page-responsive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mise-en-page-responsive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mise en page responsive")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"classes-pour-cacher-certains-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#classes-pour-cacher-certains-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Classes pour cacher certains éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("import 'element-ui/lib/theme-chalk/display.css';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("hidden-xs-only")]),e._v(" - disparaît sur les très petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-only")]),e._v(" - disparaît sur les petits viewports uniquement")]),n("li",[n("code",[e._v("hidden-sm-and-down")]),e._v(" - disparaît sur les petits viewports et plus petits")]),n("li",[n("code",[e._v("hidden-sm-and-up")]),e._v(" - disparaît sur les petits viewports et plus grand")]),n("li",[n("code",[e._v("hidden-md-only")]),e._v(" - disparaît sur les viewports moyens uniquement")]),n("li",[n("code",[e._v("hidden-md-and-down")]),e._v(" - disparaît sur les viewports moyens et plus petits")]),n("li",[n("code",[e._v("hidden-md-and-up")]),e._v(" - disparaît sur les viewports moyens et plus grand")]),n("li",[n("code",[e._v("hidden-lg-only")]),e._v(" - disparaît sur les viewports larges uniquement")]),n("li",[n("code",[e._v("hidden-lg-and-down")]),e._v(" - disparaît sur les viewports larges et plus petits")]),n("li",[n("code",[e._v("hidden-lg-and-up")]),e._v(" - disparaît sur les viewports larges et plus grand")]),n("li",[n("code",[e._v("hidden-xl-only")]),e._v(" - disparaît sur les viewports très larges uniquement")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-lignes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-lignes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des lignes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("gutter")]),n("td",[e._v("Espacement de la grille.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Mode de mise en page. Vous pouvez utiliser flex, qui fonctionne sur les navigateurs modernes.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("justify")]),n("td",[e._v("Alignement horizontal pour le mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("start/end/center/space-around/space-between")]),n("td",[e._v("start")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement vertical pour la mise en page flex.")]),n("td",[e._v("string")]),n("td",[e._v("top/middle/bottom")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des colonnes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("span")]),n("td",[e._v("Nombre de colonnes sur lesquelles l'élément s'étend.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("24")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Nombre d'espacements sur la gauche de l'élément.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("push")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la droite.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("pull")]),n("td",[e._v("Nombre de colonnes dont l'élément se déplace vers la gauche.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("xs")]),n("td",[n("code",[e._v("<768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sm")]),n("td",[n("code",[e._v("≥768px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("md")]),n("td",[n("code",[e._v("≥992px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("lg")]),n("td",[n("code",[e._v("≥1200px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("xl")]),n("td",[n("code",[e._v("≥1920px")]),e._v(" Nombre de colonnes responsives ou bien objet de propriétés de colonne.")]),n("td",[e._v("number/object (e.g. {span: 4, offset: 4})")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tag")]),n("td",[e._v("Élément de tag personnalisé.")]),n("td",[e._v("string")]),n("td",[e._v("*")]),n("td",[e._v("div")])])])])}],!1,null,null,null);t.default=i.exports},774:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",[n("el-link",{attrs:{href:"https://element.eleme.io",target:"_blank"}},[e._v("défaut")]),e._v(" "),n("el-link",{attrs:{type:"primary"}},[e._v("primaire")]),e._v(" "),n("el-link",{attrs:{type:"success"}},[e._v("succès")]),e._v(" "),n("el-link",{attrs:{type:"warning"}},[e._v("avertissement")]),e._v(" "),n("el-link",{attrs:{type:"danger"}},[e._v("danger")]),e._v(" "),n("el-link",{attrs:{type:"info"}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",[n("el-link",{attrs:{disabled:""}},[e._v("défaut")]),e._v(" "),n("el-link",{attrs:{type:"primary",disabled:""}},[e._v("primaire")]),e._v(" "),n("el-link",{attrs:{type:"success",disabled:""}},[e._v("succès")]),e._v(" "),n("el-link",{attrs:{type:"warning",disabled:""}},[e._v("avertissement")]),e._v(" "),n("el-link",{attrs:{type:"danger",disabled:""}},[e._v("danger")]),e._v(" "),n("el-link",{attrs:{type:"info",disabled:""}},[e._v("info")])],1)])},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",[t("el-link",{attrs:{underline:!1}},[this._v("non souligné")]),this._v(" "),t("el-link",[this._v("Souligné")])],1)])},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",[t("el-link",{attrs:{icon:"el-icon-edit"}},[this._v("Éditer")]),this._v(" "),t("el-link",[this._v("Vérifier"),t("i",{staticClass:"el-icon-view el-icon--right"})])],1)])},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un hyperlien textuel.")]),e._m(1),n("p",[e._v("Lien texte basique.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link href="https://element.eleme.io" target="_blank">défaut</el-link>\n  <el-link type="primary">primaire</el-link>\n  <el-link type="success">succès</el-link>\n  <el-link type="warning">avertissement</el-link>\n  <el-link type="danger">danger</el-link>\n  <el-link type="info">info</el-link>\n</div>\n')])])])],2),e._m(2),n("p",[e._v("Lien désactivé.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link disabled>défaut</el-link>\n  <el-link type="primary" disabled>primaire</el-link>\n  <el-link type="success" disabled>succès</el-link>\n  <el-link type="warning" disabled>avertissement</el-link>\n  <el-link type="danger" disabled>danger</el-link>\n  <el-link type="info" disabled>info</el-link>\n</div>\n')])])])],2),e._m(3),n("p",[e._v("Lien souligné.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link :underline="false">non souligné</el-link>\n  <el-link>Souligné</el-link>\n</div>\n')])])])],2),e._m(4),n("p",[e._v("Lien avec icône.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n  <el-link icon="el-icon-edit">Éditer</el-link>\n  <el-link>Vérifier<i class="el-icon-view el-icon--right"></i> </el-link>\n</div>\n')])])])],2),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"link"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#link","aria-hidden":"true"}},[this._v("¶")]),this._v(" Link")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"souligne"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#souligne","aria-hidden":"true"}},[this._v("¶")]),this._v(" Souligné")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Options")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du lien.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("défaut")])]),n("tr",[n("td",[e._v("underline")]),n("td",[e._v("Si le composant est souligné.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("href")]),n("td",[e._v("Identique au "),n("code",[e._v("href")]),e._v(" natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Nom de classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},775:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{directives:[{name:"loading",rawName:"v-loading",value:this.loading,expression:"loading"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...","element-loading-spinner":"el-icon-loading","element-loading-background":"rgba(0, 0, 0, 0.8)",data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-02",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-04",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"},{date:"2016-05-01",name:"John Smith",address:"No.1518,  Jinshajiang Road, Putuo District"}],loading:!0}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{directives:[{name:"loading",rawName:"v-loading.fullscreen.lock",value:this.fullscreenLoading,expression:"fullscreenLoading",modifiers:{fullscreen:!0,lock:!0}}],attrs:{type:"primary"},on:{click:this.openFullScreen1}},[this._v("\n    Comme directive\n  ")]),this._v(" "),t("el-button",{attrs:{type:"primary"},on:{click:this.openFullScreen2}},[this._v("\n    Comme service\n  ")])]],2)},staticRenderFns:[]},{data:function(){return{fullscreenLoading:!1}},methods:{openFullScreen1:function(){var e=this;this.fullscreenLoading=!0,setTimeout(function(){e.fullscreenLoading=!1},2e3)},openFullScreen2:function(){var e=this.$loading({lock:!0,text:"Loading",spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)"});setTimeout(function(){e.close()},2e3)}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une animation durant le chargement de données.")]),e._m(1),n("p",[e._v("Affiche une animation dans un conteneur (Comme un tableau par exemple) pendant le chargement des données.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit deux moyens d'invoquer Loading: la directive et le service. Pour la directive "),n("code",[e._v("v-loading")]),e._v(", attachez simplement un "),n("code",[e._v("boolean")]),e._v(". Par défaut le masque sera ajouté à l'élément contenant la directive. Ajoutez le modificateur "),n("code",[e._v("body")]),e._v(" pour ajouter le masque à l'élément body.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  body {\n    margin: 0;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser le texte, le spinner et la couleur de fond.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("element-loading-text")]),e._v(" à l'élement sur lequel "),n("code",[e._v("v-loading")]),e._v(" est attaché et sa valeur sera affichée sous le spinner. De la même façon, "),n("code",[e._v("element-loading-spinner")]),e._v(" et "),n("code",[e._v("element-loading-background")]),e._v(" permettent de personnaliser le spinner et la couleur de fond.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    v-loading="loading"\n    element-loading-text="Loading..."\n    element-loading-spinner="el-icon-loading"\n    element-loading-background="rgba(0, 0, 0, 0.8)"\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      prop="date"\n      label="Date"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-02\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'John Smith\',\n          address: \'No.1518,  Jinshajiang Road, Putuo District\'\n        }],\n        loading: true\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Affichez une animation en plein écran quand vous charger des données.")]),n("demo-block",[n("div",[n("p",[e._v("Quand il est utilisé comme une directive, un Loading plein écran nécessite le modificateur "),n("code",[e._v("fullscreen")]),e._v(" qui sera ajouté au body. Dans ce cas, si vous souhaitez désactiver le défilement du body, vous pouvez ajouter le modificateur "),n("code",[e._v("lock")]),e._v(". Quand il est utilisé comme service, Loading est en plein écran par défaut.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button\n    type="primary"\n    @click="openFullScreen1"\n    v-loading.fullscreen.lock="fullscreenLoading">\n    Comme directive\n  </el-button>\n  <el-button\n    type="primary"\n    @click="openFullScreen2">\n    Comme service\n  </el-button>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen1() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 2000);\n      },\n      openFullScreen2() {\n        const loading = this.$loading({\n          lock: true,\n          text: \'Loading\',\n          spinner: \'el-icon-loading\',\n          background: \'rgba(0, 0, 0, 0.7)\'\n        });\n        setTimeout(() => {\n          loading.close();\n        }, 2000);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez invoquer Loading comme un service. Importez le service Loading:")]),e._m(5),n("p",[e._v("Et invoquer-le:")]),e._m(6),e._m(7),e._m(8),n("p",[e._v("Notez que dans ce cas le Loading plein écran est un singleton. Si un nouveau Loading plein écran est invoqué avant la fermeture du précédent, celui-ci sera retourné au lieu d'en créer un nouveau:")]),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-dans-un-conteneur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-dans-un-conteneur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading dans un conteneur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"chargement-plein-ecran"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#chargement-plein-ecran","aria-hidden":"true"}},[this._v("¶")]),this._v(" Chargement plein écran")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"service"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[this._v("¶")]),this._v(" Service")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Loading } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("Loading.service(options);\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Le paramètre "),t("code",[this._v("options")]),this._v(" correspond à la configuration de Loading (voir table suivante). "),t("code",[this._v("LoadingService")]),this._v(" retourne une instance de Loading, que vous pouvez fermer en appelant la méthode "),t("code",[this._v("close")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance = Loading.service(options);\nthis.$nextTick(() => { // Loading should be closed asynchronously\n  loadingInstance.close();\n});\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("let loadingInstance1 = Loading.service({ fullscreen: true });\nlet loadingInstance2 = Loading.service({ fullscreen: true });\nconsole.log(loadingInstance1 === loadingInstance2); // true\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Appeler la méthode "),t("code",[this._v("close")]),this._v(" sur n'importe lequel des deux fermera le Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si Element est importé en entier, une méthode globale "),t("code",[this._v("$loading")]),this._v(" sera ajoutée à Vue.prototype. Vous pourrez l'invoquer comme ceci: "),t("code",[this._v("this.$loading(options)")]),this._v(" et elle retournera une instance Loading.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("target")]),n("td",[e._v("L'élément du DOM a couvrir. Accepte un objet DOM ou un string. Si c'est un string, il sera passé à "),n("code",[e._v("document.querySelector")]),e._v(" Pour avoir l'élément du DOM correspondant.")]),n("td",[e._v("object/string")]),n("td",[e._v("—")]),n("td",[e._v("document.body")])]),n("tr",[n("td",[e._v("body")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("body")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("fullscreen")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("fullscreen")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("lock")]),n("td",[e._v("Identique au modificateur "),n("code",[e._v("lock")]),e._v(" de "),n("code",[e._v("v-loading")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text")]),n("td",[e._v("Texte a afficher sous le spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("spinner")]),n("td",[e._v("Classe du spinner.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Couleur de fond du masque.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Classe du Loading.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},776:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex,mode:"horizontal"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Infos")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1),e._v(" "),n("div",{staticClass:"line"}),e._v(" "),n("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":e.activeIndex2,mode:"horizontal","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{select:e.handleSelect}},[n("el-menu-item",{attrs:{index:"1"}},[e._v("Centre de traitement")]),e._v(" "),n("el-submenu",{attrs:{index:"2"}},[n("template",{slot:"title"},[e._v("Lieu de travail")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-3"}},[e._v("item trois")]),e._v(" "),n("el-submenu",{attrs:{index:"2-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-2"}},[e._v("item deux")]),e._v(" "),n("el-menu-item",{attrs:{index:"2-4-3"}},[e._v("item trois")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[e._v("Info")]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[e._v("Commandes")])])],1)],1)},staticRenderFns:[]},{data:function(){return{activeIndex:"1",activeIndex2:"1"}},methods:{handleSelect:function(e,t){console.log(e,t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-row",{staticClass:"tac"},[n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs par défaut")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1),e._v(" "),n("el-col",{attrs:{span:12}},[n("h5",[e._v("Couleurs personnalisées")]),e._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2","background-color":"#545c64","text-color":"#fff","active-text-color":"#ffd04b"},on:{open:e.handleOpen,close:e.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),e._v(" "),n("span",[e._v("Navigateur Un")])]),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Un"}},[n("el-menu-item",{attrs:{index:"1-1"}},[e._v("item un")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[e._v("item un")])],1),e._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[e._v("item trois")])],1),e._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("template",{slot:"title"},[e._v("item quatre")]),e._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[e._v("item un")])],2)],2),e._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),e._v(" "),n("span",[e._v("Navigateur Deux")])]),e._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),e._v(" "),n("span",[e._v("Navigateur Trois")])]),e._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),e._v(" "),n("span",[e._v("Navigateur Quatre")])])],1)],1)],1)],1)},staticRenderFns:[]},{methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{staticStyle:{"margin-bottom":"20px"},model:{value:t.isCollapse,callback:function(e){t.isCollapse=e},expression:"isCollapse"}},[n("el-radio-button",{attrs:{label:!1}},[t._v("Agrandir")]),t._v(" "),n("el-radio-button",{attrs:{label:!0}},[t._v("Réduire")])],1),t._v(" "),n("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",collapse:t.isCollapse},on:{open:t.handleOpen,close:t.handleClose}},[n("el-submenu",{attrs:{index:"1"}},[n("template",{slot:"title"},[n("i",{staticClass:"el-icon-location"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Un")])]),t._v(" "),n("el-menu-item-group",[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Group Un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-1"}},[t._v("item un")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-2"}},[t._v("item deux")])],1),t._v(" "),n("el-menu-item-group",{attrs:{title:"Group Deux"}},[n("el-menu-item",{attrs:{index:"1-3"}},[t._v("item trois")])],1),t._v(" "),n("el-submenu",{attrs:{index:"1-4"}},[n("span",{attrs:{slot:"title"},slot:"title"},[t._v("item quatre")]),t._v(" "),n("el-menu-item",{attrs:{index:"1-4-1"}},[t._v("item un")])],1)],2),t._v(" "),n("el-menu-item",{attrs:{index:"2"}},[n("i",{staticClass:"el-icon-menu"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Deux")])]),t._v(" "),n("el-menu-item",{attrs:{index:"3",disabled:""}},[n("i",{staticClass:"el-icon-document"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Trois")])]),t._v(" "),n("el-menu-item",{attrs:{index:"4"}},[n("i",{staticClass:"el-icon-setting"}),t._v(" "),n("span",{attrs:{slot:"title"},slot:"title"},[t._v("Navigateur Quatre")])])],1)],1)},staticRenderFns:[]},{data:function(){return{isCollapse:!0}},methods:{handleOpen:function(e,t){console.log(e,t)},handleClose:function(e,t){console.log(e,t)}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Menu qui fournit un système de navigation à votre site.")]),e._m(1),n("p",[e._v("La barre du haut peut être utilisée pour différents scénarios.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut le menu est vertical, mais vous pouvez le passer en horizontal en réglant l'attribut "),n("code",[e._v("mode")]),e._v(" sur 'horizontal'. De plus, vous pouvez utiliser le composant submenu pour créer un second niveau niveau de menu. Le menu utilises "),n("code",[e._v("background-color")]),e._v(", "),n("code",[e._v("text-color")]),e._v(" et "),n("code",[e._v("active-text-color")]),e._v(" pour personnaliser les couleurs.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Infos</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n<div class="line"></div>\n<el-menu\n  :default-active="activeIndex2"\n  class="el-menu-demo"\n  mode="horizontal"\n  @select="handleSelect"\n  background-color="#545c64"\n  text-color="#fff"\n  active-text-color="#ffd04b">\n  <el-menu-item index="1">Centre de traitement</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">Lieu de travail</template>\n    <el-menu-item index="2-1">item un</el-menu-item>\n    <el-menu-item index="2-2">item deux</el-menu-item>\n    <el-menu-item index="2-3">item trois</el-menu-item>\n    <el-submenu index="2-4">\n      <template slot="title">item quatre</template>\n      <el-menu-item index="2-4-1">item un</el-menu-item>\n      <el-menu-item index="2-4-2">item deux</el-menu-item>\n      <el-menu-item index="2-4-3">item trois</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="3" disabled>Info</el-menu-item>\n  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Commandes</a></el-menu-item>\n</el-menu>\n\n<script>\n  export default {\n    data() {\n      return {\n        activeIndex: \'1\',\n        activeIndex2: \'1\'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Menu vertical avec sous-menus.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser le composant el-menu-item-group pour créer un groupe dans le menu dont le nom sera déterminé par celui de la propriété title ou d'un slot.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row class="tac">\n  <el-col :span="12">\n    <h5>Couleurs par défaut</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="12">\n    <h5>Couleurs personnalisées</h5>\n    <el-menu\n      default-active="2"\n      class="el-menu-vertical-demo"\n      @open="handleOpen"\n      @close="handleClose"\n      background-color="#545c64"\n      text-color="#fff"\n      active-text-color="#ffd04b">\n      <el-submenu index="1">\n        <template slot="title">\n          <i class="el-icon-location"></i>\n          <span>Navigateur Un</span>\n        </template>\n        <el-menu-item-group title="Group Un">\n          <el-menu-item index="1-1">item un</el-menu-item>\n          <el-menu-item index="1-2">item un</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="Group Deux">\n          <el-menu-item index="1-3">item trois</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">item quatre</template>\n          <el-menu-item index="1-4-1">item un</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">\n        <i class="el-icon-menu"></i>\n        <span>Navigateur Deux</span>\n      </el-menu-item>\n      <el-menu-item index="3" disabled>\n        <i class="el-icon-document"></i>\n        <span>Navigateur Trois</span>\n      </el-menu-item>\n      <el-menu-item index="4">\n        <i class="el-icon-setting"></i>\n        <span>Navigateur Quatre</span>\n      </el-menu-item>\n    </el-menu>\n  </el-col>\n</el-row>\n\n<script>\n  export default {\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Le menu vertical peut être réduit.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">\n  <el-radio-button :label="false">Agrandir</el-radio-button>\n  <el-radio-button :label="true">Réduire</el-radio-button>\n</el-radio-group>\n<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">\n  <el-submenu index="1">\n    <template slot="title">\n      <i class="el-icon-location"></i>\n      <span slot="title">Navigateur Un</span>\n    </template>\n    <el-menu-item-group>\n      <span slot="title">Group Un</span>\n      <el-menu-item index="1-1">item un</el-menu-item>\n      <el-menu-item index="1-2">item deux</el-menu-item>\n    </el-menu-item-group>\n    <el-menu-item-group title="Group Deux">\n      <el-menu-item index="1-3">item trois</el-menu-item>\n    </el-menu-item-group>\n    <el-submenu index="1-4">\n      <span slot="title">item quatre</span>\n      <el-menu-item index="1-4-1">item un</el-menu-item>\n    </el-submenu>\n  </el-submenu>\n  <el-menu-item index="2">\n    <i class="el-icon-menu"></i>\n    <span slot="title">Navigateur Deux</span>\n  </el-menu-item>\n  <el-menu-item index="3" disabled>\n    <i class="el-icon-document"></i>\n    <span slot="title">Navigateur Trois</span>\n  </el-menu-item>\n  <el-menu-item index="4">\n    <i class="el-icon-setting"></i>\n    <span slot="title">Navigateur Quatre</span>\n  </el-menu-item>\n</el-menu>\n\n<style>\n  .el-menu-vertical-demo:not(.el-menu--collapse) {\n    width: 200px;\n    min-height: 400px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        isCollapse: true\n      };\n    },\n    methods: {\n      handleOpen(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"navmenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" NavMenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-du-haut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-du-haut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre du haut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-laterale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-laterale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre latérale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"menu-reduit"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#menu-reduit","aria-hidden":"true"}},[this._v("¶")]),this._v(" Menu réduit")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("mode")]),n("td",[e._v("Mode d'affichage du menu.")]),n("td",[e._v("string")]),n("td",[e._v("horizontal / vertical")]),n("td",[e._v("vertical")])]),n("tr",[n("td",[e._v("collapse")]),n("td",[e._v("Si le menu peut être réduit, uniquement disponible en mode vertical.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background-color")]),n("td",[e._v("Couleur de fond du menu (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte du menu (format hexadécimal)")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#303133")])]),n("tr",[n("td",[e._v("active-text-color")]),n("td",[e._v("Couleur du texte de l'item actif (format hexadécimal).")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("default-active")]),n("td",[e._v("Index du menu actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("default-openeds")]),n("td",[e._v("Liste contenant les index les sous-menus actifs.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("unique-opened")]),n("td",[e._v("Si un seul sous-menu peut être actif.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("menu-trigger")]),n("td",[e._v("Comment les sous-menu sont déclenchés, uniquement en mode horizontal.")]),n("td",[e._v("string")]),n("td",[e._v("hover / click")]),n("td",[e._v("hover")])]),n("tr",[n("td",[e._v("router")]),n("td",[e._v("Si le mode "),n("code",[e._v("vue-router")]),e._v(" est activé. Si "),n("code",[e._v("true")]),e._v(", l'index sera utilisé comme 'path' pour activer la route.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-transition")]),n("td",[e._v("Si la transition de réduction doit être activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("open")]),n("td",[e._v("Ouvre un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à ouvrir")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Ferme un sous-menu spécifique.")]),n("td",[e._v("index: index du sous-menu à fermer")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Fonction de callback pour quand le menu est activé.")]),n("td",[e._v("index: index du menu activé, indexPath: index path du menu activé.")])]),n("tr",[n("td",[e._v("open")]),n("td",[e._v("Fonction de callback pour quand le sous-menu s'agrandit.")]),n("td",[e._v("index: index of expanded sous-menu, indexPath: index path du sous-menu")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Fonction de callback pour quand le sous-menu se réduit.")]),n("td",[e._v("index: index of collapsed sous-menu, indexPath: index path du sous-menu")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements des items du menu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("click")]),t("td",[this._v("Fonction de callback pour quand le menu-item est cliqué.")]),t("td",[this._v("el: instance du menu-item.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-sous-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-sous-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du sous-menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu popup.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-timeout")]),n("td",[e._v("Délai avant de montrer un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("hide-timeout")]),n("td",[e._v("Délai avant de cacher un sous-menu.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sous-menu est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("S'il faut ajouter un menu popup au body. Si le positionnement du body n'est pas bon, vous pouvez essayer de régler cette propriété.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("Sous-menus de niveau 1: true / autres sous-menus: false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-items-du-menu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-items-du-menu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des items du menu")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("index")]),n("td",[e._v("Identificateur unique.")]),n("td",[e._v("string/null")]),n("td",[e._v("—")]),n("td",[e._v("null")])]),n("tr",[n("td",[e._v("route")]),n("td",[e._v("Objet Vue Router.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'item est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-groupes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-groupes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des groupes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attributs")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du groupe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},777:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$alert("Ceci est un message","Titre",{confirmButtonText:"OK",callback:function(e){t.$message({type:"info",message:"action: "+e})}})}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("Ceci effacera le fichier. Continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning"}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Suppression annulée"})})}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var n=this;this.$prompt("Entrez votre e-mail","Astuce",{confirmButtonText:"OK",cancelButtonText:"Annuler",inputPattern:/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"E-mail invalide"}).then(function(e){var t=e.value;n.$message({type:"success",message:"Votre e-mail est: "+t})}).catch(function(){n.$message({type:"info",message:"Annulé"})})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this,e=this.$createElement;this.$msgbox({title:"Message",message:e("p",null,[e("span",null,"Le message peut être "),e("i",{style:"color: teal"},"VNode")]),showCancelButton:!0,confirmButtonText:"OK",cancelButtonText:"Annuler",beforeClose:function(e,t,n){"confirm"===e?(t.confirmButtonLoading=!0,t.confirmButtonText="Chargement...",setTimeout(function(){n(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):n()}}).then(function(e){t.$message({type:"info",message:"Action: "+e})})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$alert("<strong>Ceci est du <i>HTML</i></strong>","HTML",{dangerouslyUseHTMLString:!0})}}}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var t=this;this.$confirm("Vous avez du travail non enregistré, enregistrer et quitter?","Confirm",{distinguishCancelAndClose:!0,confirmButtonText:"Enregistrer",cancelButtonText:"Ne pas enregistrer"}).then(function(){t.$message({type:"info",message:"Enregistré. Passage a une nouvelle route."})}).catch(function(e){t.$message({type:"info",message:"cancel"===e?"Changements annulés. Passage sur une nouvelle route.":"Reste sur la même route"})})}}}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{type:"text"},on:{click:this.open}},[this._v("Cliquez pour ouvrir la MessageBox")])]],2)},staticRenderFns:[]},{methods:{open:function(){var e=this;this.$confirm("Ceci effacera le fichier, continuer?","Warning",{confirmButtonText:"OK",cancelButtonText:"Annuler",type:"warning",center:!0}).then(function(){e.$message({type:"success",message:"Fichier supprimé"})}).catch(function(){e.$message({type:"info",message:"Annulé"})})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Un ensemble de fenêtres modales pour afficher des messages système, tels que des alertes, des demandes de confirmation ou des informations importantes.")]),e._m(1),e._m(2),n("p",[e._v("Alert interrompt l'action de l'utilisateur jusqu'à ce qu'il confirme.")]),n("demo-block",[n("div",[n("p",[e._v("Ouvrez un alert en appelant la méthode "),n("code",[e._v("$alert")]),e._v(". Elle simule une "),n("code",[e._v("alert")]),e._v(" système et ne peut être fermée en pressant ESC ou en cliquant hors de la boite. Dans cet exemple, deux paramètres "),n("code",[e._v("message")]),e._v(" et "),n("code",[e._v("title")]),e._v(" sont reçus. Notez que lorsque la boite est fermée, elle retourne un objet "),n("code",[e._v("Promise")]),e._v(". Si vous n'êtes pas certains que tout vos navigateurs cibles supportent "),n("code",[e._v("Promise")]),e._v(", utilisez un polyfill ou utilisez des callbacks comme dans l'exemple qui suit.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('Ceci est un message', 'Titre', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Confirm est utilisé pour demander une confirmation à l'utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appelez la méthode "),n("code",[e._v("$confirm")]),e._v(" pour ouvrir une confirm, qui simule le "),n("code",[e._v("confirm")]),e._v(" système. Vous pouvez aussi personnaliser MessageBox en passant un objet à l'attribut "),n("code",[e._v("options")]),e._v(". L'attribut "),n("code",[e._v("type")]),e._v(" indique le type de message (voir en bas de la page pour la liste des valeurs possibles). Notez que l'attribut "),n("code",[e._v("title")]),e._v(" doit être de type "),n("code",[e._v("string")]),e._v(". S'il se trouve être un "),n("code",[e._v("object")]),e._v(", il sera considéré comme étant l'attribut "),n("code",[e._v("options")]),e._v(". Cet exemple utilise une "),n("code",[e._v("Promise")]),e._v(" pour gérer la suite du processus.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Ceci effacera le fichier. Continuer?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Suppression annulée'\n          });          \n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Prompt est utilisé lorsqu'un utilisateur.")]),n("demo-block",[n("div",[n("p",[e._v("Appellez la méthode "),n("code",[e._v("$prompt")]),e._v(" pour ouvrir un prompt simulant le "),n("code",[e._v("prompt")]),e._v(" système. Vous pouvez utiliser le paramètre "),n("code",[e._v("inputPattern")]),e._v(" pour spécifier un pattern à l'aide d'une RegExp. Utilisez "),n("code",[e._v("inputValidator")]),e._v(" pour indiquer la méthode de validation, qui devra retourner un "),n("code",[e._v("Boolean")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(". Retourner "),n("code",[e._v("false")]),e._v(" ou un "),n("code",[e._v("String")]),e._v(" veut dire que la validation a échouée, et la string ainsi fournie sera le "),n("code",[e._v("inputErrorMessage")]),e._v(". De plus, vous pouvez personnaliser le placeholder du champs avec le paramètre "),n("code",[e._v("inputPlaceholder")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$prompt('Entrez votre e-mail', 'Astuce', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'E-mail invalide'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: 'Votre e-mail est: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Il est possible d'afficher du contenu un peu plus varié et personnalisé.")]),n("demo-block",[n("div",[n("p",[e._v("les trois précédentes méthodes sont des repackagings de la méthode "),n("code",[e._v("$msgbox")]),e._v(". cet exemple appelle directement "),n("code",[e._v("$msgbox")]),e._v(" en utilisant l'attribut "),n("code",[e._v("showCancelButton")]),e._v(" pour indiquer si un bouton annuler doit être affiché. De plus, vous pouvez utiliser "),n("code",[e._v("cancelButtonClass")]),e._v(" pour ajouter du style et "),n("code",[e._v("cancelButtonText")]),e._v(" pour personnaliser le bouton texte (voir la liste complète en fin de page). La méthode "),n("code",[e._v("beforeClose")]),e._v("est appelée quand la MessageBox va être fermée et prévient sa fermeture. Elle prend trois paramètres: "),n("code",[e._v("action")]),e._v(", "),n("code",[e._v("instance")]),e._v(" et "),n("code",[e._v("done")]),e._v(". Elle vous permet ainsi d'effectuer des actions avant la fermeture, e.g. activer "),n("code",[e._v("loading")]),e._v(" pour le bouton de confirmation. Appelez "),n("code",[e._v("done")]),e._v(" pour fermer la MessageBox, sinon l'instance ne sera jamais fermée.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n        this.$msgbox({\n          title: 'Message',\n          message: h('p', null, [\n            h('span', null, 'Le message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ]),\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Chargement...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'Action: ' + action\n          });\n        });\n      },\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$alert('<strong>Ceci est du <i>HTML</i></strong>', 'HTML', {\n          dangerouslyUseHTMLString: true\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),n("p",[e._v("Dans certains cas, les boutons fermer et annuler peuvent avoir des sens différents.")]),n("demo-block",[n("div",[n("p",[e._v("Par défaut, le paramètre de la "),n("code",[e._v("callback")]),e._v(" et de la promesse rejetée est 'cancel' lorsque l'utilisateur annule (clique sur le bouton annuler) ou lorsqu'il ferme la fenêtre (clique sur le bouton fermer, hors de la fenêtre, ou presse ESC). Si "),n("code",[e._v("distinguishCancelAndClose")]),e._v(" est à "),n("code",[e._v("true")]),e._v(", le dernier cas précédent renvoie 'close' au lieu de 'cancel' afin de pouvoir gérer les deux actions différemment.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Vous avez du travail non enregistré, enregistrer et quitter?', 'Confirm', {\n          distinguishCancelAndClose: true,\n          confirmButtonText: 'Enregistrer',\n          cancelButtonText: 'Ne pas enregistrer'\n        })\n          .then(() => {\n            this.$message({\n              type: 'info',\n              message: 'Enregistré. Passage a une nouvelle route.'\n            });\n          })\n          .catch(action => {\n            this.$message({\n              type: 'info',\n              message: action === 'cancel'\n                ? 'Changements annulés. Passage sur une nouvelle route.'\n                : 'Reste sur la même route'\n            })\n          });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),n("p",[e._v("le contenu de MessageBox peut être centré.")]),n("demo-block",[n("div",[n("p",[e._v("Mettre "),n("code",[e._v("center")]),e._v(" à "),n("code",[e._v("true")]),e._v(" centrera le contenu")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button type=\"text\" @click=\"open\">Cliquez pour ouvrir la MessageBox</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$confirm('Ceci effacera le fichier, continuer?' , 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Annuler',\n          type: 'warning',\n          center: true\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Fichier supprimé'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Annulé'\n          });\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"messagebox"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[this._v("¶")]),this._v(" MessageBox")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("MessageBox est avant tout conçue pour émuler des "),t("code",[this._v("alert")]),this._v(", "),t("code",[this._v("confirm")]),this._v(" ou "),t("code",[this._v("prompt")]),this._v(", son contenu devrait donc être simple. Pour afficher un contenu plus riche, utilisez plutôt Dialog.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alert"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alert")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"confirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Confirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"prompt"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[this._v("¶")]),this._v(" Prompt")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisation")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le contenu de MessageBox peut être "),n("code",[e._v("VNode")]),e._v(", Vous permettant de passer des composants personnalisés. Lorsque vous ouvrer MessageBox, Vue compare le nouveau "),n("code",[e._v("VNode")]),e._v(" avec l'ancien "),n("code",[e._v("VNode")]),e._v(", puis détermine comment rafraîchir efficacement l'UI, le composant peut donc ne pas être totalement re-rendu ("),n("a",{attrs:{href:"https://github.com/ElemeFE/element/issues/8931"}},[e._v("#8931")]),e._v("). Dans ce cas, Vous pouvez ajouter une clé unique à "),n("code",[e._v("VNode")]),e._v(" à chaque fois que MessageBox s'ouvre: "),n("a",{attrs:{href:"https://jsfiddle.net/zhiyang/ezmhq2ef"}},[e._v("exemple")]),e._v(".")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"distinguer-annuler-de-fermer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#distinguer-annuler-de-fermer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Distinguer 'annuler' de 'fermer'")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Si Element est importé entièrement, il ajoutera les méthodes suivantes à Vue.prototype: "),n("code",[e._v("$msgbox")]),e._v(", "),n("code",[e._v("$alert")]),e._v(", "),n("code",[e._v("$confirm")]),e._v(" et "),n("code",[e._v("$prompt")]),e._v(". Dans ce cas vous pouvez appeler "),n("code",[e._v("MessageBox")]),e._v(" comme nous l'avons fait dans cette page. Les paramètres sont:")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ul",[n("li",[n("code",[e._v("$msgbox(options)")])]),n("li",[n("code",[e._v("$alert(message, title, options)")]),e._v(" ou "),n("code",[e._v("$alert(message, options)")])]),n("li",[n("code",[e._v("$confirm(message, title, options)")]),e._v(" ou "),n("code",[e._v("$confirm(message, options)")])]),n("li",[n("code",[e._v("$prompt(message, title, options)")]),e._v(" ou "),n("code",[e._v("$prompt(message, options)")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Si vous préférer importer "),t("code",[this._v("MessageBox")]),this._v(" à la demande:")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { MessageBox } from 'element-ui';\n")])])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Les méthodes correspondantes sont: "),n("code",[e._v("MessageBox")]),e._v(", "),n("code",[e._v("MessageBox.alert")]),e._v(", "),n("code",[e._v("MessageBox.confirm")]),e._v(" et "),n("code",[e._v("MessageBox.prompt")]),e._v(". Les paramètres sont les mêmes que précédemment.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Contenu de la MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message, utilisé pour le choix d'icône.")]),n("td",[e._v("string")]),n("td",[e._v("success / info / warning / error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône personnalisée, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour MessageBox.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("callback")]),n("td",[e._v("La callback de fermeture de MessageBox si vous n'utilisez pas les promesses.")]),n("td",[e._v("function(action, instance), ou "),n("code",[e._v("action")]),e._v(" peut être 'confirm', 'cancel' ou 'close', et "),n("code",[e._v("instance")]),e._v(" est l'instance MessageBox.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si l'icône de fermeture doit être affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("beforeClose")]),n("td",[e._v("La callback de pré-fermeture qui empèchera MessageBox de se fermer.")]),n("td",[e._v("function(action, instance, done), ou "),n("code",[e._v("action")]),e._v(" peut-être 'confirm', 'cancel' ou 'close'; "),n("code",[e._v("instance")]),e._v(" est l'instance de MessageBox; "),n("code",[e._v("done")]),e._v(" est la méthode pour fermer l'instance.")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("distinguishCancelAndClose")]),n("td",[e._v("S'il doit y avoir une différence entre l'annulation et la fermeture de la MessageBox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lockScroll")]),n("td",[e._v("Si le défilement de la page doit être bloqué lorsque la MessageBox est active.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showCancelButton")]),n("td",[e._v("Si le bouton annuler doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de confirm ou prompt).")])]),n("tr",[n("td",[e._v("showConfirmButton")]),n("td",[e._v("Si le bouton confirmer doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("cancelButtonText")]),n("td",[e._v("Le texte du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Cancel")])]),n("tr",[n("td",[e._v("confirmButtonText")]),n("td",[e._v("Le texte du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("OK")])]),n("tr",[n("td",[e._v("cancelButtonClass")]),n("td",[e._v("Classe du bouton annuler.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirmButtonClass")]),n("td",[e._v("Classe du bouton confirmer.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closeOnClickModal")]),n("td",[e._v("Si MessageBox peut être fermée en cliquant en dehors.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert).")])]),n("tr",[n("td",[e._v("closeOnPressEscape")]),n("td",[e._v("Si MessageBox peut être fermée en pressant ESC.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true (false dans le cas de alert)")])]),n("tr",[n("td",[e._v("closeOnHashChange")]),n("td",[e._v("Si MessageBox doit être fermée quand le hash change.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("showInput")]),n("td",[e._v("Si un champs d'input doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false (true dans le cas de prompt).")])]),n("tr",[n("td",[e._v("inputPlaceholder")]),n("td",[e._v("Placeholder du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputType")]),n("td",[e._v("Type du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("inputValue")]),n("td",[e._v("Valeur initiale du champs d'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputPattern")]),n("td",[e._v("RegExp du champs d'input.")]),n("td",[e._v("regexp")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputValidator")]),n("td",[e._v("Fonction de validation du champs d'input. Doit retourner un boolean ou un string. Si c'est un string, il sera assigné à inputErrorMessage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inputErrorMessage")]),n("td",[e._v("Message d'erreur lorsque la validation échoue.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Illegal input")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le contenu doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("roundButton")]),n("td",[e._v("Si le bouton doit être rond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},778:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.open}},[this._v("Afficher le message")]),this._v(" "),t("el-button",{attrs:{plain:!0},on:{click:this.openVn}},[this._v("VNode")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$message("Ceci est un message.")},openVn:function(){var e=this.$createElement;this.$message({message:e("p",null,[e("span",null,"Message peut être "),e("i",{style:"color: teal"},"VNode")])})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open1}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message("Ceci est un message.")},open2:function(){this.$message({message:"Félicitations, ceci est un message de succès.",type:"success"})},open3:function(){this.$message({message:"Attention, ceci est un avertissement.",type:"warning"})},open4:function(){this.$message.error("Ouups, ceci est une erreur.")}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:!0},on:{click:e.open1}},[e._v("message")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open2}},[e._v("success")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open3}},[e._v("warning")]),e._v(" "),n("el-button",{attrs:{plain:!0},on:{click:e.open4}},[e._v("error")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$message({showClose:!0,message:"Ceci est un message."})},open2:function(){this.$message({showClose:!0,message:"Félicitations, ceci est un message de succès.",type:"success"})},open3:function(){this.$message({showClose:!0,message:"Attention, ceci est un avertissement.",type:"warning"})},open4:function(){this.$message({showClose:!0,message:"Ouups, ceci est une erreur.",type:"error"})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openCenter}},[this._v("Texte centré")])]],2)},staticRenderFns:[]},{methods:{openCenter:function(){this.$message({message:"Texte centré",center:!0})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:!0},on:{click:this.openHTML}},[this._v("Utiliser du HTML")])]],2)},staticRenderFns:[]},{methods:{openHTML:function(){this.$message({dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour avoir un retour après une action particulière. La différence avec Notification est que ce dernier est surtout utilisé pour afficher des notifications système passives.")]),e._m(1),n("p",[e._v("S'affiche en haut de la page et disparaît après trois secondes.")]),n("demo-block",[n("div",[n("p",[e._v("L'utilisation de Message est très similaire à Notification, la plupart des options ne sont donc pas expliquées ici. Référez-vous à la table en fin de page et celle de Notification pour en savoir plus. Element affecte la méthode "),n("code",[e._v("$message")]),e._v(" pour appeler Message. Il peut prendre en paramètre un string ou un VNode, qui sera affiché en tant que body principal.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button :plain=\"true\" @click=\"open\">Afficher le message</el-button>\n  <el-button :plain=\"true\" @click=\"openVn\">VNode</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$message('Ceci est un message.');\n      },\n\n      openVn() {\n        const h = this.$createElement;\n        this.$message({\n          message: h('p', null, [\n            h('span', null, 'Message peut être '),\n            h('i', { style: 'color: teal' }, 'VNode')\n          ])\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Utilisé pour montrer un retour d'activités Success, Warning, Message ou Error.")]),n("demo-block",[n("div",[n("p",[e._v("Lorsque vous avez besoin de plus de personnalisation, Message peut aussi accepter un objet en paramètre. Par exemple, le paramètre "),n("code",[e._v("type")]),e._v(" définit différents types, son défaut étant "),n("code",[e._v("info")]),e._v(". Dans ce cas le body est passé comme valeur de "),n("code",[e._v("message")]),e._v(". De plus, il existe des méthodes pour chaque type, afin que vous puissiez vous passer de la propriété "),n("code",[e._v("type")]),e._v(" comme dans "),n("code",[e._v("open4")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open1">message</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message(\'Ceci est un message.\');\n      },\n      open2() {\n        this.$message({\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message.error(\'Ouups, ceci est une erreur.\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Un bouton de fermeture peut être ajouté.")]),n("demo-block",[n("div",[n("p",[e._v("Un Message ne peut être fermé par défaut. Utiliséez "),n("code",[e._v("showClose")]),e._v(" si vous avez besoin de pouvoir le fermer. De plus, tout comme Notification, Message possède une "),n("code",[e._v("duration")]),e._v(" réglable. La durée par défaut est de 3000 ms, et infinie si à "),n("code",[e._v("0")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="open1">message</el-button>\n  <el-button :plain="true" @click="open2">success</el-button>\n  <el-button :plain="true" @click="open3">warning</el-button>\n  <el-button :plain="true" @click="open4">error</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$message({\n          showClose: true,\n          message: \'Ceci est un message.\'\n        });\n      },\n\n      open2() {\n        this.$message({\n          showClose: true,\n          message: \'Félicitations, ceci est un message de succès.\',\n          type: \'success\'\n        });\n      },\n\n      open3() {\n        this.$message({\n          showClose: true,\n          message: \'Attention, ceci est un avertissement.\',\n          type: \'warning\'\n        });\n      },\n\n      open4() {\n        this.$message({\n          showClose: true,\n          message: \'Ouups, ceci est une erreur.\',\n          type: \'error\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openCenter">Texte centré</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openCenter() {\n        this.$message({\n          message: \'Texte centré\',\n          center: true\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-button :plain="true" @click="openHTML">Utiliser du HTML</el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      openHTML() {\n        this.$message({\n          dangerouslyUseHTMLString: true,\n          message: \'<strong>Ceci est du <i>HTML</i></strong>\'\n        });\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"message"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[this._v("¶")]),this._v(" Message")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"texte-centre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#texte-centre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Texte centré")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez l'attribut "),t("code",[this._v("center")]),this._v(" pour centrer le texte.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute une méthode "),t("code",[this._v("$message")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Message")]),this._v(" dans l'instance de Vue comme dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Message")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Message } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas il faudra appeler "),t("code",[this._v("Message(options)")]),this._v(". Les méthodes des différents types sont aussi ajoutées, e.g. "),t("code",[this._v("Message.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Message.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("message")]),n("td",[e._v("Texte du message.")]),n("td",[e._v("string / VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du message.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("info")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe de l'icône, écrase "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour Message.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("La durée d'affichage, en millisecondes. Si 0, la durée est infinie.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("3000")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si un bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("center")]),n("td",[e._v("Si le texte doit être centré.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture avec en paramètre l'instance de Message.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("set the distance to the top of viewport")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("20")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Message")]),this._v(" et "),t("code",[this._v("this.$message")]),this._v(" retourne l'instance actuelle. Pour fermer manuellement cette instance, appelez sa méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme l'instance de Message.")])])])])}],!1,null,null,null);t.default=i.exports},779:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open1}},[this._v("\n    Se ferme automatiquement\n  ")]),this._v(" "),t("el-button",{attrs:{plain:""},on:{click:this.open2}},[this._v("\n    Ne se ferme pas automatiquement\n    ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){var e=this.$createElement;this.$notify({title:"Titre",message:e("i",{style:"color: teal"},"Ceci est un rappel")})},open2:function(){this.$notify({title:"Prompt",message:"Ceci est un message qui ne se ferme pas",duration:0})}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n    Success\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Warning\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Info\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Error\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Success",message:"Ceci est un message de succès",type:"success"})},open2:function(){this.$notify({title:"Warning",message:"Ceci est un avertissement",type:"warning"})},open3:function(){this.$notify.info({title:"Info",message:"Ceci est une information"})},open4:function(){this.$notify.error({title:"Error",message:"Ceci est une erreur"})}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-button",{attrs:{plain:""},on:{click:e.open1}},[e._v("\n    Top Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open2}},[e._v("\n    Bottom Right\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open3}},[e._v("\n    Bottom Left\n  ")]),e._v(" "),n("el-button",{attrs:{plain:""},on:{click:e.open4}},[e._v("\n    Top Left\n  ")])]],2)},staticRenderFns:[]},{methods:{open1:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur droit"})},open2:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur droit",position:"bottom-right"})},open3:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin inférieur gauche",position:"bottom-left"})},open4:function(){this.$notify({title:"Custom Position",message:"Je suis dans le coin supérieur gauche",position:"top-left"})}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    Notification avec décalage\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Success",message:"Ceci est un message de succès",offset:100})}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    Utiliser du HTML\n  ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify({title:"HTML String",dangerouslyUseHTMLString:!0,message:"<strong>Ceci est du <i>HTML</i></strong>"})}}}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-button",{attrs:{plain:""},on:{click:this.open}},[this._v("\n    Bouton de fermeture caché\n    ")])]],2)},staticRenderFns:[]},{methods:{open:function(){this.$notify.success({title:"Info",message:"Ceci est un message sans bouton de fermeture",showClose:!1})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une notification globale dans un coin de la page.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Element enregistre la méthode "),n("code",[e._v("$notify")]),e._v(" qui reçoit un objet en paramètre. Dans le cas le plus simple, vous pouvez simplement configurer les champs "),n("code",[e._v("title")]),e._v(" et"),n("code",[e._v("message")]),e._v(". Par défaut, la notification se ferme automatiquement après 4500ms, mais vous pouvez régler une autre durée avec "),n("code",[e._v("duration")]),e._v(". Si la durée est mise à "),n("code",[e._v("0")]),e._v(", la notification ne se fermera pas. "),n("code",[e._v("duration")]),e._v(" prends donc un "),n("code",[e._v("Number")]),e._v(" en millisecondes.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Se ferme automatiquement\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Ne se ferme pas automatiquement\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Titre',\n          message: h('i', { style: 'color: teal' }, 'Ceci est un rappel')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Prompt',\n          message: 'Ceci est un message qui ne se ferme pas',\n          duration: 0\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Nous fournissons quatre types: succès, avertissement, information et erreur.")]),n("demo-block",[n("div",[n("p",[e._v("Element fournit quatre types de notifications: "),n("code",[e._v("success")]),e._v(", "),n("code",[e._v("warning")]),e._v(", "),n("code",[e._v("info")]),e._v(" et "),n("code",[e._v("error")]),e._v(". Il sont choisis grâce au champs "),n("code",[e._v("type")]),e._v(", et n'importe quelle autre valeur sera ignorée. Il existe des méthodes  enregistrées pour chaque type, comme dans "),n("code",[e._v("open3")]),e._v(" et "),n("code",[e._v("open4")]),e._v(", qui ne nécessitent donc pas le champs "),n("code",[e._v("type")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Success\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Warning\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Info\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Error\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          type: 'success'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Warning',\n          message: 'Ceci est un avertissement',\n          type: 'warning'\n        });\n      },\n\n      open3() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'Ceci est une information'\n        });\n      },\n\n      open4() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'Ceci est une erreur'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("La notification peut apparaître dans le coin de votre choix.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("position")]),e._v(" définit le coin d'apparition de la notification. Cela peut être "),n("code",[e._v("top-right")]),e._v(", "),n("code",[e._v("top-left")]),e._v(", "),n("code",[e._v("bottom-right")]),e._v(" ou "),n("code",[e._v("bottom-left")]),e._v(". Le défaut est "),n("code",[e._v("top-right")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open1\">\n    Top Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open2\">\n    Bottom Right\n  </el-button>\n  <el-button\n    plain\n    @click=\"open3\">\n    Bottom Left\n  </el-button>\n  <el-button\n    plain\n    @click=\"open4\">\n    Top Left\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open1() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur droit'\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur droit',\n          position: 'bottom-right'\n        });\n      },\n\n      open3() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin inférieur gauche',\n          position: 'bottom-left'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Custom Position',\n          message: 'Je suis dans le coin supérieur gauche',\n          position: 'top-left'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez décaler l'emplacement de la notification par rapport au bord de la page.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("offset")]),e._v(" pour choisir le décalage de la notification. Notez que chaque notification apparaissant au même moment devrait avoir le même décalage.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Notification avec décalage\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'Ceci est un message de succès',\n          offset: 100\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" à true et "),n("code",[e._v("message")]),e._v(" sera traité comme du HTML.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Utiliser du HTML\n  </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify({\n          title: 'HTML String',\n          dangerouslyUseHTMLString: true,\n          message: '<strong>Ceci est du <i>HTML</i></strong>'\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),e._m(8),n("p",[e._v("Il est possible de cacher le bouton de fermeture.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("showClose")]),e._v(" à "),n("code",[e._v("false")]),e._v(" Pour que la notification ne puisse pas être fermée par l'utilisateur.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button\n    plain\n    @click=\"open\">\n    Bouton de fermeture caché\n    </el-button>\n</template>\n\n<script>\n  export default {\n    methods: {\n      open() {\n        this.$notify.success({\n          title: 'Info',\n          message: 'Ceci est un message sans bouton de fermeture',\n          showClose: false\n        });\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"notification"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[this._v("¶")]),this._v(" Notification")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"types"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[this._v("¶")]),this._v(" Types")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-personnalisee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-personnalisee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position personnalisée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-decalage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-decalage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec décalage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"utiliser-du-html"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-du-html","aria-hidden":"true"}},[this._v("¶")]),this._v(" Utiliser du HTML")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("message")]),this._v(" supporte le HTML.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"warning"},[n("p",[e._v("Bien que la propriété "),n("code",[e._v("message")]),e._v(" supporte le HTML, générer du contenu HTML dynamiquement peut être très dangereux, car cela permet des "),n("a",{attrs:{href:"https://en.wikipedia.org/wiki/Cross-site_scripting"}},[e._v("attaques XSS")]),e._v(". Donc lorsque "),n("code",[e._v("dangerouslyUseHTMLString")]),e._v(" est présent, soyez certain de sécuriser le contenu de "),n("code",[e._v("message")]),e._v(", et n'assignez "),n("strong",[e._v("jamais")]),e._v(" à "),n("code",[e._v("message")]),e._v(" du contenu fournit par l'utilisateur.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cacher-le-bouton-de-fermeture"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cacher-le-bouton-de-fermeture","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cacher le bouton de fermeture")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methode-globale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methode-globale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthode globale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element ajoute la méthode "),t("code",[this._v("$notify")]),this._v(" à Vue.prototype. Vous pouvez donc appeler "),t("code",[this._v("Notification")]),this._v(" dans l'instance de Vue comme nous avons fait dans cette page.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"import-a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#import-a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" Import à la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Importez "),t("code",[this._v("Notification")]),this._v(":")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-javascript"},[this._v("import { Notification } from 'element-ui';\n")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Dans ce cas vous devrez appeler "),t("code",[this._v("Notification(options)")]),this._v(". Il existe aussi des méthodes pour chaque type, e.g. "),t("code",[this._v("Notification.success(options)")]),this._v(". Vous pouvez appeler "),t("code",[this._v("Notification.closeAll()")]),this._v(" pour fermer manuellement toutes les instances.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("message")]),n("td",[e._v("Message de la notification.")]),n("td",[e._v("string/Vue.VNode")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("dangerouslyUseHTMLString")]),n("td",[e._v("Si "),n("code",[e._v("message")]),e._v(" doit être traité comme du HTML.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de notification.")]),n("td",[e._v("string")]),n("td",[e._v("success/warning/info/error")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("iconClass")]),n("td",[e._v("Classe d'icône. Écrasé par "),n("code",[e._v("type")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("customClass")]),n("td",[e._v("Nom de classe pour la notification.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("duration")]),n("td",[e._v("Durée avant fermeture. Infinie si mise à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4500")])]),n("tr",[n("td",[e._v("position")]),n("td",[e._v("Position de la notification.")]),n("td",[e._v("string")]),n("td",[e._v("top-right/top-left/bottom-right/bottom-left")]),n("td",[e._v("top-right")])]),n("tr",[n("td",[e._v("showClose")]),n("td",[e._v("Si le bouton de fermeture doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("onClose")]),n("td",[e._v("Callback de fermeture.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("onClick")]),n("td",[e._v("Callback quand la notification est cliquée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage par rapport au bord de la page. Toutes les notifications arrivant au même moment devraient avoir le même décalage.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Notification")]),this._v(" et "),t("code",[this._v("this.$notify")]),this._v(" retourne l'instance actuelle de Notification. Pour fermer chaque instance manuellement, appelez la méthode "),t("code",[this._v("close")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("close")]),t("td",[this._v("Ferme la notification.")])])])])}],!1,null,null,null);t.default=i.exports},780:function(e,t,n){"use strict";n.r(t);var a={name:"component-doc",components:{"element-demo0":(Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e})({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-page-header",{attrs:{content:"detail"},on:{back:this.goBack}})],1)},staticRenderFns:[]},{methods:{goBack:function(){console.log("go back")}}})}},l=n(0),r=Object(l.a)(a,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si le chemin de la page est simple, il est recommandé d’utiliser PageHeader au lieu de Breadcrumb.")]),e._m(1),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-page-header @back="goBack" content="detail">\n</el-page-header>\n\n<script>\n  export default {\n    methods: {\n      goBack() {\n        console.log(\'go back\');\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pageheader"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pageheader","aria-hidden":"true"}},[this._v("¶")]),this._v(" PageHeader")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("titre principal")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Back")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("contenu")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Event Name")]),t("th",[this._v("Description")]),t("th",[this._v("Parameters")])])]),t("tbody",[t("tr",[t("td",[this._v("back")]),t("td",[this._v("se déclenche lorsque vous cliquez sur le côté droit")]),t("td",[this._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("slot")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("title")]),t("td",[this._v("contenu du titre")])]),t("tr",[t("td",[this._v("content")]),t("td",[this._v("contenu")])])])])}],!1,null,null,null);t.default=r.exports},781:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez quelques pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),this._v(" "),t("div",{staticClass:"block"},[t("span",{staticClass:"demonstration"},[this._v("Quand vous avez plus que 7 pages")]),this._v(" "),t("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{"page-size":20,"pager-count":11,layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{background:"",layout:"prev, pager, next",total:1e3}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Total d'entrées")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage1=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Changement de taille de la page")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage2=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Aller à")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage3=e}}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tous en même temps")]),t._v(" "),n("el-pagination",{attrs:{"current-page":t.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":t.handleSizeChange,"current-change":t.handleCurrentChange,"update:currentPage":function(e){t.currentPage4=e}}})],1)]],2)},staticRenderFns:[]},{methods:{handleSizeChange:function(e){console.log(e+" items per page")},handleCurrentChange:function(e){console.log("current page: "+e)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",[n("el-switch",{model:{value:t.value,callback:function(e){t.value=e},expression:"value"}}),t._v(" "),n("el-pagination",{attrs:{"hide-on-single-page":t.value,total:5,layout:"prev, pager, next"}})],1)])},staticRenderFns:[]},{data:function(){return{value:!1}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Si vous avez beaucoup de données à afficher sur une seule page, il est préférable d'utiliser une pagination.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Configurez "),n("code",[e._v("layout")]),e._v(" avec les différent éléments de pagination que vous souhaitez, séparés par des virgules. Les éléments possibles sont: "),n("code",[e._v("prev")]),e._v(" (pour aller vers la page précédente), "),n("code",[e._v("next")]),e._v(" (pour aller vers la page suivante), "),n("code",[e._v("pager")]),e._v(" (liste des pages), "),n("code",[e._v("jumper")]),e._v(" (un champ pour aller directement à une page précise), "),n("code",[e._v("total")]),e._v(" (Le nombre total d'entrées), "),n("code",[e._v("size")]),e._v(" (un sélecteur qui détermine la taille de la page) et "),n("code",[e._v("->")]),e._v("(chaque élément après celui-ci sera poussé vers la droite).")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Quand vous avez quelques pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">Quand vous avez plus que 7 pages</span>\n  <el-pagination\n    layout="prev, pager, next"\n    :total="1000">\n  </el-pagination>\n</div>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Pagination réduit les boutons lorsqu'il y a plus de 7 pages. Ce nombre est configurable avec l'attribut "),n("code",[e._v("pager-count")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  :page-size="20"\n  :pager-count="11"\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("background")]),e._v(" pour change la couleur de fond des boutons.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  background\n  layout="prev, pager, next"\n  :total="1000">\n</el-pagination>\n')])])])],2),e._m(4),n("p",[e._v("Utilisez une pagination de taille réduite si vous manquez d'espace.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("small")]),e._v(" et la pagination sera de taille réduite.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-pagination\n  small\n  layout="prev, pager, next"\n  :total="50">\n</el-pagination>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez ajouter plus de modules suivant vos besoins.")]),n("demo-block",[n("div",[n("p",[e._v("Cet exemple contient un use-case complet. Il utilise les évènements "),n("code",[e._v("size-change")]),e._v(" et "),n("code",[e._v("current-change")]),e._v(" pour gérer la taille de la page et son changement. "),n("code",[e._v("page-sizes")]),e._v(" accepte un tableau d'entiers, chacun représentant une taille dans les options de "),n("code",[e._v("sizes")]),e._v(", e.g. "),n("code",[e._v("[100, 200, 300, 400]")]),e._v(" indique que le sélecteur aura quatre options: 100, 200, 300 ou 400 entrées par page.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Total d\'entrées</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage1"\n      :page-size="100"\n      layout="total, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Changement de taille de la page</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage2"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="sizes, prev, pager, next"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Aller à</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage3"\n      :page-size="100"\n      layout="prev, pager, next, jumper"\n      :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tous en même temps</span>\n    <el-pagination\n      @size-change="handleSizeChange"\n      @current-change="handleCurrentChange"\n      :current-page.sync="currentPage4"\n      :page-sizes="[100, 200, 300, 400]"\n      :page-size="100"\n      layout="total, sizes, prev, pager, next, jumper"\n      :total="400">\n    </el-pagination>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleSizeChange(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div>\n <el-switch v-model="value">\n </el-switch>\n <el-pagination\n  :hide-on-single-page="value"\n  :total="5"\n  layout="prev, pager, next">\n</el-pagination>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: false\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"nombre-de-pages"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#nombre-de-pages","aria-hidden":"true"}},[this._v("¶")]),this._v(" Nombre de pages")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"boutons-avec-couleur-de-fond"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#boutons-avec-couleur-de-fond","aria-hidden":"true"}},[this._v("¶")]),this._v(" Boutons avec couleur de fond")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"petite-pagination"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#petite-pagination","aria-hidden":"true"}},[this._v("¶")]),this._v(" Petite pagination")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-elements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-elements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'éléments")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cacher-la-pagination-s-il-n-y-a-qu-une-seule-page"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cacher-la-pagination-s-il-n-y-a-qu-une-seule-page","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cacher la pagination s'il n'y a qu'une seule page")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Lorsqu'il n'y a qu'une seule page, il est possible de cacher la pagination avec l'attribut "),t("code",[this._v("hide-on-single-page")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("small")]),n("td",[e._v("Si la pagination doit être petite.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("background")]),n("td",[e._v("Si les boutons doivent avoir une couleur de fond.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("page-size")]),n("td",[e._v("Nombre d'entrées sur chaque page, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("10")])]),n("tr",[n("td",[e._v("total")]),n("td",[e._v("Nombre total d'entrées.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("page-count")]),n("td",[e._v("Nombre de pages. Réglez "),n("code",[e._v("total")]),e._v(" ou "),n("code",[e._v("page-count")]),e._v(" et le nombre de pages sera affiché; si vous avez besoin de "),n("code",[e._v("page-sizes")]),e._v(", "),n("code",[e._v("total")]),e._v(" est requis.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("pager-count")]),n("td",[e._v("Nombre de sélecteurs de pages. Pagination se réduit lorsque le nombre de pages dépasse cette valeur.")]),n("td",[e._v("number")]),n("td",[e._v("Nombre impair entre 5 et 21.")]),n("td",[e._v("7")])]),n("tr",[n("td",[e._v("current-page")]),n("td",[e._v("Le numéro de page courant, supporte le modificateur .sync.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("layout")]),n("td",[e._v("L'ensemble des éléments de la pagination, séparés par des virgules.")]),n("td",[e._v("string")]),n("td",[n("code",[e._v("sizes")]),e._v(", "),n("code",[e._v("prev")]),e._v(", "),n("code",[e._v("pager")]),e._v(", "),n("code",[e._v("next")]),e._v(", "),n("code",[e._v("jumper")]),e._v(", "),n("code",[e._v("->")]),e._v(", "),n("code",[e._v("total")]),e._v(", "),n("code",[e._v("slot")])]),n("td",[e._v("'prev, pager, next, jumper, ->, total'")])]),n("tr",[n("td",[e._v("page-sizes")]),n("td",[e._v("Options pour la taille des pages.")]),n("td",[e._v("number[]")]),n("td",[e._v("—")]),n("td",[e._v("[10, 20, 30, 40, 50, 100]")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu de sélection de la taille des pages.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prev-text")]),n("td",[e._v("Texte du bouton prev.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("next-text")]),n("td",[e._v("Texte du bouton next.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si la pagination est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hide-on-single-page")]),n("td",[e._v("Si la pagination doit être cachée quand il n'y a qu'une seule page.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("size-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("page-size")]),e._v(" change.")]),n("td",[e._v("La nouvelle taille.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand "),n("code",[e._v("current-page")]),e._v(" change.")]),n("td",[e._v("La nouvelle page courante")])]),n("tr",[n("td",[e._v("prev-click")]),n("td",[e._v("Se déclenche quand le bouton prev est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])]),n("tr",[n("td",[e._v("next-click")]),n("td",[e._v("Se déclenche quand le bouton next est cliqué et que la page courante change.")]),n("td",[e._v("La nouvelle page courante.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Contenu personnalisé. Pour l'utiliser vous devez déclarer "),n("code",[e._v("slot")]),e._v(" dans "),n("code",[e._v("layout")]),e._v(".")])])])])}],!1,null,null,null);t.default=i.exports},782:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-popconfirm",{attrs:{title:"Are you sure to delete this?"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("Delete")])],1)]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-popconfirm",{attrs:{"confirm-button-text":"OK","cancel-button-text":"No, Thanks",icon:"el-icon-info","icon-color":"red",title:"Are you sure to delete this?"}},[t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("Delete")])],1)]],2)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("A simple confirmation dialog of an element click action.")]),e._m(1),n("p",[e._v("Popconfirm is similar to Popover. So for some duplicated attributes, please refer to the documentation of Popover.")]),n("demo-block",[n("div",[n("p",[e._v("Only "),n("code",[e._v("title")]),e._v(" attribute is avaliable in Popconfirm, "),n("code",[e._v("content")]),e._v(" will be ignored.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n<el-popconfirm\n  title="Are you sure to delete this?"\n>\n  <el-button slot="reference">Delete</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(2),n("p",[e._v("You can customise Popconfirm like:")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n<el-popconfirm\n  confirm-button-text=\'OK\'\n  cancel-button-text=\'No, Thanks\'\n  icon="el-icon-info"\n  icon-color="red"\n  title="Are you sure to delete this?"\n>\n  <el-button slot="reference">Delete</el-button>\n</el-popconfirm>\n</template>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popconfirm"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popconfirm","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popconfirm")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customise")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Title")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirm-button-text")]),n("td",[e._v("Confirm button text")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cancel-button-text")]),n("td",[e._v("Cancel button text")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("confirm-button-type")]),n("td",[e._v("Confirm button type")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Primary")])]),n("tr",[n("td",[e._v("cancel-button-type")]),n("td",[e._v("Cancel button type")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Text")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Icon")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-question")])]),n("tr",[n("td",[e._v("icon-color")]),n("td",[e._v("Icon color")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("#f90")])]),n("tr",[n("td",[e._v("hide-icon")]),n("td",[e._v("is hide Icon")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("reference")]),t("td",[this._v("HTML element that triggers Popconfirm")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event Name")]),n("th",[e._v("Description")]),n("th",[e._v("Parameters")])])]),n("tbody",[n("tr",[n("td",[e._v("confirm")]),n("td",[e._v("triggers when click confirm button")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cancel")]),n("td",[e._v("triggers when click cancel button")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},783:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-popover",{attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active au passage du curseur")])],1),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}},[n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("S'active en cliquant")])],1),t._v(" "),n("el-popover",{ref:"popover",attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}}),t._v(" "),n("el-button",{directives:[{name:"popover",rawName:"v-popover:popover",arg:"popover"}]},[t._v("S'active au focus")]),t._v(" "),n("el-popover",{attrs:{placement:"bottom",title:"Title",width:"200",trigger:"manual",content:"this is content, this is content, this is content"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("el-button",{attrs:{slot:"reference"},on:{click:function(e){t.visible=!t.visible}},slot:"reference"},[t._v("S'active manuellement")])],1)]],2)},staticRenderFns:[]},{data:function(){return{visible:!1}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-popover",{attrs:{placement:"right",width:"400",trigger:"click"}},[t("el-table",{attrs:{data:this.gridData}},[t("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),this._v(" "),t("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),this._v(" "),t("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1),this._v(" "),t("el-button",{attrs:{slot:"reference"},slot:"reference"},[this._v("Cliquez pour activer")])],1)],1)},staticRenderFns:[]},{data:function(){return{gridData:[{date:"2016-05-02",name:"Jack",address:"New York City"},{date:"2016-05-04",name:"Jack",address:"New York City"},{date:"2016-05-01",name:"Jack",address:"New York City"},{date:"2016-05-03",name:"Jack",address:"New York City"}]}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-popover",{attrs:{placement:"top",width:"160"},model:{value:t.visible,callback:function(e){t.visible=e},expression:"visible"}},[n("p",[t._v("Voulez-vous vraiment supprimer ceci?")]),t._v(" "),n("div",{staticStyle:{"text-align":"right",margin:"0"}},[n("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(e){t.visible=!1}}},[t._v("Annuler")]),t._v(" "),n("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(e){t.visible=!1}}},[t._v("Confirmer")])],1),t._v(" "),n("el-button",{attrs:{slot:"reference"},slot:"reference"},[t._v("Supprimer")])],1)],1)},staticRenderFns:[]},{data:function(){return{visible:!1}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("trigger")]),e._v(" détermine comment le popover se déclenche: "),n("code",[e._v("hover")]),e._v(", "),n("code",[e._v("click")]),e._v(", "),n("code",[e._v("focus")]),e._v(" ou "),n("code",[e._v("manual")]),e._v(". Concernant l'élément déclencheur, vous pouvez l'écrire de deux manières: en utilisant le slot "),n("code",[e._v('slot="reference"')]),e._v(" ou bien la directive "),n("code",[e._v("v-popover")]),e._v(" avec "),n("code",[e._v("ref")]),e._v(" égal à popover.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-popover\n    placement="top-start"\n    title="Title"\n    width="200"\n    trigger="hover"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active au passage du curseur</el-button>\n  </el-popover>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="click"\n    content="this is content, this is content, this is content">\n    <el-button slot="reference">S\'active en cliquant</el-button>\n  </el-popover>\n\n  <el-popover\n    ref="popover"\n    placement="right"\n    title="Title"\n    width="200"\n    trigger="focus"\n    content="this is content, this is content, this is content">\n  </el-popover>\n  <el-button v-popover:popover>S\'active au focus</el-button>\n\n  <el-popover\n    placement="bottom"\n    title="Title"\n    width="200"\n    trigger="manual"\n    content="this is content, this is content, this is content"\n    v-model="visible">\n    <el-button slot="reference" @click="visible = !visible">S\'active manuellement</el-button>\n  </el-popover>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("D'autres composants peuvent s'imbriquer dans un popover.")]),n("demo-block",[n("div",[n("p",[e._v("Remplacez "),n("code",[e._v("content")]),e._v(" par un "),n("code",[e._v("slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="right"\n  width="400"\n  trigger="click">\n  <el-table :data="gridData">\n    <el-table-column width="150" property="date" label="date"></el-table-column>\n    <el-table-column width="100" property="name" label="name"></el-table-column>\n    <el-table-column width="300" property="address" label="address"></el-table-column>\n  </el-table>\n  <el-button slot="reference">Cliquez pour activer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: \'2016-05-02\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }, {\n          date: \'2016-05-03\',\n          name: \'Jack\',\n          address: \'New York City\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez aussi imbriquer des opérations. Procéder ainsi est plus léger que d'utiliser Dialog.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-popover\n  placement="top"\n  width="160"\n  v-model="visible">\n  <p>Voulez-vous vraiment supprimer ceci?</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible = false">Annuler</el-button>\n    <el-button type="primary" size="mini" @click="visible = false">Confirmer</el-button>\n  </div>\n  <el-button slot="reference">Supprimer</el-button>\n</el-popover>\n\n<script>\n  export default {\n    data() {\n      return {\n        visible: false,\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"popover"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[this._v("¶")]),this._v(" Popover")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Similaire à Tooltip, Popover est aussi construit avec "),t("code",[this._v("Vue-popper")]),this._v(". Certains attributs sont donc les mêmes, vous pourrez vous référer à la documentation de Tooltip pour certains d'entre eux.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"informations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#informations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Informations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"operations-imbriquees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#operations-imbriquees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Opérations imbriquées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("trigger")]),n("td",[e._v("Comment le popover se déclenche.")]),n("td",[e._v("string")]),n("td",[e._v("click/focus/hover/manual")]),n("td",[e._v("click")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu du popover, peut être remplacé par un "),n("code",[e._v("slot")])]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du popover.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("Min width 150px")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Emplacement du popover.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le popover est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Si le popover est visible.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du popover.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée ou non. Pour plus d'informations, référez-vous à "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres pour "),n("a",{attrs:{href:"https://popper.js.org/docs/v2/"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("object")]),n("td",[e._v("Référez-vous à "),n("a",{attrs:{href:"https://popper.js.org/docs/v2/"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popover.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai d'affichage, lorsque "),n("code",[e._v("trigger")]),e._v(" est 'hover', en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close-delay")]),n("td",[e._v("delay before disappearing when "),n("code",[e._v("trigger")]),e._v(" is hover, in milliseconds")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("200")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex"}},[e._v("tabindex")]),e._v(" de Popover")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu du popover.")])]),t("tr",[t("td",[this._v("reference")]),t("td",[this._v("Element HTML qui déclenche le popover.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("show")]),n("td",[e._v("Se déclenche quand le popover s'affiche.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-enter")]),n("td",[e._v("Se déclenche quand la transition d'entrée se termine.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide")]),n("td",[e._v("Se déclenche quand le popover disparaît.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("after-leave")]),n("td",[e._v("Se déclenche quand la transition de sortie se termine.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},784:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{percentage:50}}),this._v(" "),t("el-progress",{attrs:{percentage:100,format:this.format}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{percentage:100,status:"warning"}}),this._v(" "),t("el-progress",{attrs:{percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{methods:{format:function(e){return 100===e?"Full":e+"%"}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{"text-inside":!0,"stroke-width":26,percentage:70}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":24,percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":22,percentage:80,status:"warning"}}),this._v(" "),t("el-progress",{attrs:{"text-inside":!0,"stroke-width":20,percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-progress",{attrs:{percentage:e.percentage,color:e.customColor}}),e._v(" "),n("el-progress",{attrs:{percentage:e.percentage,color:e.customColorMethod}}),e._v(" "),n("el-progress",{attrs:{percentage:e.percentage,color:e.customColors}}),e._v(" "),n("div",[n("el-button-group",[n("el-button",{attrs:{icon:"el-icon-minus"},on:{click:e.decrease}}),e._v(" "),n("el-button",{attrs:{icon:"el-icon-plus"},on:{click:e.increase}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{percentage:20,customColor:"#409eff",customColors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{customColorMethod:function(e){return e<30?"#909399":e<70?"#e6a23c":"#67c23a"},increase:function(){this.percentage+=10,100<this.percentage&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"circle",percentage:0}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:25}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:70,status:"warning"}}),this._v(" "),t("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-progress",{attrs:{type:"dashboard",percentage:this.percentage,color:this.colors}}),this._v(" "),t("div",[t("el-button-group",[t("el-button",{attrs:{icon:"el-icon-minus"},on:{click:this.decrease}}),this._v(" "),t("el-button",{attrs:{icon:"el-icon-plus"},on:{click:this.increase}})],1)],1)],1)},staticRenderFns:[]},{data:function(){return{percentage:10,colors:[{color:"#f56c6c",percentage:20},{color:"#e6a23c",percentage:40},{color:"#5cb87a",percentage:60},{color:"#1989fa",percentage:80},{color:"#6f7ad3",percentage:100}]}},methods:{increase:function(){this.percentage+=10,100<this.percentage&&(this.percentage=100)},decrease:function(){this.percentage-=10,this.percentage<0&&(this.percentage=0)}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("percentage")]),e._v(" pour indiquer le pourcentage. Cet attribut est "),n("strong",[e._v("requis")]),e._v(" et doit être compris entre 0 et 100. Vous pouvez personnaliser le format du texte en définissant le "),n("code",[e._v("format")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="50"></el-progress>\n<el-progress :percentage="100" :format="format"></el-progress>\n<el-progress :percentage="100" status="success"></el-progress>\n<el-progress :percentage="100" status="warning"></el-progress>\n<el-progress :percentage="50" status="exception"></el-progress>\n\n<script>\n  export default {\n    methods: {\n      format(percentage) {\n        return percentage === 100 ? \'Full\' : `${percentage}%`;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Dans ce cas le pourcentage ne prends pas de place en plus.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stroke-width")]),e._v(" détermine le "),n("code",[e._v("width")]),e._v(" de la barre de progression. Utilisez "),n("code",[e._v("text-inside")]),e._v(" mettre la description à l'intérieur de la barre.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>\n<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>\n<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>\n<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress :percentage="percentage" :color="customColor"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>\n\n<el-progress :percentage="percentage" :color="customColors"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon="el-icon-minus" @click="decrease"></el-button>\n    <el-button icon="el-icon-plus" @click="increase"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 20,\n        customColor: \'#409eff\',\n        customColors: [\n          {color: \'#f56c6c\', percentage: 20},\n          {color: \'#e6a23c\', percentage: 40},\n          {color: \'#5cb87a\', percentage: 60},\n          {color: \'#1989fa\', percentage: 80},\n          {color: \'#6f7ad3\', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      customColorMethod(percentage) {\n        if (percentage < 30) {\n          return \'#909399\';\n        } else if (percentage < 70) {\n          return \'#e6a23c\';\n        } else {\n          return \'#67c23a\';\n        }\n      },\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez mettre l'attribut "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("circle")]),e._v(" pour obtenir une barre circulaire, et utiliser "),n("code",[e._v("width")]),e._v(" pour changer la taille du cercle.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></el-progress>\n<el-progress type="circle" :percentage="100" status="success"></el-progress>\n<el-progress type="circle" :percentage="70" status="warning"></el-progress>\n<el-progress type="circle" :percentage="50" status="exception"></el-progress>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>\n<div>\n  <el-button-group>\n    <el-button icon="el-icon-minus" @click="decrease"></el-button>\n    <el-button icon="el-icon-plus" @click="increase"></el-button>\n  </el-button-group>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        percentage: 10,\n        colors: [\n          {color: \'#f56c6c\', percentage: 20},\n          {color: \'#e6a23c\', percentage: 40},\n          {color: \'#5cb87a\', percentage: 60},\n          {color: \'#1989fa\', percentage: 80},\n          {color: \'#6f7ad3\', percentage: 100}\n        ]\n      };\n    },\n    methods: {\n      increase() {\n        this.percentage += 10;\n        if (this.percentage > 100) {\n          this.percentage = 100;\n        }\n      },\n      decrease() {\n        this.percentage -= 10;\n        if (this.percentage < 0) {\n          this.percentage = 0;\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"progress"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[this._v("¶")]),this._v(" Progress")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-lineaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-lineaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression linéaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"pourcentage-interne"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#pourcentage-interne","aria-hidden":"true"}},[this._v("¶")]),this._v(" Pourcentage interne")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"couleur-personnalisee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#couleur-personnalisee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Couleur personnalisée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser l'attribut "),t("code",[this._v("color")]),this._v(" pour définir la couleur de la barre de progression. il accepte une couleur, une fonction ou un tableau.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-circulaire"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-circulaire","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression circulaire")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-de-progression-du-tableau-de-bord"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-de-progression-du-tableau-de-bord","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre de progression du tableau de bord")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez également spécifier l'attribut "),t("code",[this._v("type")]),this._v(" de "),t("code",[this._v("dashboard")]),this._v(" pour utiliser la barre de progression du tableau de bord.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[n("strong",[e._v("percentage")])]),n("td",[e._v("Le pourcentage, "),n("strong",[e._v("requis")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("0-100")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de barre.")]),n("td",[e._v("string")]),n("td",[e._v("line/circle/dashboard")]),n("td",[e._v("line")])]),n("tr",[n("td",[e._v("stroke-width")]),n("td",[e._v("La largeur de la barre.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("6")])]),n("tr",[n("td",[e._v("text-inside")]),n("td",[e._v("Si le pourcentage doit être à l'intérieur de la barre, ne marche que si "),n("code",[e._v("type")]),e._v(" est 'line'.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel de la progression.")]),n("td",[e._v("string")]),n("td",[e._v("success/exception/text")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fon de la barre. Écrase "),n("code",[e._v("status")]),e._v(".")]),n("td",[e._v("string/function/array")]),n("td",[e._v("—")]),n("td",[e._v("''")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("La largeur du canvas dans le cas d'une barre circulaire.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("126")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si le pourcentage doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("stroke-linecap")]),n("td",[e._v("circle/dashboard type shape at the end path")]),n("td",[e._v("string")]),n("td",[e._v("butt/round/square")]),n("td",[e._v("round")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Vous pouvez personnaliser le format du texte en définissant le format")]),n("td",[e._v("function(percentage)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},785:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{label:"1"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"1"}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[t._v("Option B")])]],2)},staticRenderFns:[]},{data:function(){return{radio:"selected and disabled"}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-radio-group",{model:{value:t.radio,callback:function(e){t.radio=e},expression:"radio"}},[n("el-radio",{attrs:{label:3}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:6}},[t._v("Option B")]),t._v(" "),n("el-radio",{attrs:{label:9}},[t._v("Option C")])],1)],1)},staticRenderFns:[]},{data:function(){return{radio:3}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio-group",{model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington",disabled:""}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{disabled:"",size:"mini"},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio-button",{attrs:{label:"New York"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Washington"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Los Angeles"}}),t._v(" "),n("el-radio-button",{attrs:{label:"Chicago"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"New York",radio2:"New York",radio3:"New York",radio4:"New York"}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-radio",{attrs:{label:"1",border:""},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""},model:{value:t.radio1,callback:function(e){t.radio1=e},expression:"radio1"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio",{attrs:{label:"1",border:"",size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",size:"medium"},model:{value:t.radio2,callback:function(e){t.radio2=e},expression:"radio2"}},[t._v("Option B")])],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"small"},model:{value:t.radio3,callback:function(e){t.radio3=e},expression:"radio3"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:"",disabled:""}},[t._v("Option B")])],1)],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-radio-group",{attrs:{size:"mini",disabled:""},model:{value:t.radio4,callback:function(e){t.radio4=e},expression:"radio4"}},[n("el-radio",{attrs:{label:"1",border:""}},[t._v("Option A")]),t._v(" "),n("el-radio",{attrs:{label:"2",border:""}},[t._v("Option B")])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{radio1:"1",radio2:"1",radio3:"1",radio4:"1"}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Boutons de sélection entre plusieurs options.")]),e._m(1),n("p",[e._v("Radio ne devrait pas avoir trop d'options. Dans ce cas utilisez plutôt Select.")]),n("demo-block",[n("div",[n("p",[e._v("Créer un composant Radio est facile, vous avez juste besoin de lier les "),n("code",[e._v("v-model")]),e._v(" des options. Chacun équivaut à la valeur de "),n("code",[e._v("label")]),e._v(" du radio correspondant. Le type de "),n("code",[e._v("label")]),e._v(" est "),n("code",[e._v("String")]),e._v(", "),n("code",[e._v("Number")]),e._v(" ou "),n("code",[e._v("Boolean")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio v-model="radio" label="1">Option A</el-radio>\n  <el-radio v-model="radio" label="2">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Ajoutez simplement l'attribut "),n("code",[e._v("disabled")]),e._v(" au radio.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio disabled v-model="radio" label="disabled">Option A</el-radio>\n  <el-radio disabled v-model="radio" label="selected and disabled">Option B</el-radio>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: \'selected and disabled\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Utile pour choisir entre plusieurs groupes d'options mutuellement exclusives.")]),n("demo-block",[n("div",[n("p",[e._v("Combinez "),n("code",[e._v("el-radio-group")]),e._v(" avec "),n("code",[e._v("el-radio")]),e._v(" pour afficher un groupe de radios. Liez une variable au "),n("code",[e._v("v-model")]),e._v(" de "),n("code",[e._v("el-radio-group")]),e._v(" et configurez le label dans "),n("code",[e._v("el-radio")]),e._v(". Cet élément fournit aussi l'évènement "),n("code",[e._v("change")]),e._v(" qui a en paramètre la valeur courante.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-radio-group v-model="radio">\n  <el-radio :label="3">Option A</el-radio>\n  <el-radio :label="6">Option B</el-radio>\n  <el-radio :label="9">Option C</el-radio>\n</el-radio-group>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio: 3\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("Des radios affichés comme des boutons standards.")]),n("demo-block",[n("div",[n("p",[e._v("Changez simplement "),n("code",[e._v("el-radio")]),e._v(" pour "),n("code",[e._v("el-radio-button")]),e._v(". L'attribut "),n("code",[e._v("size")]),e._v(" permet de régler la taille.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio-group v-model="radio1">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio2" size="medium">\n      <el-radio-button label="New York" ></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio3" size="small">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington" disabled ></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" disabled size="mini">\n      <el-radio-button label="New York"></el-radio-button>\n      <el-radio-button label="Washington"></el-radio-button>\n      <el-radio-button label="Los Angeles"></el-radio-button>\n      <el-radio-button label="Chicago"></el-radio-button>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'New York\',\n        radio2: \'New York\',\n        radio3: \'New York\',\n        radio4: \'New York\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("border")]),e._v(" ajoute une bordure aux radios.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-radio v-model="radio1" label="1" border>Option A</el-radio>\n    <el-radio v-model="radio1" label="2" border>Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio v-model="radio2" label="1" border size="medium">Option A</el-radio>\n    <el-radio v-model="radio2" label="2" border size="medium">Option B</el-radio>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio3" size="small">\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border disabled>Option B</el-radio>\n    </el-radio-group>\n  </div>\n  <div style="margin-top: 20px">\n    <el-radio-group v-model="radio4" size="mini" disabled>\n      <el-radio label="1" border>Option A</el-radio>\n      <el-radio label="2" border>Option B</el-radio>\n    </el-radio-group>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        radio1: \'1\',\n        radio2: \'1\',\n        radio3: \'1\',\n        radio4: \'1\'\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("L'attribut "),t("code",[this._v("disabled")]),this._v(" désactive le radio.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"groupe-de-boutons-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#groupe-de-boutons-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Groupe de boutons radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-bouton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-bouton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style bouton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-bordures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-bordures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec bordures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("La valeur du radio.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si une bordure doit être affichée autour du radio.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du radio, ne marche que si "),n("code",[e._v("border")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Radio-group")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("string / number / boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille des radios.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les radios sont désactivés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#ffffff")])]),n("tr",[n("td",[e._v("fill")]),n("td",[e._v("Bordure et couleur de fond quand le bouton est actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-radio-group"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-radio-group","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Radio-group")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur du label.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-radio-button"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-radio-button","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs Radio-button")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Valeur du radio.")]),n("td",[e._v("string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le radio est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut 'name' natif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},786:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Défaut")]),t._v(" "),n("el-rate",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Couleurs pour chaque niveau")]),t._v(" "),n("el-rate",{attrs:{colors:t.colors},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)])},staticRenderFns:[]},{data:function(){return{value1:null,value2:null,colors:["#99A9BF","#F7BA2A","#FF9900"]}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{"icon-classes":t.iconClasses,"void-icon-class":"icon-rate-face-off",colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:null,iconClasses:["icon-rate-face-1","icon-rate-face-2","icon-rate-face-3"]}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-rate",{attrs:{disabled:"","show-score":"","text-color":"#ff9900","score-template":"{value} points"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:3.7}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utilisé pour donner une note sur cinq étoiles.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Rate divise les scores en trois niveaux et ces niveaux peuvent être distingués en utilisant différentes couleurs de fond. Par défaut ces couleurs sont identiques, mais vous pouvez affecter un tableau des codes couleur à l'attribut "),n("code",[e._v("colors")]),e._v(", ainsi que les deux seuils via "),n("code",[e._v("low-threshold")]),e._v(" et "),n("code",[e._v("high-threshold")]),e._v(". Vous pouvez aussi les affecter avec un objet dont la clé est le seuil et la valeur est la couleur correspondante.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <span class="demonstration">Défaut</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">Couleurs pour chaque niveau</span>\n  <el-rate\n    v-model="value2"\n    :colors="colors">\n  </el-rate>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: null,\n        value2: null,\n        colors: [\'#99A9BF\', \'#F7BA2A\', \'#FF9900\'] // same as { 2: \'#99A9BF\', 4: { value: \'#F7BA2A\', excluded: true }, 5: \'#FF9900\' }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez ajouter du texte à chaque score.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-text")]),e._v(" pour afficher du texte à droite des étoiles. Vous pouvez choisir les textes avec l'attribut "),n("code",[e._v("texts")]),e._v(". C'est un tableau dont la taille doit être égale au score max "),n("code",[e._v("max")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value\"\n  :texts=\"['oops', 'disappointed', 'normal', 'good', 'great']\"\n  show-text>\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez utiliser différentes icônes pour chaque")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser les icônes en passant à "),n("code",[e._v("icon-classes")]),e._v(" un tableau avec trois éléments ou un objet dont la clé est le seuil entre deux niveaux et la valeur la classe d'icônes correspondante. Dans cet exemple, nous utilisons aussi "),n("code",[e._v("void-icon-class")]),e._v(" qui permet de choisir d'autres valeurs non sélectionnées.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-rate\n  v-model=\"value\"\n  :icon-classes=\"iconClasses\"\n  void-icon-class=\"icon-rate-face-off\"\n  :colors=\"['#99A9BF', '#F7BA2A', '#FF9900']\">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: null,\n        iconClasses: ['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3'] // same as { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }\n      }\n  }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Le score peut être en lecture seule. Les demi-étoiles sont supportées.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("disabled")]),e._v(" pour mettre le composant en lecture seule. Ajoutez "),n("code",[e._v("show-score")]),e._v(" pour afficher le score à droite des étoiles. De plus, vous pouvez utiliser "),n("code",[e._v("score-template")]),e._v(" pour déterminer un template. Il doit contenir "),n("code",[e._v("{value}")]),e._v(" qui sera remplacé par la valeur du score.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-rate\n  v-model="value"\n  disabled\n  show-score\n  text-color="#ff9900"\n  score-template="{value} points">\n</el-rate>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 3.7\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"rate"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rate")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avec-du-texte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avec-du-texte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avec du texte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-d-icones"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-d-icones","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus d'icônes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"lecture-seule"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#lecture-seule","aria-hidden":"true"}},[this._v("¶")]),this._v(" Lecture seule")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Score maximum.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("5")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le score est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-half")]),n("td",[e._v("Si les demi-étoiles sont autorisées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("low-threshold")]),n("td",[e._v("Seuil entre les niveaux bas et moyen. La valeur sera incluse dans le niveau bas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("2")])]),n("tr",[n("td",[e._v("high-threshold")]),n("td",[e._v("Seuil entre les niveaux moyen et haut. La valeur sera incluse entre dans le niveau haut.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("colors")]),n("td",[e._v("colors for icons. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est la couleur correspondante.")]),n("td",[e._v("array/object")]),n("td",[e._v("—")]),n("td",[e._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),n("tr",[n("td",[e._v("void-color")]),n("td",[e._v("Couleur des icônes non sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C6D1DE")])]),n("tr",[n("td",[e._v("disabled-void-color")]),n("td",[e._v("Couleur des icônes non sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#EFF2F7")])]),n("tr",[n("td",[e._v("icon-classes")]),n("td",[e._v("Noms de classe des icônes. Si c'est un array, il doit avoir 3 élements, chacun correspondant à un niveau. Si c'est un objet, la clé est le seuil entre deux niveaux et la valeur est le nom de classe de l'icône.")]),n("td",[e._v("array/object")]),n("td",[e._v("—")]),n("td",[e._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),n("tr",[n("td",[e._v("void-icon-class")]),n("td",[e._v("Classe des icônes non sélectionnées.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-off")])]),n("tr",[n("td",[e._v("disabled-void-icon-class")]),n("td",[e._v("Classe des icônes non sélectionnées en lecture seule.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-star-on")])]),n("tr",[n("td",[e._v("show-text")]),n("td",[e._v("Si du texte doit apparaître à droite des étoiles.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-score")]),n("td",[e._v("Si le score doit apparaître. Incompatible avec show-text.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("text-color")]),n("td",[e._v("Couleur du texte.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#1F2D3D")])]),n("tr",[n("td",[e._v("texts")]),n("td",[e._v("Label des différents scores.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['极差', '失望', '一般', '满意', '惊喜']")])]),n("tr",[n("td",[e._v("score-template")]),n("td",[e._v("Template du score.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("{value}")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("Valeur après le changement.")])])])])}],!1,null,null,null);t.default=i.exports},787:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-row",[t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"success",title:"Success Tip",subTitle:"Please follow the instructions"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("Back")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"warning",title:"Warning Tip",subTitle:"Please follow the instructions"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("Back")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"error",title:"Error Tip",subTitle:"Please follow the instructions"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("Back")])],1)],2)],1),this._v(" "),t("el-col",{attrs:{sm:12,lg:6}},[t("el-result",{attrs:{icon:"info",title:"Info Tip",subTitle:"Please follow the instructions"}},[t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("Back")])],1)],2)],1)],1)],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-result",{attrs:{title:"404",subTitle:"Sorry, request error"}},[t("template",{slot:"icon"},[t("el-image",{attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}})],1),this._v(" "),t("template",{slot:"extra"},[t("el-button",{attrs:{type:"primary",size:"medium"}},[this._v("Back")])],1)],2)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Used to give feedback on the result of user's operation or access exception.")]),e._m(1),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-row>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n  <el-col :sm="12" :lg="6">\n    <el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">\n      <template slot="extra">\n        <el-button type="primary" size="medium">Back</el-button>\n      </template>\n    </el-result>\n  </el-col>\n</el-row>\n')])])])],2),e._m(2),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-result title="404" subTitle="Sorry, request error">\n  <template slot="icon">\n    <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>\n  </template>\n  <template slot="extra">\n    <el-button type="primary" size="medium">Back</el-button>\n  </template>\n</el-result>\n')])])])],2),e._m(3),e._m(4),e._m(5),e._m(6)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"result"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-content"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-content","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized content")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"result-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Accepted Values")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sub-title")]),n("td",[e._v("sub title")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("icon type")]),n("td",[e._v("string")]),n("td",[e._v("success / warning / info / error")]),n("td",[e._v("info")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"result-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#result-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Result Slots")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Name")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("custom icon")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("custom title")])]),n("tr",[n("td",[e._v("subTitle")]),n("td",[e._v("custom sub title")])]),n("tr",[n("td",[e._v("extra")]),n("td",[e._v("custom  extra area")])])])])}],!1,null,null,null);t.default=i.exports},788:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value,disabled:e.disabled}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2",disabled:!0},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1),t._v(" "),n("el-select",{staticStyle:{"margin-left":"20px"},attrs:{multiple:"","collapse-tags":"",placeholder:"Select"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value1:[],value2:[]}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.cities,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}},[n("span",{staticStyle:{float:"left"}},[t._v(t._s(e.label))]),t._v(" "),n("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[t._v(t._s(e.value))])])}),1)]],2)},staticRenderFns:[]},{data:function(){return{cities:[{value:"Beijing",label:"Beijing"},{value:"Shanghai",label:"Shanghai"},{value:"Nanjing",label:"Nanjing"},{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"}],value:""}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option-group",{key:e.label,attrs:{label:e.label}},t._l(e.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{label:"Villes célèbres",options:[{value:"Shanghai",label:"Shanghai"},{value:"Beijing",label:"Beijing"}]},{label:"Nom de ville",options:[{value:"Chengdu",label:"Chengdu"},{value:"Shenzhen",label:"Shenzhen"},{value:"Guangzhou",label:"Guangzhou"},{value:"Dalian",label:"Dalian"}]}],value:""}}}),"element-demo7":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"Option1",label:"Option1"},{value:"Option2",label:"Option2"},{value:"Option3",label:"Option3"},{value:"Option4",label:"Option4"},{value:"Option5",label:"Option5"}],value:""}}}),"element-demo8":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"",remote:"","reserve-keyword":"",placeholder:"Entrez un mot-clé","remote-method":t.remoteMethod,loading:t.loading},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[],value:[],list:[],loading:!1,states:["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]}},mounted:function(){this.list=this.states.map(function(e){return{value:"value:"+e,label:"label:"+e}})},methods:{remoteMethod:function(t){var e=this;""!==t?(this.loading=!0,setTimeout(function(){e.loading=!1,e.options=e.list.filter(function(e){return-1<e.label.toLowerCase().indexOf(t.toLowerCase())})},200)):this.options=[]}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-select",{attrs:{multiple:"",filterable:"","allow-create":"","default-first-option":"",placeholder:"Choisissez les tags de vos articles"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}},t._l(t.options,function(e){return n("el-option",{key:e.value,attrs:{label:e.label,value:e.value}})}),1)]],2)},staticRenderFns:[]},{data:function(){return{options:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],value:[]}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utile lorsqu'il faut sélectionner des options parmi un large choix, affiché grâce à un menu déroulant.")]),e._m(1),n("demo-block",[n("div",[n("p",[n("code",[e._v("v-model")]),e._v(" est la valeur du "),n("code",[e._v("el-option")]),e._v(" sélectionné.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("disabled")]),e._v(" dans "),n("code",[e._v("el-option")]),e._v(" à "),n("code",[e._v("true")]),e._v(" pour désactiver cette option.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\"\n      :disabled=\"item.disabled\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2',\n          disabled: true\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez désactiver le composant lui-même.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("disabled")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le désactiver.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" disabled placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez ajouter un bouton pour effacer la sélection.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("clearable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" et l'icône de fermeture s'affichera après une sélection. Notez que "),n("code",[e._v("clearable")]),e._v(" ne marche qu'avec les sélecteurs à choix unique.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" clearable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Les sélecteurs multiples utilisent des tags pour afficher les différentes options choisies.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("multiple")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour le changer en sélecteur multiple. La valeur de "),n("code",[e._v("v-model")]),e._v(" devient un tableau contenant toutes les options. Par défaut les différents choix sont affichés sous forme de tags. Vous pouvez réduire leur nombre en utilisant l'attribut "),n("code",[e._v("collapse-tags")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select v-model="value1" multiple placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n\n  <el-select\n    v-model="value2"\n    multiple\n    collapse-tags\n    style="margin-left: 20px;"\n    placeholder="Select">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: \'Option1\',\n          label: \'Option1\'\n        }, {\n          value: \'Option2\',\n          label: \'Option2\'\n        }, {\n          value: \'Option3\',\n          label: \'Option3\'\n        }, {\n          value: \'Option4\',\n          label: \'Option4\'\n        }, {\n          value: \'Option5\',\n          label: \'Option5\'\n        }],\n        value1: [],\n        value2: []\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez définir un template HTML pour l'affichage des options.")]),n("demo-block",[n("div",[n("p",[e._v("Insérez votre template dans le slot de "),n("code",[e._v("el-option")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option\n      v-for=\"item in cities\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n      <span style=\"float: left\">{{ item.label }}</span>\n      <span style=\"float: right; color: #8492a6; font-size: 13px\">{{ item.value }}</span>\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: 'Beijing'\n        }, {\n          value: 'Shanghai',\n          label: 'Shanghai'\n        }, {\n          value: 'Nanjing',\n          label: 'Nanjing'\n        }, {\n          value: 'Chengdu',\n          label: 'Chengdu'\n        }, {\n          value: 'Shenzhen',\n          label: 'Shenzhen'\n        }, {\n          value: 'Guangzhou',\n          label: 'Guangzhou'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Vous pouvez définir des groupes pour les options du menu.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-option-group")]),e._v(" pour grouper les options. L'attribut "),n("code",[e._v("label")]),e._v(" définit le nom du groupe.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" placeholder=\"Select\">\n    <el-option-group\n      v-for=\"group in options\"\n      :key=\"group.label\"\n      :label=\"group.label\">\n      <el-option\n        v-for=\"item in group.options\"\n        :key=\"item.value\"\n        :label=\"item.label\"\n        :value=\"item.value\">\n      </el-option>\n    </el-option-group>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          label: 'Villes célèbres',\n          options: [{\n            value: 'Shanghai',\n            label: 'Shanghai'\n          }, {\n            value: 'Beijing',\n            label: 'Beijing'\n          }]\n        }, {\n          label: 'Nom de ville',\n          options: [{\n            value: 'Chengdu',\n            label: 'Chengdu'\n          }, {\n            value: 'Shenzhen',\n            label: 'Shenzhen'\n          }, {\n            value: 'Guangzhou',\n            label: 'Guangzhou'\n          }, {\n            value: 'Dalian',\n            label: 'Dalian'\n          }]\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Vous pouvez ajouter un mode de filtrage pour trouver les options désirées plus rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" à "),n("code",[e._v("el-select")]),e._v(" pour activer le filtrage. Par défaut, Select cherchera les options dont le "),n("code",[e._v("label")]),e._v(" contient la valeur du filtre. Si vous préférez une autre stratégie de filtrage, utilisez "),n("code",[e._v("filter-method")]),e._v(". C'est une "),n("code",[e._v("Function")]),e._v(" qui est appelée quand la valeur change, avec pour paramètre la valeur courante.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select v-model=\"value\" filterable placeholder=\"Select\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'Option1',\n          label: 'Option1'\n        }, {\n          value: 'Option2',\n          label: 'Option2'\n        }, {\n          value: 'Option3',\n          label: 'Option3'\n        }, {\n          value: 'Option4',\n          label: 'Option4'\n        }, {\n          value: 'Option5',\n          label: 'Option5'\n        }],\n        value: ''\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez aller chercher les options sur le serveur de manière dynamique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez "),n("code",[e._v("filterable")]),e._v(" et "),n("code",[e._v("remote")]),e._v(" pour activer la recherche distante, ainsi que "),n("code",[e._v("remote-method")]),e._v(". Cette dernière est une "),n("code",[e._v("Function")]),e._v(" qui est appelée lorsque la valeur change, avec pour paramètre la valeur courante. Notes que si "),n("code",[e._v("el-option")]),e._v(" est rendu dans une directive "),n("code",[e._v("v-for")]),e._v(", vous devriez ajouter l'attribut "),n("code",[e._v("key")]),e._v(" aux "),n("code",[e._v("el-option")]),e._v(". Cette valeur doit unique, comme "),n("code",[e._v("item.value")]),e._v(" dans l'exemple suivant.")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-select\n    v-model="value"\n    multiple\n    filterable\n    remote\n    reserve-keyword\n    placeholder="Entrez un mot-clé"\n    :remote-method="remoteMethod"\n    :loading="loading">\n    <el-option\n      v-for="item in options"\n      :key="item.value"\n      :label="item.label"\n      :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [],\n        value: [],\n        list: [],\n        loading: false,\n        states: ["Alabama", "Alaska", "Arizona",\n        "Arkansas", "California", "Colorado",\n        "Connecticut", "Delaware", "Florida",\n        "Georgia", "Hawaii", "Idaho", "Illinois",\n        "Indiana", "Iowa", "Kansas", "Kentucky",\n        "Louisiana", "Maine", "Maryland",\n        "Massachusetts", "Michigan", "Minnesota",\n        "Mississippi", "Missouri", "Montana",\n        "Nebraska", "Nevada", "New Hampshire",\n        "New Jersey", "New Mexico", "New York",\n        "North Carolina", "North Dakota", "Ohio",\n        "Oklahoma", "Oregon", "Pennsylvania",\n        "Rhode Island", "South Carolina",\n        "South Dakota", "Tennessee", "Texas",\n        "Utah", "Vermont", "Virginia",\n        "Washington", "West Virginia", "Wisconsin",\n        "Wyoming"]\n      }\n    },\n    mounted() {\n      this.list = this.states.map(item => {\n        return { value: `value:${item}`, label: `label:${item}` };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options = this.list.filter(item => {\n              return item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > -1;\n            });\n          }, 200);\n        } else {\n          this.options = [];\n        }\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(10),n("p",[e._v("Vous pouvez entrer des choix dans le champ de sélection qui ne sont pas incluses dans le menu.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant "),n("code",[e._v("allow-create")]),e._v(", peuvent créer de nouveaux choix en les entrant dans le champ d'input. Cette option ne marche que si "),n("code",[e._v("filterable")]),e._v(" est activé. Cette exemple montre aussi "),n("code",[e._v("default-first-option")]),e._v(", qui permet de sélectionner la première option en pressant Entrée sans avoir à utiliser la souris ou le clavier.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-select\n    v-model=\"value\"\n    multiple\n    filterable\n    allow-create\n    default-first-option\n    placeholder=\"Choisissez les tags de vos articles\">\n    <el-option\n      v-for=\"item in options\"\n      :key=\"item.value\"\n      :label=\"item.label\"\n      :value=\"item.value\">\n    </el-option>\n  </el-select>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'HTML',\n          label: 'HTML'\n        }, {\n          value: 'CSS',\n          label: 'CSS'\n        }, {\n          value: 'JavaScript',\n          label: 'JavaScript'\n        }],\n        value: []\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22),e._m(23)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Select")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"option-desactivee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#option-desactivee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Option désactivée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"effacer-la-selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#effacer-la-selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Effacer la sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage des options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"recherche-a-distance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#recherche-a-distance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Recherche à distance")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"creer-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creer-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Créer des options")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("Si la valeur de Select est un objet, assurez-vous d'utiliser "),t("code",[this._v("value-key")]),this._v(" comme identifiant unique.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si la sélection multiple est activée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le sélecteur est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("value-key")]),n("td",[e._v("Identifiant unique pour la valeur, requis quand la valeur est un objet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("value")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de l'Input.")]),n("td",[e._v("string")]),n("td",[e._v("large/small/mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si la sélection est effaçable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("collapse-tags")]),n("td",[e._v("Si les tags peuvent être réduits, dans le cas d'une sélection multiple.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("multiple-limit")]),n("td",[e._v("Nombre maximum d'options multiples sélectionnable. Pas de limites quand est à 0.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("L'attribut name natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("autocomplete")]),n("td",[e._v("L'attribut autocomplete natif du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("auto-complete")]),n("td",[e._v("@DEPRECATED dans la prochaine version majeure.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("off")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Le placeholder du champ.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Select")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si les options sont filtrables.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-create")]),n("td",[e._v("Si l'utilisateur peut créer des options. Dans ce cas "),n("code",[e._v("filterable")]),e._v(" doit être activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage personnalisée.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("remote")]),n("td",[e._v("Si les options sont chargées dynamiquement depuis le serveur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("remote-method")]),n("td",[e._v("Méthode pour la recherche distante.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("Si le sélecteur est en train de charger des options.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("loading-text")]),n("td",[e._v("Texte à afficher pendant le chargement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Loading")])]),n("tr",[n("td",[e._v("no-match-text")]),n("td",[e._v("Texte à afficher quand le filtrage ne retourne aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No matching data")])]),n("tr",[n("td",[e._v("no-data-text")]),n("td",[e._v("Texte à afficher quand il n'y a aucune option. Vous pouvez aussi utiliser le slot "),n("code",[e._v("empty")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("No data")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu déroulant.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-keyword")]),n("td",[e._v("Quand "),n("code",[e._v("multiple")]),e._v(" et "),n("code",[e._v("filter")]),e._v(" sont activés, s'il faut réserver le mot-clé courant après la sélection d'une option.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-first-option")]),n("td",[e._v("Sélectionne la première option avec Entrée. Utilisable avec "),n("code",[e._v("filterable")]),e._v(" ou "),n("code",[e._v("remote")])]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-append-to-body")]),n("td",[e._v("Si le menu déroulant doit être ajouté au body. Si le positionnement du menu est incorrect, essayez de mettre cette option à "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("automatic-dropdown")]),n("td",[e._v("Pour les sélecteurs non filtrables, détermine si le menu apparaît au focus du champ.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètre")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change.")]),n("td",[e._v("current selected value")])]),n("tr",[n("td",[e._v("visible-change")]),n("td",[e._v("Se déclenche quand le menu apparaît ou disparaît.")]),n("td",[e._v("true quand il apparaît, sinon false .")])]),n("tr",[n("td",[e._v("remove-tag")]),n("td",[e._v("Se déclenche quand un tag est retiré.")]),n("td",[e._v("La valeur du tag retiré.")])]),n("tr",[n("td",[e._v("clear")]),n("td",[e._v("Se déclenche quand le champ est effacé grâce au bouton.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le champ perd le focus.")]),n("td",[e._v("(event: Event)")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche gagne le focus.")]),n("td",[e._v("(event: Event)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-select"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-select","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Select")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("—")]),n("td",[e._v("Liste de options.")])]),n("tr",[n("td",[e._v("prefix")]),n("td",[e._v("Contenu du préfixe du sélecteur.")])]),n("tr",[n("td",[e._v("empty")]),n("td",[e._v("Contenu lorsqu'il n'y a aucune option.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-du-groupe-d-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-du-groupe-d-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs du groupe d'options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Nom du group.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si les options du groupe sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-options"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-options","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des options")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value")]),n("td",[e._v("Valeur de l'option.")]),n("td",[e._v("string/number/object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de l'option, identique à "),n("code",[e._v("value")]),e._v(" si omis.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'option est désactivée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Focus sur l'input.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Enlève le focus de l'input et cache le menu.")]),n("td",[e._v("-")])])])])}],!1,null,null,null);t.default=i.exports},789:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-skeleton")]],2)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6}})],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-skeleton",{attrs:{rows:6,animated:""}})],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-skeleton",{staticStyle:{width:"240px"}},[t("template",{slot:"template"},[t("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),this._v(" "),t("div",{staticStyle:{padding:"14px"}},[t("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"p"}}),this._v(" "),t("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between"}},[t("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),this._v(" "),t("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1)],2)]],2)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"240px"}},[n("p",[n("label",{staticStyle:{"margin-right":"16px"}},[t._v("Switch Loading")]),t._v(" "),n("el-switch",{model:{value:t.loading,callback:function(e){t.loading=e},expression:"loading"}})],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:t.loading,animated:""}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),[n("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v("Delicious hamberger")]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("Operation button")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01"}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"400px"}},[n("p",[n("el-button",{on:{click:t.setLoading}},[t._v("Click me to reload")])],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"400px"},attrs:{loading:t.loading,animated:"",count:3}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"400px",height:"267px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),t._l(t.lists,function(e){return n("el-card",{key:e.name,attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image multi-content",attrs:{src:e.imgUrl}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v("Delicious hamberger")]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("Operation button")])],1)])])})],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!0,currentDate:"2021-06-01",lists:[]}},mounted:function(){this.loading=!1,this.lists=[{imgUrl:"https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",name:"Deer"},{imgUrl:"https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",name:"Horse"},{imgUrl:"https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",name:"Mountain Lion"}]},methods:{setLoading:function(){var e=this;this.loading=!0,setTimeout(function(){return e.loading=!1},2e3)}}}),"element-demo6":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticStyle:{width:"240px"}},[n("p",[n("label",{staticStyle:{"margin-right":"16px"}},[t._v("Switch Loading")]),t._v(" "),n("el-switch",{model:{value:t.loading,callback:function(e){t.loading=e},expression:"loading"}})],1),t._v(" "),n("el-skeleton",{staticStyle:{width:"240px"},attrs:{loading:t.loading,animated:"",throttle:500}},[n("template",{slot:"template"},[n("el-skeleton-item",{staticStyle:{width:"240px",height:"240px"},attrs:{variant:"image"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("el-skeleton-item",{staticStyle:{width:"50%"},attrs:{variant:"h3"}}),t._v(" "),n("div",{staticStyle:{display:"flex","align-items":"center","justify-items":"space-between","margin-top":"16px",height:"16px"}},[n("el-skeleton-item",{staticStyle:{"margin-right":"16px"},attrs:{variant:"text"}}),t._v(" "),n("el-skeleton-item",{staticStyle:{width:"30%"},attrs:{variant:"text"}})],1)],1)],1),t._v(" "),[n("el-card",{attrs:{"body-style":{padding:"0px",marginBottom:"1px"}}},[n("img",{staticClass:"image",attrs:{src:"https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"}}),t._v(" "),n("div",{staticStyle:{padding:"14px"}},[n("span",[t._v("Delicious hamberger")]),t._v(" "),n("div",{staticClass:"bottom card-header"},[n("span",{staticClass:"time"},[t._v(t._s(t.currentDate))]),t._v(" "),n("el-button",{staticClass:"button",attrs:{type:"text"}},[t._v("operation button")])],1)])])]],2)],1)]],2)},staticRenderFns:[]},{data:function(){return{loading:!1,currentDate:"2021-06-01"}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("p",[e._v("The basic skeleton.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-skeleton />\n</template>\n")])])])],2),e._m(3),n("p",[e._v("You can configure the row numbers yourself, we are rendering a title row with 33% width of the others.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-skeleton :rows="6" />\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-skeleton :rows="6" animated />\n')])])])],2),e._m(6),e._m(7),n("p",[e._v("Also we have provided different types skeleton unit that you can choose, for more detailed info, please scroll down to the bottom of this page to see the API description. Also, when building your own customized skeleton structure, you should be structuring them as closer to the real DOM as possible, which avoiding the DOM bouncing caused by the height difference.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-skeleton style="width: 240px">\n    <template slot="template">\n      <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />\n      <div style="padding: 14px;">\n        <el-skeleton-item variant="p" style="width: 50%" />\n        <div\n          style="display: flex; align-items: center; justify-items: space-between;"\n        >\n          <el-skeleton-item variant="text" style="margin-right: 16px;" />\n          <el-skeleton-item variant="text" style="width: 30%;" />\n        </div>\n      </div>\n    </template>\n  </el-skeleton>\n</template>\n')])])])],2),e._m(8),e._m(9),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">Switch Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton style="width: 240px" :loading="loading" animated>\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\' }">\n          <img\n            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data () {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\'\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(10),e._m(11),e._m(12),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 400px">\n    <p>\n      <el-button @click="setLoading">Click me to reload</el-button>\n    </p>\n    <el-skeleton style="width:400px" :loading="loading" animated :count="3">\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 400px; height: 267px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card\n          :body-style="{ padding: \'0px\', marginBottom: \'1px\' }"\n          v-for="item in lists"\n          :key="item.name"\n        >\n          <img :src="item.imgUrl" class="image multi-content" />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">Operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: true,\n        currentDate: \'2021-06-01\',\n        lists: [],\n      }\n    },\n    mounted() {\n      this.loading = false\n      this.lists = [\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg\',\n          name: \'Deer\',\n        },\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg\',\n          name: \'Horse\',\n        },\n        {\n          imgUrl:\n            \'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg\',\n          name: \'Mountain Lion\',\n        },\n      ]\n    },\n    methods: {\n      setLoading() {\n        this.loading = true\n        setTimeout(() => (this.loading = false), 2000)\n      },\n    },\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div style="width: 240px">\n    <p>\n      <label style="margin-right: 16px;">Switch Loading</label>\n      <el-switch v-model="loading" />\n    </p>\n    <el-skeleton\n      style="width: 240px"\n      :loading="loading"\n      animated\n      :throttle="500"\n    >\n      <template slot="template">\n        <el-skeleton-item\n          variant="image"\n          style="width: 240px; height: 240px;"\n        />\n        <div style="padding: 14px;">\n          <el-skeleton-item variant="h3" style="width: 50%;" />\n          <div\n            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"\n          >\n            <el-skeleton-item variant="text" style="margin-right: 16px;" />\n            <el-skeleton-item variant="text" style="width: 30%;" />\n          </div>\n        </div>\n      </template>\n      <template>\n        <el-card :body-style="{ padding: \'0px\', marginBottom: \'1px\'}">\n          <img\n            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"\n            class="image"\n          />\n          <div style="padding: 14px;">\n            <span>Delicious hamberger</span>\n            <div class="bottom card-header">\n              <span class="time">{{ currentDate }}</span>\n              <el-button type="text" class="button">operation button</el-button>\n            </div>\n          </div>\n        </el-card>\n      </template>\n    </el-skeleton>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        loading: false,\n        currentDate: \'2021-06-01\'\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"skeleton"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("When loading data, and you need a rich experience for visual and interactions for your end users, you can choose "),t("code",[this._v("skeleton")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"basic-usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Basic usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"configurable-rows"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#configurable-rows","aria-hidden":"true"}},[this._v("¶")]),this._v(" Configurable Rows")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"animation"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#animation","aria-hidden":"true"}},[this._v("¶")]),this._v(" Animation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("We have provided a switch flag indicating whether showing the loading animation, called "),t("code",[this._v("animated")]),this._v(" when this is true, all children of "),t("code",[this._v("el-skeleton")]),this._v(" will show animation")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"customized-template"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#customized-template","aria-hidden":"true"}},[this._v("¶")]),this._v(" Customized Template")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Element only provides the most common template, sometimes that could be a problem, so you have a slot named "),t("code",[this._v("template")]),this._v(" to do that work.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"loading-state"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#loading-state","aria-hidden":"true"}},[this._v("¶")]),this._v(" Loading state")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("When "),t("code",[this._v("Loading")]),this._v(" ends, we always need to show the real UI with data to our end users. with the attribtue "),t("code",[this._v("loading")]),this._v(" we can control whether showing the DOM. You can also use slot "),t("code",[this._v("default")]),this._v(" to structure the real DOM element.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"rendering-a-list-of-data"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#rendering-a-list-of-data","aria-hidden":"true"}},[this._v("¶")]),this._v(" Rendering a list of data")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Most of the time, skeleton is used as indicators of rendering a list of data which haven't been fetched from server yet, then we need to create a list of skeleton out of no where to make it look like it is loading, with "),t("code",[this._v("count")]),this._v(" attribute, you can control how many these templates you need to render to the browser.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"tip"},[t("p",[this._v("We do not recommend rendering lots of fake UI to the browser, it will still cause the performance issue, it also costs longer to destroy the skeleton. Keep "),t("code",[this._v("count")]),this._v(" as small as it can be to make better user experience.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"avoiding-rendering-bouncing"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#avoiding-rendering-bouncing","aria-hidden":"true"}},[this._v("¶")]),this._v(" Avoiding rendering bouncing.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Sometimes API responds very quickly, when that happens, the skeleton just gets rendered to the DOM then it needs to switch back to real DOM, that causes the sudden flashy. To avoid such thing, you can use the "),t("code",[this._v("throttle")]),this._v(" attribute.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"skeleton-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Acceptable Value")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("animated")]),n("td",[e._v("whether showing the animation")]),n("td",[e._v("boolean")]),n("td",[e._v("true / false")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("count")]),n("td",[e._v("how many fake items to render to the DOM")]),n("td",[e._v("number")]),n("td",[e._v("integer")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("loading")]),n("td",[e._v("whether showing the skeleton")]),n("td",[e._v("boolean")]),n("td",[e._v("true / false")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("rows")]),n("td",[e._v("numbers of the row, only useful when no template slot were given")]),n("td",[e._v("number")]),n("td",[e._v("integer")]),n("td",[e._v("4")])]),n("tr",[n("td",[e._v("throttle")]),n("td",[e._v("Rendering delay in millseconds")]),n("td",[e._v("number")]),n("td",[e._v("integer")]),n("td",[e._v("0")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"skeleton-item-attributes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-item-attributes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton Item Attributes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribute")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Acceptable Value")]),n("th",[e._v("Default")])])]),n("tbody",[n("tr",[n("td",[e._v("variant")]),n("td",[e._v("The current rendering skeleton type")]),n("td",[e._v("Enum(string)")]),n("td",[e._v("p / h1 / h3 / text / caption / button / image / circle / rect")]),n("td",[e._v("text")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"skeleton-slots"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#skeleton-slots","aria-hidden":"true"}},[this._v("¶")]),this._v(" Skeleton Slots")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Name")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("default")]),t("td",[this._v("\bReal rendering DOM")])]),t("tr",[t("td",[this._v("template")]),t("td",[this._v("Custom rendering skeleton template")])])])])}],!1,null,null,null);t.default=i.exports},790:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur par défaut")]),t._v(" "),n("el-slider",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Valeur initiale personnalisée")]),t._v(" "),n("el-slider",{model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Pas de tooltip")]),t._v(" "),n("el-slider",{attrs:{"show-tooltip":!1},model:{value:t.value3,callback:function(e){t.value3=e},expression:"value3"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Tooltip formatté")]),t._v(" "),n("el-slider",{attrs:{"format-tooltip":t.formatTooltip},model:{value:t.value4,callback:function(e){t.value4=e},expression:"value4"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Désactivé")]),t._v(" "),n("el-slider",{attrs:{disabled:""},model:{value:t.value5,callback:function(e){t.value5=e},expression:"value5"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42}},methods:{formatTooltip:function(e){return e/100}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points absents")]),t._v(" "),n("el-slider",{attrs:{step:10},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}})],1),t._v(" "),n("div",{staticClass:"block"},[n("span",{staticClass:"demonstration"},[t._v("Points affichés")]),t._v(" "),n("el-slider",{attrs:{step:10,"show-stops":""},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value1:0,value2:0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{"show-input":""},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[4,8]}}}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:0}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",{staticClass:"block"},[n("el-slider",{attrs:{range:"",marks:t.marks},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{value:[30,60],marks:{0:"0°C",8:"8°C",37:"37°C",50:{style:{color:"#1989FA"},label:this.$createElement("strong","50%")}}}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de sélectionner une valeur au sein d'un intervalle.")]),e._m(1),n("p",[e._v("La valeur est affichée lorsque le slider est utilisé.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez décider de la valeur initiale en initialisant la variable liée.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Valeur par défaut</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Valeur initiale personnalisée</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Pas de tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Tooltip formatté</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Désactivé</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les valeurs peuvent être discrètes.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez le pas avec l'attribut "),n("code",[e._v("step")]),e._v(". Vous pouvez affiché chaque point grâce à "),n("code",[e._v("show-stops")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <span class="demonstration">Points absents</span>\n    <el-slider\n      v-model="value1"\n      :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">Points affichés</span>\n    <el-slider\n      v-model="value2"\n      :step="10"\n      show-stops>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez afficher un champ d'input synchronisé pour entrer une valeur précise rapidement.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("show-input")]),e._v(" pour ajouter le champ à droite du Slider.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value"\n      show-input>\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez sélectionner des intervalles de valeurs au lieu d'une valeur unique.")]),n("demo-block",[n("div",[n("p",[e._v("Ajouter l'attribut "),n("code",[e._v("range")]),e._v(" active le mode intervalle, ou la valeur sera maintenant un tableau contenant les deux valeurs de l'intervalle.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value"\n      range\n      show-stops\n      :max="10">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [4, 8]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("vertical")]),e._v(" active le mode vertical. Dans ce mode, l'attribut "),n("code",[e._v("height")]),e._v(" est requis.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div class="block">\n    <el-slider\n      v-model="value"\n      vertical\n      height="200px">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: 0\n      }\n    }\n  }\n<\/script>\n')])])])],2),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez afficher des marqueurs sur le slider grâce à l'attribut "),n("code",[e._v("marks")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <div class=\"block\">\n    <el-slider\n      v-model=\"value\"\n      range\n      :marks=\"marks\">\n    </el-slider>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: [30, 60],\n        marks: {\n          0: '0°C',\n          8: '8°C',\n          37: '37°C',\n          50: {\n            style: {\n              color: '#1989FA'\n            },\n            label: this.$createElement('strong', '50%')\n          }\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"slider"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-discretes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-discretes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs discrètes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slider-avec-champ-d-input"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slider-avec-champ-d-input","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slider avec champ d'input")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-une-intervalle"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-une-intervalle","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner une intervalle")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mode-vertical"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mode-vertical","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mode vertical")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("min")]),n("td",[e._v("Valeur minimale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("max")]),n("td",[e._v("Valeur maximale.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("100")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Slider est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("La taille du pas.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("1")])]),n("tr",[n("td",[e._v("show-input")]),n("td",[e._v("Si une champ d'input doit être affiché, ne marche que si "),n("code",[e._v("range")]),e._v(" est "),n("code",[e._v("false")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-input-controls")]),n("td",[e._v("Si des boutons de contrôle doivent être affichés quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("input-size")]),n("td",[e._v("Taille du champ d'input.")]),n("td",[e._v("string")]),n("td",[e._v("large / medium / small / mini")]),n("td",[e._v("small")])]),n("tr",[n("td",[e._v("show-stops")]),n("td",[e._v("Si les points de valeurs discrètes doivent être affichés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-tooltip")]),n("td",[e._v("Si le tooltip doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("format-tooltip")]),n("td",[e._v("Format du contenu du tooltip.")]),n("td",[e._v("function(value)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("range")]),n("td",[e._v("Si le mode intervalle est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("vertical")]),n("td",[e._v("Si le mode vertical est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("Hauteur du Slider, requis en mode vertical.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label pour les lecteurs d'écran.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("debounce")]),n("td",[e._v("Délai après écriture en millisecondes, marche quand "),n("code",[e._v("show-input")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("300")])]),n("tr",[n("td",[e._v("tooltip-class")]),n("td",[e._v("Classe du tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("marks")]),n("td",[e._v("Marqueurs, les clés doivent être des "),n("code",[e._v("number")]),e._v(" et être comprises dans l'intervalle "),n("code",[e._v("[min, max]")]),e._v(". Chaque marqueur peut avoir un style particulier.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand la valeur change (si le changement est fait à la souris, se déclenche quand la souris redevient immobile).")]),n("td",[e._v("La nouvelle valeur.")])]),n("tr",[n("td",[e._v("input")]),n("td",[e._v("triggers when the data changes (It'll be emitted in real time during sliding)")]),n("td",[e._v("value after changing")])])])])}],!1,null,null,null);t.default=i.exports},791:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:this.active,"finish-status":"success"}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1),this._v(" "),t("el-button",{staticStyle:{"margin-top":"12px"},on:{click:this.next}},[this._v("Prochaine étape")])],1)},staticRenderFns:[]},{data:function(){return{active:0}},methods:{next:function(){2<this.active++&&(this.active=0)}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,"finish-status":"success"}},[t("el-step",{attrs:{title:"Terminé"}}),this._v(" "),t("el-step",{attrs:{title:"En cours"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}})],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:2,"align-center":""}},[t("el-step",{attrs:{title:"Étape 1",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",description:"Une description"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 4",description:"Une description"}})],1)],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{active:1}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticStyle:{height:"300px"}},[t("el-steps",{attrs:{direction:"vertical",active:1}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)])},staticRenderFns:[]},{}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-steps",{attrs:{space:200,active:1,simple:""}},[t("el-step",{attrs:{title:"Étape 1",icon:"el-icon-edit"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2",icon:"el-icon-upload"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3",icon:"el-icon-picture"}})],1),this._v(" "),t("el-steps",{staticStyle:{"margin-top":"20px"},attrs:{active:1,"finish-status":"success",simple:""}},[t("el-step",{attrs:{title:"Étape 1"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 2"}}),this._v(" "),t("el-step",{attrs:{title:"Étape 3"}})],1)],1)},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de guider l'utilisateur dans l'accomplissement de toutes les taches d'un processus. Les étapes peuvent être créées de manière à refléter le scénario en question et leur nombre ne peut être inférieur à 2.")]),e._m(1),n("p",[e._v("Voici une barre d'étapes basique.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez l'attribut "),n("code",[e._v("active")]),e._v(" avec une variable "),n("code",[e._v("Number")]),e._v(", qui indique l'index des étapes et commence à 0. L'attribut "),n("code",[e._v("space")]),e._v(" permet de déterminer si l'espace entre les étapes doit être fixe à l'aide d'un "),n("code",[e._v("Number")]),e._v(". L'unité de "),n("code",[e._v("space")]),e._v(" est "),n("code",[e._v("px")]),e._v(". Si cet attribut est absent, la barre sera responsive. L'attribut "),n("code",[e._v("finish-status")]),e._v(" change le statut d'accomplissement des étapes.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="active" finish-status="success">\n  <el-step title="Étape 1"></el-step>\n  <el-step title="Étape 2"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">Prochaine étape</el-button>\n\n<script>\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez afficher le statut de chaque étape.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("title")]),e._v(" pour définir le nom de l'étape, ou écrasez cet attribut en utilisant un "),n("code",[e._v("slot")]),e._v(". La liste complète des slots se trouve en fin de page.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :space="200" :active="1" finish-status="success">\n  <el-step title="Terminé"></el-step>\n  <el-step title="En cours"></el-step>\n  <el-step title="Étape 3"></el-step>\n</el-steps>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez ajouter une description pour chaque étape.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(4),n("p",[e._v("Le titre et la description peuvent être centrés.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="2" align-center>\n  <el-step title="Étape 1" description="Une description"></el-step>\n  <el-step title="Étape 2" description="Une description"></el-step>\n  <el-step title="Étape 3" description="Une description"></el-step>\n  <el-step title="Étape 4" description="Une description"></el-step>\n</el-steps>\n')])])])],2),e._m(5),n("p",[e._v("Une grande variété d'icônes peut être utilisée dans la barre d'étapes.")]),n("demo-block",[n("div",[n("p",[e._v("L'icône est ajoutée en utilisant "),n("code",[e._v("icon")]),e._v(". Les types d'icônes possibles sont référencés dans la documentation du composant Icon. De plus, vous pouvez utilisé une icône personnalisée en utilisant un "),n("code",[e._v("slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-steps :active="1">\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n')])])])],2),e._m(6),n("p",[e._v("La barre d'étape peut être affichée de manière verticale.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez simplement l'attribut "),n("code",[e._v("direction")]),e._v(" à "),n("code",[e._v("vertical")]),e._v(" dans l'élément "),n("code",[e._v("el-steps")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div style="height: 300px;">\n  <el-steps direction="vertical" :active="1">\n    <el-step title="Étape 1"></el-step>\n    <el-step title="Étape 2"></el-step>\n    <el-step title="Étape 3"></el-step>\n  </el-steps>\n</div>\n')])])])],2),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('\n<el-steps :space="200" :active="1" simple>\n  <el-step title="Étape 1" icon="el-icon-edit"></el-step>\n  <el-step title="Étape 2" icon="el-icon-upload"></el-step>\n  <el-step title="Étape 3" icon="el-icon-picture"></el-step>\n</el-steps>\n\n<el-steps :active="1" finish-status="success" simple style="margin-top: 20px">\n  <el-step title="Étape 1" ></el-step>\n  <el-step title="Étape 2" ></el-step>\n  <el-step title="Étape 3" ></el-step>\n</el-steps>\n')])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"steps"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[this._v("¶")]),this._v(" Steps")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"centrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#centrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Centrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-avec-icone"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-avec-icone","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre avec icône")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-verticale"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-verticale","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre verticale")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"barre-d-etapes-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#barre-d-etapes-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Barre d'étapes simple")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("La barre peut être simplifiée de manière à ce que "),n("code",[e._v("align-center")]),e._v(", "),n("code",[e._v("description")]),e._v(", "),n("code",[e._v("direction")]),e._v(" et "),n("code",[e._v("space")]),e._v(" soient ignorées.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-la-barre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-la-barre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de la barre")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("space")]),n("td",[e._v("L'espace entre chaque étape, sera responsive si omis. Supporte les pourcentages.")]),n("td",[e._v("number / string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("direction")]),n("td",[e._v("L'orientation de la barre.")]),n("td",[e._v("string")]),n("td",[e._v("vertical/horizontal")]),n("td",[e._v("horizontal")])]),n("tr",[n("td",[e._v("active")]),n("td",[e._v("L'index de l'étape courante.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("process-status")]),n("td",[e._v("Le statut de l'étape courante.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("process")])]),n("tr",[n("td",[e._v("finish-status")]),n("td",[e._v("Le statut de la dernière étape.")]),n("td",[e._v("string")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("finish")])]),n("tr",[n("td",[e._v("align-center")]),n("td",[e._v("Si le titre et la description doivent être centrés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("simple")]),n("td",[e._v("Si un thème simple doit être appliqué.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("title")]),n("td",[e._v("Titre de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("Description de l'étape.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("step icon")]),n("td",[e._v("Classe de l'icône d'étape. Les icônes peuvent aussi être passées via des slots.")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("status")]),n("td",[e._v("Le statut actuel. Sera déterminé par la barre d'étapes si omis.")]),n("td",[e._v("wait / process / finish / error / success")]),n("td",[e._v("-")]),n("td")])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-des-etapes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-des-etapes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots des étapes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")])])]),n("tbody",[n("tr",[n("td",[e._v("icon")]),n("td",[e._v("L'icône de l'étape.")])]),n("tr",[n("td",[e._v("title")]),n("td",[e._v("Le titre de l'étape.")])]),n("tr",[n("td",[e._v("description")]),n("td",[e._v("La description de l'étape.")])])])])}],!1,null,null,null);t.default=i.exports},792:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{"active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{staticStyle:{display:"block"},attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-text":"Paiement mensuel","inactive-text":"Paiement annuel"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-tooltip",{attrs:{content:"Valeur de l'état: "+t.value,placement:"top"}},[n("el-switch",{attrs:{"active-color":"#13ce66","inactive-color":"#ff4949","active-value":"100","inactive-value":"0"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)],1)},staticRenderFns:[]},{data:function(){return{value:"100"}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-switch",{attrs:{disabled:""},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-switch",{attrs:{disabled:""},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})],1)},staticRenderFns:[]},{data:function(){return{value1:!0,value2:!1}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Switch est utilisé pour choisir entre deux états opposés.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Liez "),n("code",[e._v("v-model")]),e._v(" à une variable de type "),n("code",[e._v("Boolean")]),e._v(". Les attributs "),n("code",[e._v("active-color")]),e._v(" et "),n("code",[e._v("inactive-color")]),e._v(" déterminent les couleurs des deux états.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch v-model="value1">\n</el-switch>\n<el-switch\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("active-text")]),e._v(" et "),n("code",[e._v("inactive-text")]),e._v(" pour afficher une description de chaque étape.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value1"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n<el-switch\n  style="display: block"\n  v-model="value2"\n  active-color="#13ce66"\n  inactive-color="#ff4949"\n  active-text="Paiement mensuel"\n  inactive-text="Paiement annuel">\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez utiliser "),n("code",[e._v("active-value")]),e._v(" et "),n("code",[e._v("inactive-value")]),e._v(" pour déterminer la valeur de chaque état. Ils prennent un "),n("code",[e._v("Boolean")]),e._v(", "),n("code",[e._v("String")]),e._v(" ou "),n("code",[e._v("Number")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip :content="\'Valeur de l\\\'état: \' + value" placement="top">\n  <el-switch\n    v-model="value"\n    active-color="#13ce66"\n    inactive-color="#ff4949"\n    active-value="100"\n    inactive-value="0">\n  </el-switch>\n</el-tooltip>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: \'100\'\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("disabled")]),e._v(" pour désactiver le switch.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-switch\n  v-model="value1"\n  disabled>\n</el-switch>\n<el-switch\n  v-model="value2"\n  disabled>\n</el-switch>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: true,\n        value2: false\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"switch"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[this._v("¶")]),this._v(" Switch")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"description"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#description","aria-hidden":"true"}},[this._v("¶")]),this._v(" Description")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"valeurs-des-etats"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#valeurs-des-etats","aria-hidden":"true"}},[this._v("¶")]),this._v(" Valeurs des états")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"desactive"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#desactive","aria-hidden":"true"}},[this._v("¶")]),this._v(" Désactivé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le switch est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur du switch.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("40")])]),n("tr",[n("td",[e._v("active-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("on")]),e._v(", écrase "),n("code",[e._v("active-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-icon-class")]),n("td",[e._v("Classe de l'icône de l'état "),n("code",[e._v("off")]),e._v(", écrase "),n("code",[e._v("inactive-text")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("inactive-text")]),n("td",[e._v("Texte affiché dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("active-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("inactive-value")]),n("td",[e._v("Valeur du switch dans l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("boolean / string / number")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("active-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("on")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#409EFF")])]),n("tr",[n("td",[e._v("inactive-color")]),n("td",[e._v("Couleur de fond de l'état "),n("code",[e._v("off")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("#C0CCDA")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Nom du champ d'input du switch.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("validate-event")]),n("td",[e._v("Si la validation doit avoir lieu.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("true")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("change")]),t("td",[this._v("Se déclenche quand la valeur change.")]),t("td",[this._v("La valeur après changement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Donne le focus au switch.")]),t("td",[this._v("—")])])])])}],!1,null,null,null);t.default=i.exports},793:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,stripe:""}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,border:""}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"row-class-name":this.tableRowClassName}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{methods:{tableRowClassName:function(e){e.row;var t=e.rowIndex;return 1===t?"warning-row":3===t?"success-row":""}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}}}),"element-demo5":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),t._v(" "),n("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-button",{attrs:{type:"text",size:"small"},on:{click:t.handleClick}},[t._v("Detail")]),t._v(" "),n("el-button",{attrs:{type:"text",size:"small"}},[t._v("Editer")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{handleClick:function(){console.log("click")}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}}}),"element-demo6":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,height:"250"}},[t("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo7":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData,"max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),n._v(" "),a("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),n._v(" "),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),n._v(" "),a("el-table-column",{attrs:{fixed:"right",label:"Opérations",width:"120"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(e){e.preventDefault(),n.deleteRow(t.$index,n.tableData)}}},[n._v("\n          Supprimer\n        ")])]}}])})],1)]],2)},staticRenderFns:[]},{methods:{deleteRow:function(e,t){t.splice(e,1)}},data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo8":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),this._v(" "),t("el-table-column",{attrs:{label:"Informations de livraison"}},[t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{label:"Informations d'adresse"}},[t("el-table-column",{attrs:{prop:"state",label:"État",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"city",label:"Ville",width:"120"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",width:"300"}}),this._v(" "),t("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo9":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData,"highlight-current-row":""},on:{"current-change":t.handleCurrentChange}},[n("el-table-column",{attrs:{type:"index",width:"50"}}),t._v(" "),n("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse"}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.setCurrent(t.tableData[1])}}},[t._v("Sélectionner la deuxième ligne")]),t._v(" "),n("el-button",{on:{click:function(e){t.setCurrent()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],currentRow:null}},methods:{setCurrent:function(e){this.$refs.singleTable.setCurrentRow(e)},handleCurrentChange:function(e){this.currentRow=e}}}),"element-demo10":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:t.tableData},on:{"selection-change":t.handleSelectionChange}},[n("el-table-column",{attrs:{type:"selection",width:"55"}}),t._v(" "),n("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:t._u([{key:"default",fn:function(e){return[t._v(t._s(e.row.date))]}}])}),t._v(" "),n("el-table-column",{attrs:{property:"name",label:"Nom",width:"120"}}),t._v(" "),n("el-table-column",{attrs:{property:"address",label:"Adresse","show-overflow-tooltip":""}})],1),t._v(" "),n("div",{staticStyle:{"margin-top":"20px"}},[n("el-button",{on:{click:function(e){t.toggleSelection([t.tableData[1],t.tableData[2]])}}},[t._v("Sélectionner les deuxième et troisième lignes")]),t._v(" "),n("el-button",{on:{click:function(e){t.toggleSelection()}}},[t._v("Effacer la sélection")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-08",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-06",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-07",name:"Tom",address:"No. 189, Grove St, Los Angeles"}],multipleSelection:[]}},methods:{toggleSelection:function(e){var t=this;e?e.forEach(function(e){t.$refs.multipleTable.toggleRowSelection(e)}):this.$refs.multipleTable.clearSelection()},handleSelectionChange:function(e){this.multipleSelection=e}}}),"element-demo11":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData,"default-sort":{prop:"date",order:"descending"}}},[t("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:this.formatter}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{formatter:function(e,t){return e.address}}}),"element-demo12":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-button",{on:{click:t.resetDateFilter}},[t._v("Effacer le filtre date")]),t._v(" "),n("el-button",{on:{click:t.clearFilter}},[t._v("Effacer tout les filtres")]),t._v(" "),n("el-table",{ref:"filterTable",staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180","column-key":"date",filters:[{text:"2016-05-01",value:"2016-05-01"},{text:"2016-05-02",value:"2016-05-02"},{text:"2016-05-03",value:"2016-05-03"},{text:"2016-05-04",value:"2016-05-04"}],"filter-method":t.filterHandler}}),t._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),t._v(" "),n("el-table-column",{attrs:{prop:"address",label:"Adresse",formatter:t.formatter}}),t._v(" "),n("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":t.filterTag,"filter-placement":"bottom-end"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("el-tag",{attrs:{type:"Home"===e.row.tag?"primary":"success","disable-transitions":""}},[t._v(t._s(e.row.tag))])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Home"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles",tag:"Office"}]}},methods:{resetDateFilter:function(){this.$refs.filterTable.clearFilter("date")},clearFilter:function(){this.$refs.filterTable.clearFilter()},formatter:function(e,t){return e.address},filterTag:function(e,t){return t.tag===e},filterHandler:function(e,t,n){return t[n.property]===e}}}),"element-demo13":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("i",{staticClass:"el-icon-time"}),n._v(" "),a("span",{staticStyle:{"margin-left":"10px"}},[n._v(n._s(e.row.date))])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Nom",width:"180"},scopedSlots:n._u([{key:"default",fn:function(e){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[n._v("Nom: "+n._s(e.row.name))]),n._v(" "),a("p",[n._v("Addr: "+n._s(e.row.address))]),n._v(" "),a("div",{staticClass:"name-wrapper",attrs:{slot:"reference"},slot:"reference"},[a("el-tag",{attrs:{size:"medium"}},[n._v(n._s(e.row.name))])],1)])]}}])}),n._v(" "),a("el-table-column",{attrs:{label:"Opérations"},scopedSlots:n._u([{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Tom",address:"No. 189, Grove St, Los Angeles"}]}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"element-demo14":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:n.tableData.filter(function(e){return!n.search||e.name.toLowerCase().includes(n.search.toLowerCase())})}},[a("el-table-column",{attrs:{label:"Date",prop:"date"}}),n._v(" "),a("el-table-column",{attrs:{label:"Name",prop:"name"}}),n._v(" "),a("el-table-column",{attrs:{align:"right"},scopedSlots:n._u([{key:"header",fn:function(e){return[a("el-input",{attrs:{size:"mini",placeholder:"Type to search"},model:{value:n.search,callback:function(e){n.search=e},expression:"search"}})]}},{key:"default",fn:function(t){return[a("el-button",{attrs:{size:"mini"},on:{click:function(e){n.handleEdit(t.$index,t.row)}}},[n._v("Editer")]),n._v(" "),a("el-button",{attrs:{size:"mini",type:"danger"},on:{click:function(e){n.handleDelete(t.$index,t.row)}}},[n._v("Supprimer")])]}}])})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-02",name:"John",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-04",name:"Morgan",address:"No. 189, Grove St, Los Angeles"},{date:"2016-05-01",name:"Jessy",address:"No. 189, Grove St, Los Angeles"}],search:""}},methods:{handleEdit:function(e,t){console.log(e,t)},handleDelete:function(e,t){console.log(e,t)}}}),"element-demo15":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:t.tableData}},[n("el-table-column",{attrs:{type:"expand"},scopedSlots:t._u([{key:"default",fn:function(e){return[n("p",[t._v("État: "+t._s(e.row.state))]),t._v(" "),n("p",[t._v("Ville: "+t._s(e.row.city))]),t._v(" "),n("p",[t._v("Adresse: "+t._s(e.row.address))]),t._v(" "),n("p",[t._v("Zip: "+t._s(e.row.zip))])]}}])}),t._v(" "),n("el-table-column",{attrs:{label:"Date",prop:"date"}}),t._v(" "),n("el-table-column",{attrs:{label:"Nom",prop:"name"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-08",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-06",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"},{date:"2016-05-07",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036"}]}}}),"element-demo16":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("div",[t("el-table",{staticStyle:{width:"100%","margin-bottom":"20px"},attrs:{data:this.tableData,"row-key":"id",border:"","default-expand-all":""}},[t("el-table-column",{attrs:{prop:"date",label:"date",sortable:"",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",sortable:"",width:"180"}})],1),this._v(" "),t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData1,"row-key":"id",border:"",lazy:"",load:this.load,"tree-props":{children:"children",hasChildren:"hasChildren"}}},[t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",children:[{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}]},{id:4,date:"2016-05-03",name:"wangxiaohu"}],tableData1:[{id:1,date:"2016-05-02",name:"wangxiaohu"},{id:2,date:"2016-05-04",name:"wangxiaohu"},{id:3,date:"2016-05-01",name:"wangxiaohu",hasChildren:!0},{id:4,date:"2016-05-03",name:"wangxiaohu"}]}},methods:{load:function(e,t,n){setTimeout(function(){n([{id:31,date:"2016-05-01",name:"wangxiaohu"},{id:32,date:"2016-05-01",name:"wangxiaohu"}])},1e3)}}}),"element-demo17":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,border:"","show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,border:"",height:"200","summary-method":e.getSummaries,"show-summary":""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Coût 1 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Coût 2 ($)"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Coût 3 ($)"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{getSummaries:function(e){var t=e.columns,a=e.data,l=[];return t.forEach(function(t,e){if(0!==e){var n=a.map(function(e){return Number(e[t.property])});n.every(function(e){return isNaN(e)})?l[e]="N/A":l[e]="$ "+n.reduce(function(e,t){var n=Number(t);return isNaN(n)?e:e+t},0)}else l[e]="Coût total"}),l}}}),"element-demo18":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("div",[n("el-table",{staticStyle:{width:"100%"},attrs:{data:e.tableData,"span-method":e.arraySpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Quantité 3"}})],1),e._v(" "),n("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:e.tableData,"span-method":e.objectSpanMethod,border:""}},[n("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),e._v(" "),n("el-table-column",{attrs:{prop:"name",label:"Nom"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount1",label:"Quantité 1"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount2",label:"Quantité 2"}}),e._v(" "),n("el-table-column",{attrs:{prop:"amount3",label:"Quantité 3"}})],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{id:"12987122",name:"Tom",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"Tom",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"Tom",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"Tom",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"Tom",amount1:"539",amount2:"4.1",amount3:15}]}},methods:{arraySpanMethod:function(e){e.row,e.column;var t=e.rowIndex,n=e.columnIndex;if(t%2==0){if(0===n)return[1,2];if(1===n)return[0,0]}},objectSpanMethod:function(e){e.row,e.column;var t=e.rowIndex;if(0===e.columnIndex)return t%2==0?{rowspan:2,colspan:1}:{rowspan:0,colspan:0}}}}),"element-demo19":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[[t("el-table",{staticStyle:{width:"100%"},attrs:{data:this.tableData}},[t("el-table-column",{attrs:{type:"index",index:this.indexMethod}}),this._v(" "),t("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"name",label:"Nom",width:"180"}}),this._v(" "),t("el-table-column",{attrs:{prop:"address",label:"Adresse"}})],1)]],2)},staticRenderFns:[]},{data:function(){return{tableData:[{date:"2016-05-03",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-02",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"},{date:"2016-05-04",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Home"},{date:"2016-05-01",name:"Tom",state:"California",city:"Los Angeles",address:"No. 189, Grove St, Los Angeles",zip:"CA 90036",tag:"Office"}]}},methods:{indexMethod:function(e){return 2*e}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher de nombreuses données possédant un format similaire. Vous pouvez ainsi trier, filtrer et comparer les données de votre tableau.")]),e._m(1),n("p",[e._v("Un tableau de base pour afficher seulement.")]),n("demo-block",[n("div",[n("p",[e._v("Après avoir configuré l'attribut "),n("code",[e._v("data")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" avec un tableau d'objets, vous pouvez utiliser "),n("code",[e._v("prop")]),e._v(" (correspondant à une clé dans chaque objet du tableau "),n("code",[e._v("data")]),e._v(") dans "),n("code",[e._v("el-table-column")]),e._v(" pour insérer des données dans les colonnes, ainsi que l'attribut "),n("code",[e._v("label")]),e._v(" pour définir le nom de la colonne. L'attribut "),n("code",[e._v("width")]),e._v(" définit si besoin la largeur de la colonne.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("  <template>\n    <el-table\n      :data=\"tableData\"\n      style=\"width: 100%\">\n      <el-table-column\n        prop=\"date\"\n        label=\"Date\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"180\">\n      </el-table-column>\n      <el-table-column\n        prop=\"address\"\n        label=\"Adresse\">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  <script>\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-03',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-02',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-04',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }, {\n            date: '2016-05-01',\n            name: 'Tom',\n            address: 'No. 189, Grove St, Los Angeles'\n          }]\n        }\n      }\n    }\n  <\/script>\n")])])])],2),e._m(2),n("p",[e._v("Ajouter des couleurs différentes pour les lignes paires et impaires permet de lire le tableau plus facilement.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("stripe")]),e._v(" accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le tableau sera rayé.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    stripe\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Par défaut, Table n'a pas de bordure verticale. Si vous en avez besoin, mettez l'attribut "),n("code",[e._v("border")]),e._v(" à "),n("code",[e._v("true")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    border\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v('Vous pouvez mettre en valeur certaines lignes du tableau suivant leur état, comme "success", "information", "warning", "danger" et d\'autres.')]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("row-class-name")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(" pour utiliser une fonction qui permettra ajouter des classes à certaines lignes. Vous pouvez ensuite définir les classes en question dans votre CSS.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    :row-class-name=\"tableRowClassName\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<style>\n  .el-table .warning-row {\n    background: oldlace;\n  }\n\n  .el-table .success-row {\n    background: #f0f9eb;\n  }\n</style>\n\n<script>\n  export default {\n    methods: {\n      tableRowClassName({row, rowIndex}) {\n        if (rowIndex === 1) {\n          return 'warning-row';\n        } else if (rowIndex === 3) {\n          return 'success-row';\n        }\n        return '';\n      }\n    },\n    data() {\n      return {\n        tableData:  [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Lorsqu'il y a beaucoup de lignes, il peut être utile d'avoir un header fixe afin de ne pas perdre le nom de colonnes à mesure que l'utilisateur défile vers le bas.")]),n("demo-block",[n("div",[n("p",[e._v("En réglant l'attribut "),n("code",[e._v("height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous pouvez fixer le header sans avoir besoin de plus de code.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    height=\"250\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(6),n("p",[e._v("Lorsque qu'il y a beaucoup de colonnes, il peut être utile d'en fixer certaines afin de ne pas perdre de vue leurs informations à mesure que l'utilisateur défile sur les cotés.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("fixed")]),e._v(" de "),n("code",[e._v("el-table-column")]),e._v(" qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", la colonne sera fixée à gauche. Il accepte aussi les valeurs 'left' et 'right', indiquant de quel coté la colonne doit être fixée.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button @click=\"handleClick\" type=\"text\" size=\"small\">Detail</el-button>\n        <el-button type=\"text\" size=\"small\">Editer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      handleClick() {\n        console.log('click');\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Si vous avez un gros volume de données à afficher, vous pouvez fixer le header et des colonnes en même temps.")]),n("demo-block",[n("div",[n("p",[e._v("Header et colonnes fixes combinant les deux exemples précédents.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("p",[e._v("Quand les données changent dynamiquement, vous pouvez avoir besoin d'une hauteur maximale et d'afficher une barre de défilement si besoin.")]),n("demo-block",[n("div",[n("p",[e._v("En utilisant l'attribut "),n("code",[e._v("max-height")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(", vous fixez le header. Le tableau ne défilera que si la hauteur des lignes dépasse cette hauteur maximale.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    max-height=\"250\">\n    <el-table-column\n      fixed\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"state\"\n      label=\"État\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"city\"\n      label=\"Ville\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      width=\"300\">\n    </el-table-column>\n    <el-table-column\n      prop=\"zip\"\n      label=\"Zip\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      fixed=\"right\"\n      label=\"Opérations\"\n      width=\"120\">\n      <template slot-scope=\"scope\">\n        <el-button\n          @click.native.prevent=\"deleteRow(scope.$index, tableData)\"\n          type=\"text\"\n          size=\"small\">\n          Supprimer\n        </el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    methods: {\n      deleteRow(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Quand la structure du tableau est complexe, vous pouvez grouper les headers afin de montrer une hiérarchie.")]),n("demo-block",[n("div",[n("p",[e._v("Placez simplement "),n("code",[e._v("el-table-column")]),e._v(" dans une autre "),n("code",[e._v("el-table-column")]),e._v(", et vous grouperez ainsi les headers.")])]),n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"150\">\n    </el-table-column>\n    <el-table-column label=\"Informations de livraison\">\n      <el-table-column\n        prop=\"name\"\n        label=\"Nom\"\n        width=\"120\">\n      </el-table-column>\n      <el-table-column label=\"Informations d'adresse\">\n        <el-table-column\n          prop=\"state\"\n          label=\"État\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"city\"\n          label=\"Ville\"\n          width=\"120\">\n        </el-table-column>\n        <el-table-column\n          prop=\"address\"\n          label=\"Adresse\"\n          width=\"300\">\n        </el-table-column>\n        <el-table-column\n          prop=\"zip\"\n          label=\"Zip\"\n          width=\"120\">\n        </el-table-column>\n      </el-table-column>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(10),n("p",[e._v("Vous pouvez activer la sélection d'une ligne.")]),n("demo-block",[n("div",[n("p",[e._v("Activez la sélection en ajoutant l'attribut "),n("code",[e._v("highlight-current-row")]),e._v(". L'évènement "),n("code",[e._v("current-change")]),e._v(" se déclenchera à chaque changement de sélection, ses paramètres étant les deux lignes avant et après le changement: "),n("code",[e._v("currentRow")]),e._v(" et "),n("code",[e._v("oldCurrentRow")]),e._v(". Si vous avez besoin d'afficher l'index des lignes, ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec pour "),n("code",[e._v("type")]),e._v(" la valeur "),n("code",[e._v("index")]),e._v(", qui commencera à 1.")])]),n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    ref="singleTable"\n    :data="tableData"\n    highlight-current-row\n    @current-change="handleCurrentChange"\n    style="width: 100%">\n    <el-table-column\n      type="index"\n      width="50">\n    </el-table-column>\n    <el-table-column\n      property="date"\n      label="Date"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="name"\n      label="Nom"\n      width="120">\n    </el-table-column>\n    <el-table-column\n      property="address"\n      label="Adresse">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">Sélectionner la deuxième ligne</el-button>\n    <el-button @click="setCurrent()">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Vous pouvez aussi sélectionner plusieurs lignes.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez une "),n("code",[e._v("el-table-column")]),e._v(" avec son "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("selection")]),e._v(". Cet exemple utilise aussi "),n("code",[e._v("show-overflow-tooltip")]),e._v(": par défaut, si le contenu est trop long, il se séparera en plusieurs lignes. Si vous souhaitez conserver une seule ligne, utilisez "),n("code",[e._v("show-overflow-tooltip")]),e._v(", qui accepte un "),n("code",[e._v("Boolean")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", le contenu non affiché s'affichera dans le tooltip lorsque la souris passera sur la case.")])]),n("template",{slot:"source"},[n("element-demo10")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    ref=\"multipleTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\"\n    @selection-change=\"handleSelectionChange\">\n    <el-table-column\n      type=\"selection\"\n      width=\"55\">\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      width=\"120\">\n      <template slot-scope=\"scope\">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column\n      property=\"name\"\n      label=\"Nom\"\n      width=\"120\">\n    </el-table-column>\n    <el-table-column\n      property=\"address\"\n      label=\"Adresse\"\n      show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n  <div style=\"margin-top: 20px\">\n    <el-button @click=\"toggleSelection([tableData[1], tableData[2]])\">Sélectionner les deuxième et troisième lignes</el-button>\n    <el-button @click=\"toggleSelection()\">Effacer la sélection</el-button>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(12),n("p",[e._v("Il est possible de trier les données afin de trouver plus facilement ce qu'on cherche.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("sortable")]),e._v(" a une colonne pour pouvoir trier cette colonne. Il accepte un "),n("code",[e._v("Boolean")]),e._v(" et à "),n("code",[e._v("false")]),e._v(" par défaut. Ajoutez "),n("code",[e._v("default-sort")]),e._v(" pour déterminer les propriétés par défaut du tri. Pour appliquer vos propres règles, utilisez "),n("code",[e._v("sort-method")]),e._v(" ou "),n("code",[e._v("sort-by")]),e._v(". Si vous avez besoin d'un tri dynamique depuis le serveur, mettez "),n("code",[e._v("sortable")]),e._v(" à "),n("code",[e._v("custom")]),e._v(", et écoutez l'évènement "),n("code",[e._v("sort-change")]),e._v(" de "),n("code",[e._v("Table")]),e._v(". Depuis cet évènement, vous aurez accès à la colonne et l'ordre de tri. cet exemple utilise aussi "),n("code",[e._v("formatter")]),e._v(" pour formater les valeurs de colonnes. Il prend une fonction avec deux paramètres: "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(". Vous pouvez ainsi transformer les valeurs.")])]),n("template",{slot:"source"},[n("element-demo11")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    :default-sort = \"{prop: 'date', order: 'descending'}\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(13),n("p",[e._v("Vous pouvez filtrer la table pour obtenir rapidement les lignes désirées.")]),n("demo-block",[n("div",[n("p",[e._v("Réglez "),n("code",[e._v("filters")]),e._v(" et "),n("code",[e._v("filter-method")]),e._v(" dans "),n("code",[e._v("el-table-column")]),e._v(" pour rendre la colonne filtrable. "),n("code",[e._v("filters")]),e._v(" prends un tableau, et "),n("code",[e._v("filter-method")]),e._v(" est une fonction déterminant comment les lignes s'affichent. Elle prend trois paramètres: "),n("code",[e._v("value")]),e._v(", "),n("code",[e._v("row")]),e._v(" et "),n("code",[e._v("column")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo12")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-button @click=\"resetDateFilter\">Effacer le filtre date</el-button>\n  <el-button @click=\"clearFilter\">Effacer tout les filtres</el-button>\n  <el-table\n    ref=\"filterTable\"\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      sortable\n      width=\"180\"\n      column-key=\"date\"\n      :filters=\"[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]\"\n      :filter-method=\"filterHandler\"\n    >\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\"\n      :formatter=\"formatter\">\n    </el-table-column>\n    <el-table-column\n      prop=\"tag\"\n      label=\"Tag\"\n      width=\"100\"\n      :filters=\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"\n      :filter-method=\"filterTag\"\n      filter-placement=\"bottom-end\">\n      <template slot-scope=\"scope\">\n        <el-tag\n          :type=\"scope.row.tag === 'Home' ? 'primary' : 'success'\"\n          disable-transitions>{{scope.row.tag}}</el-tag>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          address: 'No. 189, Grove St, Los Angeles',\n          tag: 'Office'\n        }]\n      }\n    },\n    methods: {\n      resetDateFilter() {\n        this.$refs.filterTable.clearFilter('date');\n      },\n      clearFilter() {\n        this.$refs.filterTable.clearFilter();\n      },\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      },\n      filterHandler(value, row, column) {\n        const property = column['property'];\n        return row[property] === value;\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(14),n("p",[e._v("Vous pouvez customiser le contenu des colonnes afin de pouvoir utiliser d'autres composants.")]),n("demo-block",[n("div",[n("p",[e._v("Vous avez acccès aux données suivantes: "),n("code",[e._v("row")]),e._v(", "),n("code",[e._v("column")]),e._v(", "),n("code",[e._v("$index")]),e._v(" et "),n("code",[e._v("store")]),e._v(" (gestionnaire d'état de Table) grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[e._v("Scoped slot")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo13")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      width="180">\n      <template slot-scope="scope">\n        <i class="el-icon-time"></i>\n        <span style="margin-left: 10px">{{ scope.row.date }}</span>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Nom"\n      width="180">\n      <template slot-scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>Nom: {{ scope.row.name }}</p>\n          <p>Addr: {{ scope.row.address }}</p>\n          <div slot="reference" class="name-wrapper">\n            <el-tag size="medium">{{ scope.row.name }}</el-tag>\n          </div>\n        </el-popover>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label="Opérations">\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(15),n("p",[e._v("Vous pouvez également personnaliser le header de la table.")]),n("demo-block",[n("div",[n("p",[e._v("Vous pouvez personnaliser le header grâce aux "),n("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots"}},[e._v("slots avec portée")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo14")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"\n    style="width: 100%">\n    <el-table-column\n      label="Date"\n      prop="date">\n    </el-table-column>\n    <el-table-column\n      label="Name"\n      prop="name">\n    </el-table-column>\n    <el-table-column\n      align="right">\n      <template slot="header" slot-scope="scope">\n        <el-input\n          v-model="search"\n          size="mini"\n          placeholder="Type to search"/>\n      </template>\n      <template slot-scope="scope">\n        <el-button\n          size="mini"\n          @click="handleEdit(scope.$index, scope.row)">Editer</el-button>\n        <el-button\n          size="mini"\n          type="danger"\n          @click="handleDelete(scope.$index, scope.row)">Supprimer</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: \'2016-05-03\',\n          name: \'Tom\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-02\',\n          name: \'John\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-04\',\n          name: \'Morgan\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }, {\n          date: \'2016-05-01\',\n          name: \'Jessy\',\n          address: \'No. 189, Grove St, Los Angeles\'\n        }],\n        search: \'\',\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    },\n  }\n<\/script>\n')])])])],2),e._m(16),n("p",[e._v("Lorsque le contenu d'une ligne est trop long et que vous ne souhaitez pas afficher de scrollbar, vous pouvez utiliser une ligne extensible.")]),n("demo-block",[n("div",[n("p",[e._v("Activer la ligne extensible en mettant "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("expand")]),e._v(" et en utilisant un slot. Le contenu de "),n("code",[e._v("el-table-column")]),e._v(" sera généré quand l'extension aura lieu, et vous avez aux même attributs que pour le slot des templates de colonnes.")])]),n("template",{slot:"source"},[n("element-demo15")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column type=\"expand\">\n      <template slot-scope=\"props\">\n        <p>État: {{ props.row.state }}</p>\n        <p>Ville: {{ props.row.city }}</p>\n        <p>Adresse: {{ props.row.address }}</p>\n        <p>Zip: {{ props.row.zip }}</p>\n      </template>\n    </el-table-column>\n    <el-table-column\n      label=\"Date\"\n      prop=\"date\">\n    </el-table-column>\n    <el-table-column\n      label=\"Nom\"\n      prop=\"name\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-08',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-06',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }, {\n          date: '2016-05-07',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036'\n        }]\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(17),n("demo-block",[n("div",[n("p",[e._v("You can display tree structure data. When row contains the "),n("code",[e._v("children")]),e._v(" field, it is treated as nested data. For rendering nested data, the prop "),n("code",[e._v("row-key")]),e._v(" is required。Also, child row data can be loaded asynchronously. Set "),n("code",[e._v("lazy")]),e._v(" property of Table to true and the function "),n("code",[e._v("load")]),e._v(". Specify "),n("code",[e._v("hasChildren")]),e._v(" attribute in row to determine which row contains children. Both "),n("code",[e._v("children")]),e._v(" and "),n("code",[e._v("hasChildren")]),e._v(" can be configured via "),n("code",[e._v("tree-props")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo16")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n<div>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%;margin-bottom: 20px;\"\n    row-key=\"id\"\n    border\n    default-expand-all>\n    <el-table-column\n      prop=\"date\"\n      label=\"date\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      sortable\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data=\"tableData1\"\n    style=\"width: 100%\"\n    row-key=\"id\"\n    border\n    lazy\n    :load=\"load\"\n    :tree-props=\"{children: 'children', hasChildren: 'hasChildren'}\">\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n  </el-table>\n</div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          children: [{\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n          }]\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }],\n        tableData1: [{\n          id: 1,\n          date: '2016-05-02',\n          name: 'wangxiaohu'\n        }, {\n          id: 2,\n          date: '2016-05-04',\n          name: 'wangxiaohu'\n        }, {\n          id: 3,\n          date: '2016-05-01',\n          name: 'wangxiaohu',\n          hasChildren: true\n        }, {\n          id: 4,\n          date: '2016-05-03',\n          name: 'wangxiaohu'\n        }]\n      }\n    },\n    methods: {\n      load(tree, treeNode, resolve) {\n        setTimeout(() => {\n          resolve([\n            {\n              id: 31,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }, {\n              id: 32,\n              date: '2016-05-01',\n              name: 'wangxiaohu'\n            }\n          ])\n        }, 1000)\n      }\n    },\n  }\n<\/script>\n")])])])],2),e._m(18),n("p",[e._v("Pour les tableaux de nombres, vous pouvez ajouter une ligne en plus pour afficher la somme de chaque colonne.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez l'attribut "),n("code",[e._v("show-summary")]),e._v(" à "),n("code",[e._v("true")]),e._v(" dans "),n("code",[e._v("el-table")]),e._v(". Par défaut, la première colonne n'affiche que 'Sum' (vous pouvez configurer ce label avec "),n("code",[e._v("sum-text")]),e._v("), alors que les autres affichent la somme de chaque colonne. Vous pouvez choisir comment effectuer l'opération grâce à "),n("code",[e._v("summary-method")]),e._v(", qui doit retourner un tableau, cahque élément correspondant à la somme de chaque colonne. La deuxième table de cet exemple montre tout cela en pratique.")])]),n("template",{slot:"source"},[n("element-demo17")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-table\n    :data="tableData"\n    border\n    show-summary\n    style="width: 100%">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      sortable\n      label="Quantité 1">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      sortable\n      label="Quantité 2">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      sortable\n      label="Quantité 3">\n    </el-table-column>\n  </el-table>\n\n  <el-table\n    :data="tableData"\n    border\n    height="200"\n    :summary-method="getSummaries"\n    show-summary\n    style="width: 100%; margin-top: 20px">\n    <el-table-column\n      prop="id"\n      label="ID"\n      width="180">\n    </el-table-column>\n    <el-table-column\n      prop="name"\n      label="Nom">\n    </el-table-column>\n    <el-table-column\n      prop="amount1"\n      label="Coût 1 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount2"\n      label="Coût 2 ($)">\n    </el-table-column>\n    <el-table-column\n      prop="amount3"\n      label="Coût 3 ($)">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = \'Coût total\';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = \'$ \' + values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n          } else {\n            sums[index] = \'N/A\';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(19),n("p",[e._v("Vous pouvez configurer l'étendue des lignes et colonnes afin de fusionner des cellules.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("span-method")]),e._v(" pour configurer chaque étendue. Il accepte une fonction, et lui passe un objet incluant la ligne actuelle "),n("code",[e._v("row")]),e._v(", la colonne actuelle "),n("code",[e._v("column")]),e._v(", l'index de la ligne "),n("code",[e._v("rowIndex")]),e._v(" et l'index de la colonne "),n("code",[e._v("columnIndex")]),e._v(". La fonction doit retourner un tableau contenant deux nombres, le premier étant "),n("code",[e._v("rowspan")]),e._v(" et le second "),n("code",[e._v("colspan")]),e._v(". Elle peut aussi retourner un objet avec les propriétés "),n("code",[e._v("rowspan")]),e._v(" et "),n("code",[e._v("colspan")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo18")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-table\n      :data="tableData"\n      :span-method="arraySpanMethod"\n      border\n      style="width: 100%">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        sortable\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        sortable\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        sortable\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n\n    <el-table\n      :data="tableData"\n      :span-method="objectSpanMethod"\n      border\n      style="width: 100%; margin-top: 20px">\n      <el-table-column\n        prop="id"\n        label="ID"\n        width="180">\n      </el-table-column>\n      <el-table-column\n        prop="name"\n        label="Nom">\n      </el-table-column>\n      <el-table-column\n        prop="amount1"\n        label="Quantité 1">\n      </el-table-column>\n      <el-table-column\n        prop="amount2"\n        label="Quantité 2">\n      </el-table-column>\n      <el-table-column\n        prop="amount3"\n        label="Quantité 3">\n      </el-table-column>\n    </el-table>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          id: \'12987122\',\n          name: \'Tom\',\n          amount1: \'234\',\n          amount2: \'3.2\',\n          amount3: 10\n        }, {\n          id: \'12987123\',\n          name: \'Tom\',\n          amount1: \'165\',\n          amount2: \'4.43\',\n          amount3: 12\n        }, {\n          id: \'12987124\',\n          name: \'Tom\',\n          amount1: \'324\',\n          amount2: \'1.9\',\n          amount3: 9\n        }, {\n          id: \'12987125\',\n          name: \'Tom\',\n          amount1: \'621\',\n          amount2: \'2.2\',\n          amount3: 17\n        }, {\n          id: \'12987126\',\n          name: \'Tom\',\n          amount1: \'539\',\n          amount2: \'4.1\',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      arraySpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (rowIndex % 2 === 0) {\n          if (columnIndex === 0) {\n            return [1, 2];\n          } else if (columnIndex === 1) {\n            return [0, 0];\n          }\n        }\n      },\n\n      objectSpanMethod({ row, column, rowIndex, columnIndex }) {\n        if (columnIndex === 0) {\n          if (rowIndex % 2 === 0) {\n            return {\n              rowspan: 2,\n              colspan: 1\n            };\n          } else {\n            return {\n              rowspan: 0,\n              colspan: 0\n            };\n          }\n        }\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(20),e._m(21),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("index")]),e._v(" sur une "),n("code",[e._v("el-table-column")]),e._v(" avec "),n("code",[e._v("type=index")]),e._v(". Si un nombre est assigné, tout les indices auront un décalage égal à ce nombre. Il peut aussi prendre une fonction avec chaque indice (commençant à "),n("code",[e._v("0")]),e._v(") comme paramètre, et la valeur de retour sera affichée en tant qu'indice.")])]),n("template",{slot:"source"},[n("element-demo19")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-table\n    :data=\"tableData\"\n    style=\"width: 100%\">\n    <el-table-column\n      type=\"index\"\n      :index=\"indexMethod\">\n    </el-table-column>\n    <el-table-column\n      prop=\"date\"\n      label=\"Date\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"name\"\n      label=\"Nom\"\n      width=\"180\">\n    </el-table-column>\n    <el-table-column\n      prop=\"address\"\n      label=\"Adresse\">\n    </el-table-column>\n  </el-table>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-02',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }, {\n          date: '2016-05-04',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Home'\n        }, {\n          date: '2016-05-01',\n          name: 'Tom',\n          state: 'California',\n          city: 'Los Angeles',\n          address: 'No. 189, Grove St, Los Angeles',\n          zip: 'CA 90036',\n          tag: 'Office'\n        }],\n      }\n    },\n    methods: {\n      indexMethod(index) {\n        return index * 2;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(22),e._m(23),e._m(24),e._m(25),e._m(26),e._m(27),e._m(28),e._m(29),e._m(30),e._m(31),e._m(32),e._m(33)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-basique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-basique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table basique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-rayee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-rayee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table rayée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-statut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-statut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec statut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-un-header-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-un-header-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec un header fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#hauteur-fluide-dans-une-table-avec-header-et-colonnes-fixes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Hauteur fluide dans une Table avec header et colonnes fixes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"grouper-les-headers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#grouper-les-headers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Grouper les headers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selecteur-simple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selecteur-simple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélecteur simple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-multiple"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-multiple","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection multiple")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"trier"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#trier","aria-hidden":"true"}},[this._v("¶")]),this._v(" Trier")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"template-de-colonne-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#template-de-colonne-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Template de colonne personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"table-avec-header-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#table-avec-header-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Table avec header personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-extensible"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-extensible","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne extensible")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"arborescence-et-lazy-loading"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#arborescence-et-lazy-loading","aria-hidden":"true"}},[this._v("¶")]),this._v(" Arborescence et lazy loading")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ligne-de-somme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ligne-de-somme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ligne de somme")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"etendue-des-lignes-et-colonnes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#etendue-des-lignes-et-colonnes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Étendue des lignes et colonnes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"indices-personnalises"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#indices-personnalises","aria-hidden":"true"}},[this._v("¶")]),this._v(" Indices personnalisés")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez personnaliser les indices des colonnes de type "),t("code",[this._v("index")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Les données de la table.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("height")]),n("td",[e._v("La hauteur de la table. Par défaut la hauteur est "),n("code",[e._v("auto")]),e._v(". Si sa valeur est un nombre, la hauteur est en px; si c'est un string, la valeur est assigné au style.height de l'élement. La hauteur est affectée par les styles externes.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("max-height")]),n("td",[e._v("Table's max-height. The legal value is a number or the height in px.")]),n("td",[e._v("string/number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("stripe")]),n("td",[e._v("Si la table est rayée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("border")]),n("td",[e._v("Si la table à une bordure verticale.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille de la table.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fit")]),n("td",[e._v("Si la largeur des colonnes s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("show-header")]),n("td",[e._v("Si le header de la table est visible.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("highlight-current-row")]),n("td",[e._v("Si la ligne courante est mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("current-row-key")]),n("td",[e._v("Clé de la ligne actuelle. Propriété set-only.")]),n("td",[e._v("string,number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne. Peut aussi être un objet assignant un style à chaque ligne.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule. Peut aussi être un objet assignant un style à chaque cellule.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque ligne de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-row-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque ligne de header. Peut aussi être un objet assignant un style à chaque ligne de header.")]),n("td",[e._v("Function({row, rowIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-class-name")]),n("td",[e._v("Fonction qui retourne un nom de classe pour chaque cellule de header. Peut aussi être une simple chaîne de caractères assignant une classe à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("header-cell-style")]),n("td",[e._v("Fonction qui retourne un style pour chaque cellule de header. Peut aussi être un objet assignant un style à chaque cellule de header.")]),n("td",[e._v("Function({row, column, rowIndex, columnIndex})/Object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("row-key")]),n("td",[e._v("Clé de chaque ligne, utilisée pour optimiser le rendu. Requise si "),n("code",[e._v("reserve-selection")]),e._v(" est activé. Quand c'est un "),n("code",[e._v("String")]),e._v(", l'accès multi-niveaux est supporté, e.g. "),n("code",[e._v("user.info.id")]),e._v(", mais "),n("code",[e._v("user.info[0].id")]),e._v(" n'est pas supporté. Dans ce dernier cas une "),n("code",[e._v("Function")]),e._v(" devrait être utilisée.")]),n("td",[e._v("Function(row)/String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données. Vous pouvez changer cette zone grâce à "),n("code",[e._v('slot="empty"')]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("No Data")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v('whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data')]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-row-keys")]),n("td",[e._v("Détermine les lignes qui sont étendues, contient les clés des lignes correspondantes. Vous devriez configurer "),n("code",[e._v("row-key")]),e._v(" avant celle-ci.")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td")]),n("tr",[n("td",[e._v("default-sort")]),n("td",[e._v("Détermine l'ordre de tri par défaut. La propriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne par défaut, "),n("code",[e._v("order")]),e._v(" détermine l'ordre par défaut.")]),n("td",[e._v("Object")]),n("td",[n("code",[e._v("order")]),e._v(": ascending, descending")]),n("td",[e._v("Si "),n("code",[e._v("order")]),e._v(" est absent, son défaut sera "),n("code",[e._v("ascending")]),e._v(".")])]),n("tr",[n("td",[e._v("tooltip-effect")]),n("td",[e._v("Propriété "),n("code",[e._v("effect")]),e._v(" de Tooltip.")]),n("td",[e._v("String")]),n("td",[e._v("dark/light")]),n("td")]),n("tr",[n("td",[e._v("show-summary")]),n("td",[e._v("Si une ligne de somme doit apparaître.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sum-text")]),n("td",[e._v("Le label de la première cellule de la ligne de somme.")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("Sum")])]),n("tr",[n("td",[e._v("summary-method")]),n("td",[e._v("La méthode pour calculer la somme.")]),n("td",[e._v("Function({ columns, data })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("span-method")]),n("td",[e._v("Méthode qui retourne les valeurs de colspan et rowspan.")]),n("td",[e._v("Function({ row, column, rowIndex, columnIndex })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("select-on-indeterminate")]),n("td",[e._v("Contrôle le comportement de la checkbox globale dans les tables avec sélection multiple lorsque seulement certaines lignes sont sélectionnées. Si "),n("code",[e._v("true")]),e._v(", toutes les lignes sont sélectionnées.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("horizontal indentation of tree data")]),n("td",[e._v("Number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("whether to lazy loading data")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("method for loading child row data, only works when "),n("code",[e._v("lazy")]),e._v(" is true")]),n("td",[e._v("Function({ row, treeNode, resolve })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("tree-props")]),n("td",[e._v("configuration for rendering nested data")]),n("td",[e._v("Object")]),n("td",[e._v("—")]),n("td",[e._v("{ hasChildren: 'hasChildren', children: 'children' }")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("select")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox d'une ligne.")]),n("td",[e._v("selection, row")])]),n("tr",[n("td",[e._v("select-all")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur la checkbox du header.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("selection-change")]),n("td",[e._v("Se déclenche quand la selection change.")]),n("td",[e._v("selection")])]),n("tr",[n("td",[e._v("cell-mouse-enter")]),n("td",[e._v("Se déclenche quand la souris passe sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-mouse-leave")]),n("td",[e._v("Se déclenche quand la souris sort d'une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("cell-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une cellule.")]),n("td",[e._v("row, column, cell, event")])]),n("tr",[n("td",[e._v("row-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("row-dblclick")]),n("td",[e._v("Se déclenche quand l'utilisateur double-clique sur une ligne.")]),n("td",[e._v("row, column, event")])]),n("tr",[n("td",[e._v("header-click")]),n("td",[e._v("Se déclenche quand l'utilisateur clique sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("header-contextmenu")]),n("td",[e._v("Se déclenche quand l'utilisateur fait un clic droit sur une colonne du header.")]),n("td",[e._v("column, event")])]),n("tr",[n("td",[e._v("sort-change")]),n("td",[e._v("Se déclenche quand l'ordre de tri change.")]),n("td",[e._v("{ column, prop, order }")])]),n("tr",[n("td",[e._v("filter-change")]),n("td",[e._v("column's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filtered.")]),n("td",[e._v("filters")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand la ligne sélectionnée change.")]),n("td",[e._v("currentRow, oldCurrentRow")])]),n("tr",[n("td",[e._v("header-dragend")]),n("td",[e._v("Se déclenche après un changement de taille de colonne en déplaçant la ligne verticale du header.")]),n("td",[e._v("newWidth, oldWidth, column, event")])]),n("tr",[n("td",[e._v("expand-change")]),n("td",[e._v("triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)")]),n("td",[e._v("row, (expandedRows | expanded)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes de Table")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, efface la sélection.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("toggleRowSelection")]),n("td",[e._v("Dans les tables avec sélection multiple, change la sélection d'une ligne. Grâce au deuxième paramètre vous pouvez directement décider si cette ligne est sélectionnée.")]),n("td",[e._v("row, selected")])]),n("tr",[n("td",[e._v("toggleAllSelection")]),n("td",[e._v("Utilisé dans les tables à sélection multiples, sélectionne toutes les lignes.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("toggleRowExpansion")]),n("td",[e._v("used in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed")]),n("td",[e._v("row, expanded")])]),n("tr",[n("td",[e._v("setCurrentRow")]),n("td",[e._v("Dans les tables à sélection simple, sélectionne une ligne. Sans paramètre la sélection est effacé.")]),n("td",[e._v("row")])]),n("tr",[n("td",[e._v("clearSort")]),n("td",[e._v("Efface le tri.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("clearFilter")]),n("td",[e._v("Efface les filtres des colonnes dont les "),n("code",[e._v("columnKey")]),e._v(" sont passées. Si aucun paramètre, efface tout les filtres.")]),n("td",[e._v("columnKeys")])]),n("tr",[n("td",[e._v("doLayout")]),n("td",[e._v("Rafraîchi le layout de la table. Quand la visibilité de la table change vous aurez peut-être besoin de cette méthode pour corriger le layout.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort")]),n("td",[e._v("Tri la table manuellement. La proriété "),n("code",[e._v("prop")]),e._v(" détermine la colonne, "),n("code",[e._v("order")]),e._v(" détermine l'ordre de tri.")]),n("td",[e._v("prop: string, order: string")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-table"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-table","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Table")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("append")]),t("td",[this._v("Contenu à insérer après la dernière ligne. Vous aurez sans doute besoin de ce slot si vous implémentez un scroll infini. Il sera affiché au-dessus de la ligne de somme s'il y en a une.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Table-column")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de la colonne. Si mis à "),n("code",[e._v("selection")]),e._v(", la colonne affichera des checkbox. Si mis à "),n("code",[e._v("index")]),e._v(", la colonne affichera l'indice de la ligne (début à 1). Si mis à "),n("code",[e._v("expand")]),e._v(", affichera l'icône d'extension.")]),n("td",[e._v("string")]),n("td",[e._v("selection/index/expand")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("index")]),n("td",[e._v("Personnalise les indices de chaque ligne, marche avec les colonnes "),n("code",[e._v("type=index")]),e._v(".")]),n("td",[e._v("number, Function(index)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("label")]),n("td",[e._v("Label de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("column-key")]),n("td",[e._v("La clé de la colonne. Si vous avez besoin d'utiliser l'évènement filter-change, vous aurez besoin de cet attribut pour savoir quelle colonne est filtrée.")]),n("td",[e._v("string")]),n("td",[e._v("string")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prop")]),n("td",[e._v("Nom du champ de l'objet de données. Alias: "),n("code",[e._v("property")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("width")]),n("td",[e._v("Largeur de la colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("min-width")]),n("td",[e._v("Largeur minimale de la colonne. Les colonnes avec "),n("code",[e._v("width")]),e._v(" ont une largeur fixe, alors que celles avec "),n("code",[e._v("min-width")]),e._v(" ont une largeur proportionnellement distribuée.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("fixed")]),n("td",[e._v("Si la colonne est fixée à droite ou à gauche. Fixée à gauche si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string/boolean")]),n("td",[e._v("true/left/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-header")]),n("td",[e._v("Fonction de rendu pour le header de cette colonne.")]),n("td",[e._v("Function(h, { column, $index })")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sortable")]),n("td",[e._v("Si la colonne peut être triée. Tri dynamique possible en mettant à 'custom' et en écoutant l'évènement "),n("code",[e._v("sort-change")]),e._v(" de Table.")]),n("td",[e._v("boolean, string")]),n("td",[e._v("true, false, custom")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("sort-method")]),n("td",[e._v("Méthode de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Doit retourner un nombre, tout comme Array.sort.")]),n("td",[e._v("Function(a, b)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-by")]),n("td",[e._v("Détermine par quelle propriété effectuer le tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(" et "),n("code",[e._v("sort-method")]),e._v(" est "),n("code",[e._v("undefined")]),e._v(". Si c'est un Array, sera triée par la propriété suivante si la précédente est équivalente.")]),n("td",[e._v("Function(row, index)/String/Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("sort-orders")]),n("td",[e._v("Liste des stratégies de tri, marche quand "),n("code",[e._v("sortable")]),e._v(" est "),n("code",[e._v("true")]),e._v(". Accepte un tableau. Lorsque l'utilisateur clique plusieurs fois sur le header, la colonne est triée dans l'ordre des stratégies indiquée.")]),n("td",[e._v("array")]),n("td",[e._v("Les élements du tableau doivent être parmi: "),n("code",[e._v("ascending")]),e._v(", "),n("code",[e._v("descending")]),e._v(" et "),n("code",[e._v("null")]),e._v(" (restaure l'état originel du tableau).")]),n("td",[e._v("['ascending', 'descending', null]")])]),n("tr",[n("td",[e._v("resizable")]),n("td",[e._v("Si la largeur de la colonne peut être modifiée, marche quand "),n("code",[e._v("border")]),e._v(" de "),n("code",[e._v("el-table")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("formatter")]),n("td",[e._v("Fonction pour formater le contenu des cellules.")]),n("td",[e._v("Function(row, column, cellValue, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-overflow-tooltip")]),n("td",[e._v("Si du contenu trop long doit être caché et affiché dans une tooltip quand la souris passe sur la cellule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("string")]),n("td",[e._v("left/center/right")]),n("td",[e._v("left")])]),n("tr",[n("td",[e._v("header-align")]),n("td",[e._v("Alignement du header. Si omis, la valeur du "),n("code",[e._v("align")]),e._v(" ci-dessus est appliqué.")]),n("td",[e._v("String")]),n("td",[e._v("left/center/right")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("class-name")]),n("td",[e._v("Classe des cellules dans cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("label-class-name")]),n("td",[e._v("Classe du label de cette colonne.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("selectable")]),n("td",[e._v("Détermine si certaines colonnes peuvent être sélectionnées, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'.")]),n("td",[e._v("Function(row, index)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("reserve-selection")]),n("td",[e._v("Si la sélection doit être conservée après rafraîchissement, marche quand "),n("code",[e._v("type")]),e._v(" est 'selection'. Notez que "),n("code",[e._v("row-key")]),e._v(" est requis.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filters")]),n("td",[e._v("Un tableau d'options de filtrage. Pour chaque élément, "),n("code",[e._v("text")]),e._v(" et "),n("code",[e._v("value")]),e._v(" sont requis.")]),n("td",[e._v("Array[{ text, value }]")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-placement")]),n("td",[e._v("Emplacement du menu du filtre.")]),n("td",[e._v("String")]),n("td",[e._v("Voir "),n("code",[e._v("placement")]),e._v(" de Tooltip.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-multiple")]),n("td",[e._v("Si le filtrage supporte plusieurs options.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage. Si "),n("code",[e._v("filter-multiple")]),e._v(" est activé, cette méthode sera appelé plusieurs fois pour chaque ligne, qui sera affichée si dès qu'un "),n("code",[e._v("true")]),e._v(" sera renvoyé.")]),n("td",[e._v("Function(value, row, column)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filtered-value")]),n("td",[e._v("Valeur de filtre pour les colonnes sélectionnées, peut être utile quand le header est rendu avec "),n("code",[e._v("render-header")]),e._v(".")]),n("td",[e._v("Array")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-de-table-column"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-de-table-column","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot de Table-column")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les colonnes. Les paramètres sont { row, column, $index }")])]),t("tr",[t("td",[this._v("header")]),t("td",[this._v("Contenu personnalisé pour le header. Le paramètre de scope est { column, $index }")])])])])}],!1,null,null,null);t.default=i.exports},794:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tabs",{on:{"tab-click":t.handleClick},model:{value:t.activeName,callback:function(e){t.activeName=e},expression:"activeName"}},[n("el-tab-pane",{attrs:{label:"User",name:"first"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config",name:"second"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role",name:"third"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo1":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[[n("el-tabs",{attrs:{type:"card"},on:{"tab-click":e.handleClick}},[n("el-tab-pane",{attrs:{label:"User"}},[e._v("Utilisateur")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)]],2)},staticRenderFns:[]},{data:function(){return{activeName:"first"}},methods:{handleClick:function(e,t){console.log(e,t)}}}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tabs",{attrs:{type:"border-card"}},[t("el-tab-pane",{attrs:{label:"User"}},[this._v("Utilisateur")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Config"}},[this._v("Config")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Role"}},[this._v("Rôle")]),this._v(" "),t("el-tab-pane",{attrs:{label:"Task"}},[this._v("Tâche")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-radio-group",{staticStyle:{"margin-bottom":"30px"},model:{value:t.tabPosition,callback:function(e){t.tabPosition=e},expression:"tabPosition"}},[n("el-radio-button",{attrs:{label:"top"}},[t._v("En haut")]),t._v(" "),n("el-radio-button",{attrs:{label:"right"}},[t._v("À droite")]),t._v(" "),n("el-radio-button",{attrs:{label:"bottom"}},[t._v("En bas")]),t._v(" "),n("el-radio-button",{attrs:{label:"left"}},[t._v("À gauche")])],1),t._v(" "),n("el-tabs",{staticStyle:{height:"200px"},attrs:{"tab-position":t.tabPosition}},[n("el-tab-pane",{attrs:{label:"User"}},[t._v("Utilisateur")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[t._v("Config")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[t._v("Rôle")]),t._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[t._v("Tâche")])],1)]],2)},staticRenderFns:[]},{data:function(){return{tabPosition:"left"}}}),"element-demo4":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tabs",{attrs:{type:"border-card"}},[n("el-tab-pane",[n("span",{attrs:{slot:"label"},slot:"label"},[n("i",{staticClass:"el-icon-date"}),e._v(" Route")]),e._v("\n    Route\n  ")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Config"}},[e._v("Config")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Role"}},[e._v("Rôle")]),e._v(" "),n("el-tab-pane",{attrs:{label:"Task"}},[e._v("Tâche")])],1)],1)},staticRenderFns:[]},{}),"element-demo5":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:n.handleTabsEdit},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{handleTabsEdit:function(a,e){if("add"===e){var t=++this.tabIndex+"";this.editableTabs.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue=t}if("remove"===e){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}}}),"element-demo6":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(e){n.addTab(n.editableTabsValue)}}},[n._v("\n    Ajouter un onglet\n  ")])],1),n._v(" "),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":n.removeTab},model:{value:n.editableTabsValue,callback:function(e){n.editableTabsValue=e},expression:"editableTabsValue"}},n._l(n.editableTabs,function(e,t){return a("el-tab-pane",{key:e.name,attrs:{label:e.title,name:e.name}},[n._v("\n    "+n._s(e.content)+"\n  ")])}),1)],1)},staticRenderFns:[]},{data:function(){return{editableTabsValue:"2",editableTabs:[{title:"Onglet 1",name:"1",content:"Contenu de l'onglet 1"},{title:"Onglet 2",name:"2",content:"Contenu de l'onglet 2"}],tabIndex:2}},methods:{addTab:function(e){var t=++this.tabIndex+"";this.editableTabs.push({title:"Nouvel onglet",name:t,content:"Contenu du nouvel onglet"}),this.editableTabsValue=t},removeTab:function(a){var l=this.editableTabs,r=this.editableTabsValue;r===a&&l.forEach(function(e,t){if(e.name===a){var n=l[t+1]||l[t-1];n&&(r=n.name)}}),this.editableTabsValue=r,this.editableTabs=l.filter(function(e){return e.name!==a})}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Divise des collections de données de types différents, mais reliées entre elles par un contexte ou un type global.")]),e._m(1),n("p",[e._v("Onglets basiques.")]),n("demo-block",[n("div",[n("p",[e._v("Tabs fournit un outil de sélection des onglets. Par défaut, le premier onglet est sélectionné et actif mais vous pouvez activer n'importe lequel en réglant l'attribut "),n("code",[e._v("value")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="User" name="first">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config" name="second">Config</el-tab-pane>\n    <el-tab-pane label="Role" name="third">Rôle</el-tab-pane>\n    <el-tab-pane label="Task" name="fourth">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Les onglets peuvent être stylisés comme des cartes.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("card")]),e._v(" pour avoir des onglets avec un style de carte.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tabs type="card" @tab-click="handleClick">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        activeName: \'first\'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Onglets avec style de carte et bordure.")]),n("demo-block",[n("div",[n("p",[e._v("Mettez "),n("code",[e._v("type")]),e._v(" à "),n("code",[e._v("border-card")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tabs type="border-card">\n  <el-tab-pane label="User">Utilisateur</el-tab-pane>\n  <el-tab-pane label="Config">Config</el-tab-pane>\n  <el-tab-pane label="Role">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Il y a quatre positions différentes: "),n("code",[e._v('tabPosition="left|right|top|bottom"')])])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">\n    <el-radio-button label="top">En haut</el-radio-button>\n    <el-radio-button label="right">À droite</el-radio-button>\n    <el-radio-button label="bottom">En bas</el-radio-button>\n    <el-radio-button label="left">À gauche</el-radio-button>\n  </el-radio-group>\n\n  <el-tabs :tab-position="tabPosition" style="height: 200px;">\n    <el-tab-pane label="User">Utilisateur</el-tab-pane>\n    <el-tab-pane label="Config">Config</el-tab-pane>\n    <el-tab-pane label="Role">Rôle</el-tab-pane>\n    <el-tab-pane label="Task">Tâche</el-tab-pane>\n  </el-tabs>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        tabPosition: \'left\'\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),n("p",[e._v("Vous pouvez utiliser un slot pour customiser le label d'un onglet.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<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">Rôle</el-tab-pane>\n  <el-tab-pane label="Task">Tâche</el-tab-pane>\n</el-tabs>\n')])])])],2),e._m(7),n("p",[e._v("Seuls les onglets de type carte supportent l'ajout et la suppression.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tabs v-model=\"editableTabsValue\" type=\"card\" editable @edit=\"handleTabsEdit\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      handleTabsEdit(targetName, action) {\n        if (action === 'add') {\n          let newTabName = ++this.tabIndex + '';\n          this.editableTabs.push({\n            title: 'Nouvel onglet',\n            name: newTabName,\n            content: 'Contenu du nouvel onglet'\n          });\n          this.editableTabsValue = newTabName;\n        }\n        if (action === 'remove') {\n          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let nextTab = tabs[index + 1] || tabs[index - 1];\n                if (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n\n          this.editableTabsValue = activeName;\n          this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div style=\"margin-bottom: 20px;\">\n  <el-button\n    size=\"small\"\n    @click=\"addTab(editableTabsValue)\"\n  >\n    Ajouter un onglet\n  </el-button>\n</div>\n<el-tabs v-model=\"editableTabsValue\" type=\"card\" closable @tab-remove=\"removeTab\">\n  <el-tab-pane\n    v-for=\"(item, index) in editableTabs\"\n    :key=\"item.name\"\n    :label=\"item.title\"\n    :name=\"item.name\"\n  >\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n<script>\n  export default {\n    data() {\n      return {\n        editableTabsValue: '2',\n        editableTabs: [{\n          title: 'Onglet 1',\n          name: '1',\n          content: 'Contenu de l\\'onglet 1'\n        }, {\n          title: 'Onglet 2',\n          name: '2',\n          content: 'Contenu de l\\'onglet 2'\n        }],\n        tabIndex: 2\n      }\n    },\n    methods: {\n      addTab(targetName) {\n        let newTabName = ++this.tabIndex + '';\n        this.editableTabs.push({\n          title: 'Nouvel onglet',\n          name: newTabName,\n          content: 'Contenu du nouvel onglet'\n        });\n        this.editableTabsValue = newTabName;\n      },\n      removeTab(targetName) {\n        let tabs = this.editableTabs;\n        let activeName = this.editableTabsValue;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let nextTab = tabs[index + 1] || tabs[index - 1];\n              if (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n\n        this.editableTabsValue = activeName;\n        this.editableTabs = tabs.filter(tab => tab.name !== targetName);\n      }\n    }\n  }\n<\/script>\n")])])])],2),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tabs")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"style-carte-avec-bordure"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#style-carte-avec-bordure","aria-hidden":"true"}},[this._v("¶")]),this._v(" Style carte avec bordure")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"position-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#position-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Position des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser "),t("code",[this._v("tab-position")]),this._v(" pour régler la position des onglets.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"onglet-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#onglet-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Onglet personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ajouter-et-supprimer-des-onglets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ajouter-et-supprimer-des-onglets","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ajouter et supprimer des onglets")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnaliser-le-bouton-d-ajout-d-onglet"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnaliser-le-bouton-d-ajout-d-onglet","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnaliser le bouton d'ajout d'onglet")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée, nom de l'onglet sélectionné.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Nom du premier onglet.")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("card/border-card")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si des onglets peuvent être supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("addable")]),n("td",[e._v("Si des onglets peuvent être ajoutés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si des onglets peuvent être ajoutés et supprimés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("tab-position")]),n("td",[e._v("Position des onglets.")]),n("td",[e._v("string")]),n("td",[e._v("top/right/bottom/left")]),n("td",[e._v("top")])]),n("tr",[n("td",[e._v("stretch")]),n("td",[e._v("Si la largeur des onglets s'adapte au conteneur.")]),n("td",[e._v("boolean")]),n("td",[e._v("-")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("before-leave")]),n("td",[e._v("Fonction de hook avant de changer d'onglet. Si "),n("code",[e._v("false")]),e._v(" est retourné ou qu'une "),n("code",[e._v("Promise")]),e._v(" retournée et rejetée, le changement sera annulé.")]),n("td",[e._v("Function(activeName, oldActiveName)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements-de-tabs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements-de-tabs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements de Tabs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("tab-click")]),n("td",[e._v("Se déclenche quand on clique sur un onglet.")]),n("td",[e._v("clicked tab")])]),n("tr",[n("td",[e._v("tab-remove")]),n("td",[e._v("Se déclenche quand on clique sur le bouton de suppression des onglets.")]),n("td",[e._v("name of the removed tab")])]),n("tr",[n("td",[e._v("tab-add")]),n("td",[e._v("Se déclenche quand on clique sur le bouton d'ajout des onglets.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("edit")]),n("td",[e._v("Se déclenche quand on clique sur les boutons d'ajout ou de suppression des onglets.")]),n("td",[e._v("(targetName, action)")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-tab-pane"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-tab-pane","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Tab-pane")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Titre de l'onglet.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si l'onglet est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant correspondant au nom des onglets, utilisé par Tabs pour savoir quel est l'onglet actif.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Numéro de l'onglet dans l'ordre d'apparition, e.g. le premier est '1'.")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si l'onglet est supprimable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si le contenu de l'onglet bénéficie du lazy-loading.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])}],!1,null,null,null);t.default=i.exports},795:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tag",[e._v("Tag 1")]),e._v(" "),n("el-tag",{attrs:{type:"success"}},[e._v("Tag 2")]),e._v(" "),n("el-tag",{attrs:{type:"info"}},[e._v("Tag 3")]),e._v(" "),n("el-tag",{attrs:{type:"warning"}},[e._v("Tag 4")]),e._v(" "),n("el-tag",{attrs:{type:"danger"}},[e._v("Tag 5")])],1)},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",t._l(t.tags,function(e){return n("el-tag",{key:e.name,attrs:{closable:"",type:e.type}},[t._v("\n  "+t._s(e.name)+"\n")])}),1)},staticRenderFns:[]},{data:function(){return{tags:[{name:"Tag 1",type:""},{name:"Tag 2",type:"success"},{name:"Tag 3",type:"info"},{name:"Tag 4",type:"warning"},{name:"Tag 5",type:"danger"}]}}}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[n._l(n.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:"","disable-transitions":!1},on:{close:function(e){n.handleClose(t)}}},[n._v("\n  "+n._s(t)+"\n")])}),n._v(" "),n.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:n.handleInputConfirm},nativeOn:{keyup:function(e){return"button"in e||!n._k(e.keyCode,"enter",13,e.key,"Enter")?n.handleInputConfirm(e):null}},model:{value:n.inputValue,callback:function(e){n.inputValue=e},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:n.showInput}},[n._v("+ Nouveau Tag")])],2)},staticRenderFns:[]},{data:function(){return{dynamicTags:["Tag 1","Tag 2","Tag 3"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(e){this.dynamicTags.splice(this.dynamicTags.indexOf(e),1)},showInput:function(){var t=this;this.inputVisible=!0,this.$nextTick(function(e){t.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var e=this.inputValue;e&&this.dynamicTags.push(e),this.inputVisible=!1,this.inputValue=""}}}),"element-demo3":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tag",[this._v("Défaut")]),this._v(" "),t("el-tag",{attrs:{size:"medium"}},[this._v("Medium")]),this._v(" "),t("el-tag",{attrs:{size:"small"}},[this._v("Small")]),this._v(" "),t("el-tag",{attrs:{size:"mini"}},[this._v("Mini")])],1)},staticRenderFns:[]},{}),"element-demo4":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[t._v("Dark")]),t._v(" "),t._l(t.items,function(e){return n("el-tag",{key:e.label,attrs:{type:e.type,effect:"dark"}},[t._v("\n    "+t._s(e.label)+"\n  ")])})],2),t._v(" "),n("div",{staticClass:"tag-group"},[n("span",{staticClass:"tag-group__title"},[t._v("Plain")]),t._v(" "),t._l(t.items,function(e){return n("el-tag",{key:e.label,attrs:{type:e.type,effect:"plain"}},[t._v("\n    "+t._s(e.label)+"\n  ")])})],2)])},staticRenderFns:[]},{data:function(){return{items:[{type:"",label:"Tag 1"},{type:"success",label:"Tag 2"},{type:"info",label:"Tag 3"},{type:"danger",label:"Tag 4"},{type:"warning",label:"Tag 5"}]}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Les tags sont utiles sont marquer certaines données afin d'ajouter des informations et de les retrouver plus facilement.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Utilisez l'attribut "),n("code",[e._v("type")]),e._v(" pour définir le type de tag. De plus, l'attribut "),n("code",[e._v("color")]),e._v(" détermine la couleur de fond.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Tag 1</el-tag>\n<el-tag type="success">Tag 2</el-tag>\n<el-tag type="info">Tag 3</el-tag>\n<el-tag type="warning">Tag 4</el-tag>\n<el-tag type="danger">Tag 5</el-tag>\n')])])])],2),e._m(2),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("closable")]),e._v(" détermine si un tag est supprimable grâce à un "),n("code",[e._v("Boolean")]),e._v(". Par défaut la suppression bénéficie d'un animation de fading. Utilisez "),n("code",[e._v("disable-transitions")]),e._v(" si vous ne souhaitez pas d'animations en utilisant un "),n("code",[e._v("Boolean")]),e._v(" à "),n("code",[e._v("true")]),e._v(". L'évènement "),n("code",[e._v("close")]),e._v(" se déclenche quand un tag est supprimé.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tag\n  v-for=\"tag in tags\"\n  :key=\"tag.name\"\n  closable\n  :type=\"tag.type\">\n  {{tag.name}}\n</el-tag>\n\n<script>\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: 'Tag 1', type: '' },\n          { name: 'Tag 2', type: 'success' },\n          { name: 'Tag 3', type: 'info' },\n          { name: 'Tag 4', type: 'warning' },\n          { name: 'Tag 5', type: 'danger' }\n        ]\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(3),e._m(4),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag\n  :key="tag"\n  v-for="tag in dynamicTags"\n  closable\n  :disable-transitions="false"\n  @close="handleClose(tag)">\n  {{tag}}\n</el-tag>\n<el-input\n  class="input-new-tag"\n  v-if="inputVisible"\n  v-model="inputValue"\n  ref="saveTagInput"\n  size="mini"\n  @keyup.enter.native="handleInputConfirm"\n  @blur="handleInputConfirm"\n>\n</el-input>\n<el-button v-else class="button-new-tag" size="small" @click="showInput">+ Nouveau Tag</el-button>\n\n<style>\n  .el-tag + .el-tag {\n    margin-left: 10px;\n  }\n  .button-new-tag {\n    margin-left: 10px;\n    height: 32px;\n    line-height: 30px;\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .input-new-tag {\n    width: 90px;\n    margin-left: 10px;\n    vertical-align: bottom;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        dynamicTags: [\'Tag 1\', \'Tag 2\', \'Tag 3\'],\n        inputVisible: false,\n        inputValue: \'\'\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let inputValue = this.inputValue;\n        if (inputValue) {\n          this.dynamicTags.push(inputValue);\n        }\n        this.inputVisible = false;\n        this.inputValue = \'\';\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),n("p",[e._v("En plus de la taille par défaut, Tag fournit d'autres tailles pour vos composants.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("size")]),e._v(" pour choisir une autre taille parmi "),n("code",[e._v("medium")]),e._v(", "),n("code",[e._v("small")]),e._v(" ou "),n("code",[e._v("mini")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tag>Défaut</el-tag>\n<el-tag size="medium">Medium</el-tag>\n<el-tag size="small">Small</el-tag>\n<el-tag size="mini">Mini</el-tag>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("effect")]),e._v(" pour changer. La valeur par défaut est "),n("code",[e._v("light")])])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="tag-group">\n  <span class="tag-group__title">Dark</span>\n  <el-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="dark">\n    {{ item.label }}\n  </el-tag>\n</div>\n<div class="tag-group">\n  <span class="tag-group__title">Plain</span>\n  <el-tag\n    v-for="item in items"\n    :key="item.label"\n    :type="item.type"\n    effect="plain">\n    {{ item.label }}\n  </el-tag>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        items: [\n          { type: \'\', label: \'Tag 1\' },\n          { type: \'success\', label: \'Tag 2\' },\n          { type: \'info\', label: \'Tag 3\' },\n          { type: \'danger\', label: \'Tag 4\' },\n          { type: \'warning\', label: \'Tag 5\' }\n        ]\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tag"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tag")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"supprimer-des-tags"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#supprimer-des-tags","aria-hidden":"true"}},[this._v("¶")]),this._v(" Supprimer des tags")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"edition-dynamique"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#edition-dynamique","aria-hidden":"true"}},[this._v("¶")]),this._v(" Édition dynamique")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser l'évènement "),t("code",[this._v("close")]),this._v(" pour ajouter et supprimer des tags dynamiquement.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"tailles"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tailles","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tailles")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"theme"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[this._v("¶")]),this._v(" Theme")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Les balises utilisent trois thèmes différents: "),t("code",[this._v("dark")]),this._v(", "),t("code",[this._v("light")]),this._v(" et "),t("code",[this._v("plain")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("type")]),n("td",[e._v("Type du tag.")]),n("td",[e._v("string")]),n("td",[e._v("success/info/warning/danger")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("closable")]),n("td",[e._v("Si le tag peut être supprimé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disable-transitions")]),n("td",[e._v("Si les animations sont désactivées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("hit")]),n("td",[e._v("Si le tag à une bordure mise en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("Couleur de fond du tag.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du tag.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("effect")]),n("td",[e._v("component theme")]),n("td",[e._v("string")]),n("td",[e._v("dark / light / plain")]),n("td",[e._v("light")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("click")]),n("td",[e._v("Se déclenche quand le tag est cliqué.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("close")]),n("td",[e._v("Se déclenche quand le tag est supprimé.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},796:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Choisissez un horaire"},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})],1)},staticRenderFns:[]},{data:function(){return{value:""}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-time-picker",{attrs:{"arrow-control":"","picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Horaire libre"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:new Date(2016,9,10,18,40),value2:new Date(2016,9,10,18,40)}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-select",{attrs:{placeholder:"Horaire de début","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:t.startTime,callback:function(e){t.startTime=e},expression:"startTime"}}),t._v(" "),n("el-time-select",{attrs:{placeholder:"Horaire de fin","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:t.startTime}},model:{value:t.endTime,callback:function(e){t.endTime=e},expression:"endTime"}})]],2)},staticRenderFns:[]},{data:function(){return{startTime:"",endTime:""}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-time-picker",{attrs:{"is-range":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value1,callback:function(e){t.value1=e},expression:"value1"}}),t._v(" "),n("el-time-picker",{attrs:{"is-range":"","arrow-control":"","range-separator":"To","start-placeholder":"Horaire de début","end-placeholder":"Horaire de fin"},model:{value:t.value2,callback:function(e){t.value2=e},expression:"value2"}})]],2)},staticRenderFns:[]},{data:function(){return{value1:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)],value2:[new Date(2016,9,10,8,40),new Date(2016,9,10,9,40)]}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Utiliser TimePicker pour sélectionner un horaire.")]),e._m(1),n("p",[e._v("Vous pouvez fournir une liste d'horaires fixés pour que l'utilisateur en choisisse un.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-select")]),e._v(" puis assignez un horaire de début, de fin et un pas grâce aux propriétés "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(" et "),n("code",[e._v("step")]),e._v(" de l'attribut "),n("code",[e._v("picker-options")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-time-select\n  v-model=\"value\"\n  :picker-options=\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"\n  placeholder=\"Choisissez un horaire\">\n</el-time-select>\n\n<script>\n  export default {\n    data() {\n      return {\n        value: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez aussi laisser l'utilisateur choisir librement un horaire.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("el-time-picker")]),e._v(" puis l'attribut "),n("code",[e._v("picker-options")]),e._v(" et sa propriété "),n("code",[e._v("selectableRange")]),e._v(" pour déterminer la tranche horaire disponible. Par défaut, vous pouvez utiliser la molette de votre souris, ou les flèches directionnelles si l'attribut "),n("code",[e._v("arrow-control")]),e._v(" est présent.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    v-model="value1"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n  <el-time-picker\n    arrow-control\n    v-model="value2"\n    :picker-options="{\n      selectableRange: \'18:30:00 - 20:30:00\'\n    }"\n    placeholder="Horaire libre">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: new Date(2016, 9, 10, 18, 40),\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(3),n("p",[e._v("Vous pouvez définir un intervalle de temps. Si l'horaire de début est sélectionné en premier, certains horaires de fins seront désactivés s'ils ont lieu avant l'horaire de début.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-time-select\n    placeholder=\"Horaire de début\"\n    v-model=\"startTime\"\n    :picker-options=\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\">\n  </el-time-select>\n  <el-time-select\n    placeholder=\"Horaire de fin\"\n    v-model=\"endTime\"\n    :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<script>\n  export default {\n    data() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Vous pouvez également définir un intervalle libre.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("is-range")]),e._v(". L'attribut "),n("code",[e._v("arrow-control")]),e._v(" est aussi supporté dans ce mode.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-time-picker\n    is-range\n    v-model="value1"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n  <el-time-picker\n    is-range\n    arrow-control\n    v-model="value2"\n    range-separator="To"\n    start-placeholder="Horaire de début"\n    end-placeholder="Horaire de fin">\n  </el-time-picker>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],\n        value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n<\/script>\n')])])])],2),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" TimePicker")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection-d-horaire-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection-d-horaire-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection d'horaire libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-fixe"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-fixe","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps fixe")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"intervalle-de-temps-libre"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#intervalle-de-temps-libre","aria-hidden":"true"}},[this._v("¶")]),this._v(" Intervalle de temps libre")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("date(TimePicker) / string(TimeSelect)")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("readonly")]),n("td",[e._v("Si TimePicker est en lecture seule.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si TimePicker est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("editable")]),n("td",[e._v("Si le champ d'input est éditable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("clearable")]),n("td",[e._v("Si un bouton d'effacement doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("Taille du champ.")]),n("td",[e._v("string")]),n("td",[e._v("medium / small / mini")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placeholder")]),n("td",[e._v("Placeholder en mode non-intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("start-placeholder")]),n("td",[e._v("Placeholder de l'horaire de début en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("end-placeholder")]),n("td",[e._v("Placeholder de l'horaire de fin en mode intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("is-range")]),n("td",[e._v("Si le mode intervalle est activé, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("arrow-control")]),n("td",[e._v("Si les flèches directionnelles peuvent être utilisées, marche avec "),n("code",[e._v("<el-time-picker>")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("align")]),n("td",[e._v("Alignement.")]),n("td",[e._v("left / center / right")]),n("td",[e._v("left")]),n("td")]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du menu du TimePicker.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("picker-options")]),n("td",[e._v("Options additionnelles, voir la table ci-dessous.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("{}")])]),n("tr",[n("td",[e._v("range-separator")]),n("td",[e._v("Séparateur d'intervalle.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("'-'")])]),n("tr",[n("td",[e._v("default-value")]),n("td",[e._v("Optionnel, date d'aujourd'hui par défaut.")]),n("td",[n("code",[e._v("Date")]),e._v(" pour le TimePicker, "),n("code",[e._v("string")]),e._v(" pour le TimeSelect")]),n("td",[e._v("Toute valeur acceptée par "),n("code",[e._v("new Date()")]),e._v(" pour le TimePicker, une valeur sélectionnable pour TimeSelect.")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("value-format")]),n("td",[e._v("Optionnel, uniquement pour TimePicker, format de la valeur. Si non spécifié, la valeur sera un objet "),n("code",[e._v("Date")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("Voir "),n("a",{attrs:{href:"#/en-US/component/date-picker#date-formats"}},[e._v("date formats")])]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Attribut "),n("code",[e._v("name")]),e._v(" natif de l'input.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("prefix-icon")]),n("td",[e._v("Classe de l'icône de préfixe.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-time")])]),n("tr",[n("td",[e._v("clear-icon")]),n("td",[e._v("Classe de l'icône d'effacement.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-icon-circle-close")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timeselect"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timeselect","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimeSelect")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("start")]),n("td",[e._v("Horaire de début.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("09:00")])]),n("tr",[n("td",[e._v("end")]),n("td",[e._v("Horaire de fin.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("18:00")])]),n("tr",[n("td",[e._v("step")]),n("td",[e._v("Intervalle entre les horaires.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:30")])]),n("tr",[n("td",[e._v("minTime")]),n("td",[e._v("Horaire minimum, n'importe quel horaire avant celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("00:00")])]),n("tr",[n("td",[e._v("maxTime")]),n("td",[e._v("Horaire maximum, n'importe quel horaire après celui-ci sera désactivé.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"options-de-timepicker"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#options-de-timepicker","aria-hidden":"true"}},[this._v("¶")]),this._v(" Options de TimePicker")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("selectableRange")]),n("td",[e._v("Intervalle de temps disponible, e.g."),n("code",[e._v("'18:30:00 - 20:30:00'")]),e._v(" ou "),n("code",[e._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),n("td",[e._v("string / array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Format du sélecteur.")]),n("td",[e._v("string")]),n("td",[e._v("hour "),n("code",[e._v("HH")]),e._v(", minute "),n("code",[e._v("mm")]),e._v(", second "),n("code",[e._v("ss")]),e._v(", AM/PM "),n("code",[e._v("A")])]),n("td",[e._v("HH:mm:ss")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand l'utilisateur confirme la valeur.")]),n("td",[e._v("La valeur confirmée.")])]),n("tr",[n("td",[e._v("blur")]),n("td",[e._v("Se déclenche quand le composant perd le focus.")]),n("td",[e._v("L'instance du composant.")])]),n("tr",[n("td",[e._v("focus")]),n("td",[e._v("Se déclenche quand le composant a le focus.")]),n("td",[e._v("L'instance du composant.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("focus")]),t("td",[this._v("Met le focus sur le composant.")]),t("td",[this._v("-")])])])])}],!1,null,null,null);t.default=i.exports},797:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("div",{staticClass:"radio"},[n._v("\n    Order:\n    "),a("el-radio-group",{model:{value:n.reverse,callback:function(e){n.reverse=e},expression:"reverse"}},[a("el-radio",{attrs:{label:!0}},[n._v("Descendant")]),n._v(" "),a("el-radio",{attrs:{label:!1}},[n._v("Ascendant")])],1)],1),n._v(" "),a("el-timeline",{attrs:{reverse:n.reverse}},n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]},{data:function(){return{reverse:!0,activities:[{content:"Début de l'évènement",timestamp:"2018-04-15"},{content:"Approuvé",timestamp:"2018-04-13"},{content:"Succès",timestamp:"2018-04-11"}]}}}),"element-demo1":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("div",{staticClass:"block"},[a("el-timeline",n._l(n.activities,function(e,t){return a("el-timeline-item",{key:t,attrs:{icon:e.icon,type:e.type,color:e.color,size:e.size,timestamp:e.timestamp}},[n._v("\n      "+n._s(e.content)+"\n    ")])}),1)],1)])},staticRenderFns:[]},{data:function(){return{activities:[{content:"Icône",timestamp:"2018-04-12 20:46",size:"large",type:"primary",icon:"el-icon-more"},{content:"Couleur",timestamp:"2018-04-03 20:46",color:"#0bbd87"},{content:"Taille",timestamp:"2018-04-03 20:46",size:"large"},{content:"Défaut",timestamp:"2018-04-03 20:46"}]}}}),"element-demo2":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"block"},[n("el-timeline",[n("el-timeline-item",{attrs:{timestamp:"2018/4/12",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/12 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/3",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/3 20:46")])])],1),e._v(" "),n("el-timeline-item",{attrs:{timestamp:"2018/4/2",placement:"top"}},[n("el-card",[n("h4",[e._v("Mise à jour du template GitHub")]),e._v(" "),n("p",[e._v("Commit de Tom le 2018/4/2 20:46")])])],1)],1)],1)])},staticRenderFns:[]},{})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche une suite d'évènements dans un ordre chronologique.")]),e._m(1),n("p",[e._v("La timeline peut être divisée en plusieurs activités en ordre ascendant ou descendant. Les timestamps sont des caractéristiques importantes qui les distinguent des autres composants. Notez la différence avec Steps.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <div class="radio">\n    Order:\n    <el-radio-group v-model="reverse">\n      <el-radio :label="true">Descendant</el-radio>\n      <el-radio :label="false">Ascendant</el-radio>\n    </el-radio-group>\n  </div>\n\n  <el-timeline :reverse="reverse">\n    <el-timeline-item\n      v-for="(activity, index) in activities"\n      :key="index"\n      :timestamp="activity.timestamp">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        reverse: true,\n        activities: [{\n          content: \'Début de l\\\'évènement\',\n          timestamp: \'2018-04-15\'\n        }, {\n          content: \'Approuvé\',\n          timestamp: \'2018-04-13\'\n        }, {\n          content: \'Succès\',\n          timestamp: \'2018-04-11\'\n        }]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez personnaliser la taille, la couleur et les icônes de chaque Noeud.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<div class=\"block\">\n  <el-timeline>\n    <el-timeline-item\n      v-for=\"(activity, index) in activities\"\n      :key=\"index\"\n      :icon=\"activity.icon\"\n      :type=\"activity.type\"\n      :color=\"activity.color\"\n      :size=\"activity.size\"\n      :timestamp=\"activity.timestamp\">\n      {{activity.content}}\n    </el-timeline-item>\n  </el-timeline>\n</div>\n\n<script>\n  export default {\n    data() {\n      return {\n        activities: [{\n          content: 'Icône',\n          timestamp: '2018-04-12 20:46',\n          size: 'large',\n          type: 'primary',\n          icon: 'el-icon-more'\n        }, {\n          content: 'Couleur',\n          timestamp: '2018-04-03 20:46',\n          color: '#0bbd87'\n        }, {\n          content: 'Taille',\n          timestamp: '2018-04-03 20:46',\n          size: 'large'\n        }, {\n          content: 'Défaut',\n          timestamp: '2018-04-03 20:46'\n        }]\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Le timestamp peut être placé au-dessus du contenu lorsque celui-ci est trop haut.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="block">\n  <el-timeline>\n    <el-timeline-item timestamp="2018/4/12" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/12 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/3" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/3 20:46</p>\n      </el-card>\n    </el-timeline-item>\n    <el-timeline-item timestamp="2018/4/2" placement="top">\n      <el-card>\n        <h4>Mise à jour du template GitHub</h4>\n        <p>Commit de Tom le 2018/4/2 20:46</p>\n      </el-card>\n    </el-timeline-item>\n  </el-timeline>\n</div>\n')])])])],2),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timeline")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"timestamp-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#timestamp-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Timestamp personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs-de-timeline"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs-de-timeline","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs de Timeline")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("reverse")]),n("td",[e._v("Si l'ordre chronologique est ascendant ou descendant, le défaut étant ascendant.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attribut-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attribut-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attribut de Timeline-item")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("timestamp")]),n("td",[e._v("Le contenu du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("hide-timestamp")]),n("td",[e._v("Si le timestamp doit être affiché.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("La position du timestamp.")]),n("td",[e._v("string")]),n("td",[e._v("top / bottom")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("type")]),n("td",[e._v("Le type de noeud.")]),n("td",[e._v("string")]),n("td",[e._v("primary / success / warning / danger / info")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("color")]),n("td",[e._v("La couleur de fond du noeud.")]),n("td",[e._v("string")]),n("td",[e._v("hsl / hsv / hex / rgb")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("size")]),n("td",[e._v("La taille du noeud")]),n("td",[e._v("string")]),n("td",[e._v("normal / large")]),n("td",[e._v("normal")])]),n("tr",[n("td",[e._v("icon")]),n("td",[e._v("Le nom de classe de l'icône.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slots-de-timeline-item"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slots-de-timeline-item","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slots de Timeline-Item")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour le timeline-item.")])]),t("tr",[t("td",[this._v("dot")]),t("td",[this._v("Noeud personnalisé.")])])])])}],!1,null,null,null);t.default=i.exports},798:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("div",{staticClass:"box"},[n("div",{staticClass:"top"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[n("el-button",[e._v("top-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[n("el-button",[e._v("top")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[n("el-button",[e._v("top-end")])],1)],1),e._v(" "),n("div",{staticClass:"left"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[n("el-button",[e._v("left-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[n("el-button",[e._v("left")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[n("el-button",[e._v("left-end")])],1)],1),e._v(" "),n("div",{staticClass:"right"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[n("el-button",[e._v("right-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[n("el-button",[e._v("right")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[n("el-button",[e._v("right-end")])],1)],1),e._v(" "),n("div",{staticClass:"bottom"},[n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[n("el-button",[e._v("bottom-start")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[n("el-button",[e._v("bottom")])],1),e._v(" "),n("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[n("el-button",[e._v("bottom-end")])],1)],1)])])},staticRenderFns:[]},{}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[t("el-button",[this._v("Dark")])],1),this._v(" "),t("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[t("el-button",[this._v("Light")])],1)],1)},staticRenderFns:[]},{}),"element-demo2":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tooltip",{attrs:{placement:"top"}},[t("div",{attrs:{slot:"content"},slot:"content"},[this._v("Multiples lignes"),t("br"),this._v("Seconde ligne")]),this._v(" "),t("el-button",[this._v("Top center")])],1)],1)},staticRenderFns:[]},{}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-tooltip",{attrs:{disabled:t.disabled,content:"Cliquez pour désactiver le tooltip",placement:"bottom",effect:"light"}},[n("el-button",{on:{click:function(e){t.disabled=!t.disabled}}},[t._v("Cliquez pour "+t._s(t.disabled?"activer":"désactiver")+" le tooltip")])],1)]],2)},staticRenderFns:[]},{data:function(){return{disabled:!1}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'afficher des informations au passage de la souris sur un élément.")]),e._m(1),n("p",[e._v("Tooltip a 9 emplacements.")]),n("demo-block",[n("div",[n("p",[e._v("L'attribut "),n("code",[e._v("content")]),e._v(" détermine le contenu à afficher. L'attribut "),n("code",[e._v("placement")]),e._v(" détermine la position du tooltip. Sa valeur est sous la forme "),n("code",[e._v("[orientation]-[alignment]")]),e._v(" avec quatre orientations "),n("code",[e._v("top")]),e._v(", "),n("code",[e._v("left")]),e._v(", "),n("code",[e._v("right")]),e._v(", "),n("code",[e._v("bottom")]),e._v(" et trois alignements "),n("code",[e._v("start")]),e._v(", "),n("code",[e._v("end")]),e._v(", "),n("code",[e._v("null")]),e._v(", le défaut étant "),n("code",[e._v("null")]),e._v(". Par exemple, "),n("code",[e._v('placement="left-end"')]),e._v(" affichera la tooltip sur la gauche de l'élément et le bas de la tooltip sera aligné avec le bas de l'élément.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="box">\n  <div class="top">\n    <el-tooltip class="item" effect="dark" content="Top Left prompts info" placement="top-start">\n      <el-button>top-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center prompts info" placement="top">\n      <el-button>top</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right prompts info" placement="top-end">\n      <el-button>top-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top prompts info" placement="left-start">\n      <el-button>left-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center prompts info" placement="left">\n      <el-button>left</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom prompts info" placement="left-end">\n      <el-button>left-end</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top prompts info" placement="right-start">\n      <el-button>right-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center prompts info" placement="right">\n      <el-button>right</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom prompts info" placement="right-end">\n      <el-button>right-end</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">\n      <el-button>bottom-start</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center prompts info" placement="bottom">\n      <el-button>bottom</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">\n      <el-button>bottom-end</el-button>\n    </el-tooltip>\n  </div>\n</div>\n\n<style>\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 110px;\n    }\n\n    .right {\n      float: right;\n      width: 110px;\n    }\n\n    .bottom {\n      clear: both;\n      text-align: center;\n    }\n\n    .item {\n      margin: 4px;\n    }\n\n    .left .el-tooltip__popper,\n    .right .el-tooltip__popper {\n      padding: 8px 10px;\n    }\n\n    .el-button {\n      width: 110px;\n    }\n  }\n</style>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("effect")]),e._v(" pour modifier le thème, le défaut étant "),n("code",[e._v("dark")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip content="Top center" placement="top">\n  <el-button>Dark</el-button>\n</el-tooltip>\n<el-tooltip content="Bottom center" placement="bottom" effect="light">\n  <el-button>Light</el-button>\n</el-tooltip>\n')])])])],2),e._m(4),n("p",[e._v("Vous pouvez afficher plus de lignes et formater leur contenu.")]),n("demo-block",[n("div",[n("p",[e._v("Utiliser un slot nommé "),n("code",[e._v("content")]),e._v(" au lieu de l'attribut.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-tooltip placement="top">\n  <div slot="content">Multiples lignes<br/>Seconde ligne</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n')])])])],2),e._m(5),n("p",[e._v("Vous pouvez utiliser d'autres attributs pour un usage plus poussé:")]),e._m(6),e._m(7),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-tooltip :disabled="disabled" content="Cliquez pour désactiver le tooltip" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">Cliquez pour {{disabled ? \'activer\' : \'désactiver\'}} le tooltip</el-button>\n  </el-tooltip>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        disabled: false\n      };\n    }\n  };\n<\/script>\n\n<style>\n  .slide-fade-enter-active {\n    transition: all .3s ease;\n  }\n  .slide-fade-leave-active {\n    transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);\n  }\n  .slide-fade-enter, .expand-fade-leave-active {\n    margin-left: 20px;\n    opacity: 0;\n  }\n</style>\n')])])])],2),e._m(9),e._m(10),e._m(11)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tooltip"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tooltip")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"themes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#themes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Thèmes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Tooltip a deux thèmes: "),t("code",[this._v("dark")]),this._v(" et "),t("code",[this._v("light")]),this._v("。")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"plus-de-contenu"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#plus-de-contenu","aria-hidden":"true"}},[this._v("¶")]),this._v(" Plus de contenu")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage-avance"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage-avance","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage avancé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("transition")]),this._v(" permet de définir l'animation d'apparition et de disparition du tooltip, le défaut étant el-fade-in-linear.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("disabled")]),this._v(" permet de désactiver le tooltip. Mettez-le simplement à "),t("code",[this._v("true")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("En réalité, Tooltip est une extension de "),t("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[this._v("Vue-popper")]),this._v(", vous pouvez donc utiliser n'importe quel attribut de Vue-popper.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"tip"},[n("p",[e._v("Le composant "),n("code",[e._v("router-link")]),e._v(" n'est pas supporté par tooltip, utilisez plutôt "),n("code",[e._v("vm.$router.push")]),e._v(".")]),n("p",[e._v("Les éléments de formulaire désactivés ne sont pas supportés par Tooltip, plus d'informations sur "),n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[e._v("MDN")]),e._v(". Vous aurez besoin de mettre ces éléments dans un conteneur pour que cela fonctionne.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("effect")]),n("td",[e._v("Thème du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("dark/light")]),n("td",[e._v("dark")])]),n("tr",[n("td",[e._v("content")]),n("td",[e._v("Contenu à afficher, écrasé par "),n("code",[e._v("slot#content")]),e._v(".")]),n("td",[e._v("String")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("placement")]),n("td",[e._v("Position du Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),n("td",[e._v("bottom")])]),n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("Visibilité du Tooltip.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le Tooltip est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("offset")]),n("td",[e._v("Décalage du Tooltip.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("transition")]),n("td",[e._v("Animation de transition.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("el-fade-in-linear")])]),n("tr",[n("td",[e._v("visible-arrow")]),n("td",[e._v("Si une flèche doit être affichée. Pour plus d'information, voir "),n("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[e._v("Vue-popper")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("popper-options")]),n("td",[e._v("Paramètres "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[e._v("Object")]),n("td",[e._v("Se référer à  "),n("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[e._v("popper.js")]),e._v(".")]),n("td",[n("code",[e._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),n("tr",[n("td",[e._v("open-delay")]),n("td",[e._v("Délai avant l'apparition en millisecondes.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("manual")]),n("td",[e._v("Si le contrôle du Tooltip doit être manuel. "),n("code",[e._v("mouseenter")]),e._v(" et "),n("code",[e._v("mouseleave")]),e._v(" n'auront pas d'effet si "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("popper-class")]),n("td",[e._v("Classe du popper de Tooltip.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("enterable")]),n("td",[e._v("Si la souris peut entrer dans la Tooltip.")]),n("td",[e._v("Boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("hide-after")]),n("td",[e._v("Délai avant disparition.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])]),n("tr",[n("td",[e._v("tabindex")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/tabindex"}},[e._v("tabindex")]),e._v(" de Tooltip.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("0")])])])])}],!1,null,null,null);t.default=i.exports},799:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value:[1,4]}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{filterable:"","filter-method":t.filterMethod,"filter-placeholder":"State Abbreviations",data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){var n,a;return{data:(n=[],a=["CA","IL","MD","TX","FL","CO","CT"],["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "].forEach(function(e,t){n.push({label:e,key:t,initial:a[t]})}),n),value:[],filterMethod:function(e,t){return-1<t.initial.toLowerCase().indexOf(e.toLowerCase())}}}}),"element-demo2":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[[a("p",{staticStyle:{"text-align":"center",margin:"0 0 20px"}},[n._v("Utilise render-content")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":n.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},model:{value:n.value,callback:function(e){n.value=e},expression:"value"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1),n._v(" "),a("p",{staticStyle:{"text-align":"center",margin:"50px 0 20px"}},[n._v("Utilise des slots")]),n._v(" "),a("div",{staticStyle:{"text-align":"center"}},[a("el-transfer",{staticStyle:{"text-align":"left",display:"inline-block"},attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],titles:["Source","Target"],"button-texts":["To left","To right"],format:{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:n.data},on:{change:n.handleChange},scopedSlots:n._u([{key:"default",fn:function(e){var t=e.option;return a("span",{},[n._v(n._s(t.key)+" - "+n._s(t.label))])}}]),model:{value:n.value4,callback:function(e){n.value4=e},expression:"value4"}},[a("el-button",{staticClass:"transfer-footer",attrs:{slot:"left-footer",size:"small"},slot:"left-footer"},[n._v("Opération")]),n._v(" "),a("el-button",{staticClass:"transfer-footer",attrs:{slot:"right-footer",size:"small"},slot:"right-footer"},[n._v("Opération")])],1)],1)],1)]],2)},staticRenderFns:[]},{data:function(){return this.$createElement,{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({key:n,label:"Option "+n,disabled:n%4==0});return t}(),value:[1],value4:[1],renderFunc:function(e,t){return e("span",[t.key," - ",t.label])}}},methods:{handleChange:function(e,t,n){console.log(e,t,n)}}}),"element-demo3":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:t.data},model:{value:t.value,callback:function(e){t.value=e},expression:"value"}})]],2)},staticRenderFns:[]},{data:function(){return{data:function(e){for(var t=[],n=1;n<=15;n++)t.push({value:n,desc:"Option "+n,disabled:n%4==0});return t}(),value:[]}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet de transférer des options d'une liste à une autre de manière ergonomique.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Les données sont passée via l'attribut "),n("code",[e._v("data")]),e._v(". Ce doit être un tableau d'objets, chaque objet ayant les propriétés suivantes: "),n("code",[e._v("key")]),e._v(" étant l'identifiant de l'objet, "),n("code",[e._v("label")]),e._v(" étant le texte à afficher et "),n("code",[e._v("disabled")]),e._v(" indiquant si l'objet est désactivé. Ces objets sont synchronisés avec "),n("code",[e._v("v-model")]),e._v(", sa valeur étant un tableau d'identifiants des objets. Si vous ne souhaitez pas avoir une liste vide par défaut, vous pouvez donc initialiser "),n("code",[e._v("v-model")]),e._v(" avec un tableau.")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1, 4]\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(2),n("p",[e._v("Vous pouvez filtrer les options.")]),n("demo-block",[n("div",[n("p",[e._v("Ajoutez l'attribut "),n("code",[e._v("filterable")]),e._v(" activer le filtrage. Par défaut, si la propriété "),n("code",[e._v("label")]),e._v(" de l'objet contient le mot-clé, il sera inclus dans les résultats. Vous pouvez aussi implémenter votre propre filtre grâce à "),n("code",[e._v("filter-method")]),e._v(". Cette fonction est lancée à chaque changement de mot-clé. Si elle retourne "),n("code",[e._v("true")]),e._v(" l'objet en question sera dans les résultats.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<template>\n  <el-transfer\n    filterable\n    :filter-method=\"filterMethod\"\n    filter-placeholder=\"State Abbreviations\"\n    v-model=\"value\"\n    :data=\"data\">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            initial: initials[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [],\n        filterMethod(query, item) {\n          return item.initial.toLowerCase().indexOf(query.toLowerCase()) > -1;\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("p",[e._v("Vous pouvez personnaliser les titres, les textes des boutons, les fonctions de rendu pour les objets et le contenu du footer.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("titles")]),e._v(", "),n("code",[e._v("button-texts")]),e._v(", "),n("code",[e._v("render-content")]),e._v(" et "),n("code",[e._v("format")]),e._v(" pour personnaliser respectivement les titres des listes, les textes des boutons, les fonctions de rendus des objets et le texte des statuts du header. Vous pouvez aussi utiliser des slots pour les objets. Pour le contenu du footer, deux slots sont fournis: "),n("code",[e._v("left-footer")]),e._v(" et "),n("code",[e._v("right-footer")]),e._v(". Si vous souhaitez que certains items soient sélectionnés par défaut, utilisez "),n("code",[e._v("left-default-checked")]),e._v(" et "),n("code",[e._v("right-default-checked")]),e._v(". Enfin, cet exemple utilise aussi l'évènement "),n("code",[e._v("change")]),e._v(". Notez que cet exemple ne fonctionne pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" fonctionnera si les dépendances sont satisfaites.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <p style="text-align: center; margin: 0 0 20px">Utilise render-content</p>\n  <div style="text-align: center">\n    <el-transfer\n      style="text-align: left; display: inline-block"\n      v-model="value"\n      filterable\n      :left-default-checked="[2, 3]"\n      :right-default-checked="[1]"\n      :render-content="renderFunc"\n      :titles="[\'Source\', \'Target\']"\n      :button-texts="[\'To left\', \'To right\']"\n      :format="{\n        noChecked: \'${total}\',\n        hasChecked: \'${checked}/${total}\'\n      }"\n      @change="handleChange"\n      :data="data">\n      <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n      <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n    </el-transfer>\n    <p style="text-align: center; margin: 50px 0 20px">Utilise des slots</p>\n    <div style="text-align: center">\n      <el-transfer\n        style="text-align: left; display: inline-block"\n        v-model="value4"\n        filterable\n        :left-default-checked="[2, 3]"\n        :right-default-checked="[1]"\n        :titles="[\'Source\', \'Target\']"\n        :button-texts="[\'To left\', \'To right\']"\n        :format="{\n          noChecked: \'${total}\',\n          hasChecked: \'${checked}/${total}\'\n        }"\n        @change="handleChange"\n        :data="data">\n        <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>\n        <el-button class="transfer-footer" slot="left-footer" size="small">Opération</el-button>\n        <el-button class="transfer-footer" slot="right-footer" size="small">Opération</el-button>\n      </el-transfer>\n    </div>\n  </div>\n</template>\n\n<style>\n  .transfer-footer {\n    margin-left: 20px;\n    padding: 6px 5px;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: [1],\n        value4: [1],\n        renderFunc(h, option) {\n          return <span>{ option.key } - { option.label }</span>;\n        }\n      };\n    },\n\n    methods: {\n      handleChange(value, direction, movedKeys) {\n        console.log(value, direction, movedKeys);\n      }\n    }\n  };\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("div",[n("p",[e._v("Les objets de cet exemple n'ont pas de "),n("code",[e._v("key")]),e._v(" ni "),n("code",[e._v("label")]),e._v(", à la place ils ont "),n("code",[e._v("value")]),e._v(" et "),n("code",[e._v("desc")]),e._v(". Vous devez donc configurer les alias de "),n("code",[e._v("key")]),e._v(" et "),n("code",[e._v("label")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <el-transfer\n    v-model="value"\n    :props="{\n      key: \'value\',\n      label: \'desc\'\n    }"\n    :data="data">\n  </el-transfer>\n</template>\n\n<script>\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `Option ${ i }`,\n            disabled: i % 4 === 0\n          });\n        }\n        return data;\n      };\n      return {\n        data: generateData(),\n        value: []\n      };\n    }\n  };\n<\/script>\n')])])])],2),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transfer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transfer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"personnalisable"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#personnalisable","aria-hidden":"true"}},[this._v("¶")]),this._v(" Personnalisable")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"alias-des-proprietes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#alias-des-proprietes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Alias des propriétés")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("p",[e._v("Par défaut, Transfer utilise "),n("code",[e._v("key")]),e._v(", "),n("code",[e._v("label")]),e._v(" et "),n("code",[e._v("disabled")]),e._v(" de vos objets. Si vos objets ont des propriétés différentes, vous pouvez utiliser l'attribut "),n("code",[e._v("props")]),e._v(" pour définir des alias.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("value / v-model")]),n("td",[e._v("La valeur liée.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données principales.")]),n("td",[e._v("array[{ key, label, disabled }]")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("filterable")]),n("td",[e._v("Si Transfer est filtrable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("filter-placeholder")]),n("td",[e._v("Placeholder du champ de filtrage.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("Enter keyword")])]),n("tr",[n("td",[e._v("filter-method")]),n("td",[e._v("Méthode de filtrage.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("target-order")]),n("td",[e._v("Ordre de tri des éléments de la liste d'arrivée. S'il est à "),n("code",[e._v("original")]),e._v(", les éléments garderont le même ordre que la liste d'origine. Si à "),n("code",[e._v("push")]),e._v(", les nouveaux éléments seront mis à la suite des anciens. Si mis à "),n("code",[e._v("unshift")]),e._v(", les nouveaux éléments seront mis en haut de la liste.")]),n("td",[e._v("string")]),n("td",[e._v("original / push / unshift")]),n("td",[e._v("original")])]),n("tr",[n("td",[e._v("titles")]),n("td",[e._v("Titres des listes.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("['List 1', 'List 2']")])]),n("tr",[n("td",[e._v("button-texts")]),n("td",[e._v("Textes des boutons.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les objets.")]),n("td",[e._v("function(h, option)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("format")]),n("td",[e._v("Textes de statut dans le header.")]),n("td",[e._v("object{noChecked, hasChecked}")]),n("td",[e._v("—")]),n("td",[e._v("{ noChecked: '${checked}/${total}', hasChecked: '${checked}/${total}' }")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Alias des propriétés des objets source.")]),n("td",[e._v("object{key, label, disabled}")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("left-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de gauche.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])]),n("tr",[n("td",[e._v("right-default-checked")]),n("td",[e._v("Tableau des objets initialement sélectionnés dans la liste de droite.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[ ]")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("left-footer")]),t("td",[this._v("Contenu du footer de la liste de gauche.")])]),t("tr",[t("td",[this._v("right-footer")]),t("td",[this._v("Contenu du footer de la liste de droite.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Contenu personnalisé pour les objets. Le paramètre est { option }.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Méthode")]),t("th",[this._v("Description")]),t("th",[this._v("Paramètres")])])]),t("tbody",[t("tr",[t("td",[this._v("clearQuery")]),t("td",[this._v("Efface le filtre d'une liste.")]),t("td",[this._v("'left' / 'right'")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"events"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("¶")]),this._v(" Events")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Event nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("change")]),n("td",[e._v("Se déclenche quand un objet change dans la liste de droite.")]),n("td",[e._v("Tableau des objets de la liste de droite, direction du transfer ("),n("code",[e._v("left")]),e._v(" ou "),n("code",[e._v("right")]),e._v("), les clés des objets bougés.")])]),n("tr",[n("td",[e._v("left-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de gauche.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])]),n("tr",[n("td",[e._v("right-check-change")]),n("td",[e._v("Se déclenche quand l'utilisateur change le statut d'un objet dans la liste de droite.")]),n("td",[e._v("Liste des objets actuellement sélectionnées, Liste des objets dont le statut a changé.")])])])])}],!1,null,null,null);t.default=i.exports},800:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show=!t.show}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-fade-in-linear"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in-linear")])]),t._v(" "),n("transition",{attrs:{name:"el-fade-in"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],staticClass:"transition-box"},[t._v(".el-fade-in")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show:!0}}}),"element-demo1":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show2=!t.show2}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[n("transition",{attrs:{name:"el-zoom-in-center"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-center")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-top"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-top")])]),t._v(" "),n("transition",{attrs:{name:"el-zoom-in-bottom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show2,expression:"show2"}],staticClass:"transition-box"},[t._v(".el-zoom-in-bottom")])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show2:!0}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[[n("div",[n("el-button",{on:{click:function(e){t.show3=!t.show3}}},[t._v("Cliquez ici")]),t._v(" "),n("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[n("el-collapse-transition",[n("div",{directives:[{name:"show",rawName:"v-show",value:t.show3,expression:"show3"}]},[n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")]),t._v(" "),n("div",{staticClass:"transition-box"},[t._v("el-collapse-transition")])])])],1)],1)]],2)},staticRenderFns:[]},{data:function(){return{show3:!0}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),e._m(1),e._m(2),n("demo-block",[n("div",[n("p",[e._v("Il y a deux effets de fading: "),n("code",[e._v("el-fade-in-linear")]),e._v(" et "),n("code",[e._v("el-fade-in")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show = !show">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-fade-in-linear">\n        <div v-show="show" class="transition-box">.el-fade-in-linear</div>\n      </transition>\n      <transition name="el-fade-in">\n        <div v-show="show" class="transition-box">.el-fade-in</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[n("code",[e._v("el-zoom-in-center")]),e._v(", "),n("code",[e._v("el-zoom-in-top")]),e._v(" et "),n("code",[e._v("el-zoom-in-bottom")]),e._v(" sont fournis.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show2 = !show2">Cliquez ici</el-button>\n\n    <div style="display: flex; margin-top: 20px; height: 100px;">\n      <transition name="el-zoom-in-center">\n        <div v-show="show2" class="transition-box">.el-zoom-in-center</div>\n      </transition>\n\n      <transition name="el-zoom-in-top">\n        <div v-show="show2" class="transition-box">.el-zoom-in-top</div>\n      </transition>\n\n      <transition name="el-zoom-in-bottom">\n        <div v-show="show2" class="transition-box">.el-zoom-in-bottom</div>\n      </transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show2: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<template>\n  <div>\n    <el-button @click="show3 = !show3">Cliquez ici</el-button>\n\n    <div style="margin-top: 20px; height: 200px;">\n      <el-collapse-transition>\n        <div v-show="show3">\n          <div class="transition-box">el-collapse-transition</div>\n          <div class="transition-box">el-collapse-transition</div>\n        </div>\n      </el-collapse-transition>\n    </div>\n  </div>\n</template>\n\n<script>\n    export default {\n    data: () => ({\n      show3: true\n    })\n  }\n<\/script>\n\n<style>\n  .transition-box {\n    margin-bottom: 10px;\n    width: 200px;\n    height: 100px;\n    border-radius: 4px;\n    background-color: #409EFF;\n    text-align: center;\n    color: #fff;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    margin-right: 20px;\n  }\n</style>\n')])])])],2),e._m(6),e._m(7)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"transitions"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#transitions","aria-hidden":"true"}},[this._v("¶")]),this._v(" Transitions")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez utiliser les transitions d'Element directement. Mais avant ça, merci de lire la "),t("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[this._v("documentation")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"fade"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[this._v("¶")]),this._v(" Fade")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"zoom"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[this._v("¶")]),this._v(" Zoom")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"collapse"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[this._v("¶")]),this._v(" Collapse")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Pour l'effet collapse, utilisez le composant "),t("code",[this._v("el-collapse-transition")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"a-la-demande"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[this._v("¶")]),this._v(" À la demande")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-js"},[this._v("// fade/zoom\nimport 'element-ui/lib/theme-chalk/base.css';\n// collapse\nimport CollapseTransition from 'element-ui/lib/transitions/collapse-transition';\nimport Vue from 'vue'\n\nVue.component(CollapseTransition.name, CollapseTransition)\n")])])}],!1,null,null,null);t.default=i.exports},801:function(e,t,n){"use strict";n.r(t);var a,l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},r={name:"component-doc",components:{"element-demo0":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo1":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]},{data:function(){return{props:{label:"name",children:"zones"},count:1}},methods:{handleCheckChange:function(e,t,n){console.log(e,t,n)},handleNodeClick:function(e){console.log(e)},loadNode:function(e,t){var n,a=this;return 0===e.level?t([{name:"Root1"},{name:"Root2"}]):3<e.level?t([]):(n="region1"===e.data.name||"region2"!==e.data.name&&.5<Math.random(),void setTimeout(function(){var e;e=n?[{name:"zone"+a.count++},{name:"zone"+a.count++}]:[],t(e)},500))}}}),"element-demo2":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{props:this.props,load:this.loadNode,lazy:"","show-checkbox":""}})],1)},staticRenderFns:[]},{data:function(){return{props:{label:"name",children:"zones",isLeaf:"leaf"}}},methods:{loadNode:function(e,t){return 0===e.level?t([{name:"region"}]):1<e.level?t([]):void setTimeout(function(){t([{name:"leaf",leaf:!0},{name:"zone"}])},500)}}}),"element-demo3":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,"show-checkbox":""},on:{"check-change":this.handleCheckChange}})],1)},staticRenderFns:[]},{data:function(){return{data:[{id:1,label:"Niveau un 1",children:[{id:3,label:"Niveau deux 2-1",children:[{id:4,label:"Niveau trois 3-1-1"},{id:5,label:"Niveau trois 3-1-2",disabled:!0}]},{id:2,label:"Niveau deux 2-2",disabled:!0,children:[{id:6,label:"Niveau trois 3-2-1"},{id:7,label:"Niveau trois 3-2-2",disabled:!0}]}]}],defaultProps:{children:"children",label:"label",disabled:"disabled"}}}}),"element-demo4":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:this.defaultProps}})],1)},staticRenderFns:[]},{data:function(){return{data:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo5":l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{ref:"tree",attrs:{data:e.data,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:e.defaultProps}}),e._v(" "),n("div",{staticClass:"buttons"},[n("el-button",{on:{click:e.getCheckedNodes}},[e._v("Récupération par noeud")]),e._v(" "),n("el-button",{on:{click:e.getCheckedKeys}},[e._v("Récupération par clé")]),e._v(" "),n("el-button",{on:{click:e.setCheckedNodes}},[e._v("Sélection par noeud")]),e._v(" "),n("el-button",{on:{click:e.setCheckedKeys}},[e._v("Sélection par clé")]),e._v(" "),n("el-button",{on:{click:e.resetChecked}},[e._v("Reset")])],1)],1)},staticRenderFns:[]},{methods:{getCheckedNodes:function(){console.log(this.$refs.tree.getCheckedNodes())},getCheckedKeys:function(){console.log(this.$refs.tree.getCheckedKeys())},setCheckedNodes:function(){this.$refs.tree.setCheckedNodes([{id:5,label:"Niveau deux 2-1"},{id:9,label:"Niveau trois 1-1-1"}])},setCheckedKeys:function(){this.$refs.tree.setCheckedKeys([3])},resetChecked:function(){this.$refs.tree.setCheckedKeys([])}},data:function(){return{data:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo6":(a=1e3,l({render:function(){var a=this,e=a.$createElement,l=a._self._c||e;return l("div",[l("div",{staticClass:"custom-tree-container"},[l("div",{staticClass:"block"},[l("p",[a._v("Avec render-content")]),a._v(" "),l("el-tree",{attrs:{data:a.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":a.renderContent}})],1),a._v(" "),l("div",{staticClass:"block"},[l("p",[a._v("Avec un slot")]),a._v(" "),l("el-tree",{attrs:{data:a.data,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1},scopedSlots:a._u([{key:"default",fn:function(e){var t=e.node,n=e.data;return l("span",{staticClass:"custom-tree-node"},[l("span",[a._v(a._s(t.label))]),a._v(" "),l("span",[l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.append(n)}}},[a._v("\n            Ajouter\n          ")]),a._v(" "),l("el-button",{attrs:{type:"text",size:"mini"},on:{click:function(){return a.remove(t,n)}}},[a._v("\n            Supprimer\n          ")])],1)])}}])})],1)])])},staticRenderFns:[]},{data:function(){var e,t=[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}];return(e={data:JSON.parse(JSON.stringify(t))}).data=JSON.parse(JSON.stringify(t)),e},methods:{append:function(e){var t={id:a++,label:"testtest",children:[]};e.children||this.$set(e,"children",[]),e.children.push(t)},remove:function(e,t){var n=e.parent,a=n.data.children||n.data,l=a.findIndex(function(e){return e.id===t.id});a.splice(l,1)},renderContent:function(e,t){var n=this,a=t.node,l=t.data;return t.store,e("span",{class:"custom-tree-node"},[e("span",[a.label]),e("span",[e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.append(l)}}},["Ajouter"]),e("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(){return n.remove(a,l)}}},["Supprimer"])])])}}})),"element-demo7":l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:t.filterText,callback:function(e){t.filterText=e},expression:"filterText"}}),t._v(" "),n("el-tree",{ref:"tree",staticClass:"filter-tree",attrs:{data:t.data,props:t.defaultProps,"default-expand-all":"","filter-node-method":t.filterNode}})],1)},staticRenderFns:[]},{watch:{filterText:function(e){this.$refs.tree.filter(e)}},methods:{filterNode:function(e,t){return!e||-1!==t.label.indexOf(e)}},data:function(){return{filterText:"",data:[{id:1,label:"Niveau un 1",children:[{id:4,label:"Niveau deux 1-1",children:[{id:9,label:"Niveau trois 1-1-1"},{id:10,label:"Niveau trois 1-1-2"}]}]},{id:2,label:"Niveau un 2",children:[{id:5,label:"Niveau deux 2-1"},{id:6,label:"Niveau deux 2-2"}]},{id:3,label:"Niveau un 3",children:[{id:7,label:"Niveau deux 3-1"},{id:8,label:"Niveau deux 3-2"}]}],defaultProps:{children:"children",label:"label"}}}}),"element-demo8":l({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-tree",{attrs:{data:this.data,props:this.defaultProps,accordion:""},on:{"node-click":this.handleNodeClick}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleNodeClick:function(e){console.log(e)}}}),"element-demo9":l({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-tree",{attrs:{data:e.data,"node-key":"id","default-expand-all":"",draggable:"","allow-drop":e.allowDrop,"allow-drag":e.allowDrag},on:{"node-drag-start":e.handleDragStart,"node-drag-enter":e.handleDragEnter,"node-drag-leave":e.handleDragLeave,"node-drag-over":e.handleDragOver,"node-drag-end":e.handleDragEnd,"node-drop":e.handleDrop}})],1)},staticRenderFns:[]},{data:function(){return{data:[{label:"Niveau un 1",children:[{label:"Niveau deux 1-1",children:[{label:"Niveau trois 1-1-1"}]}]},{label:"Niveau un 2",children:[{label:"Niveau deux 2-1",children:[{label:"Niveau trois 2-1-1"}]},{label:"Niveau deux 2-2",children:[{label:"Niveau trois 2-2-1"}]}]},{label:"Niveau un 3",children:[{label:"Niveau deux 3-1",children:[{label:"Niveau trois 3-1-1"}]},{label:"Niveau deux 3-2",children:[{label:"Niveau trois 3-2-1"}]}]}],defaultProps:{children:"children",label:"label"}}},methods:{handleDragStart:function(e,t){console.log("drag start",e)},handleDragEnter:function(e,t,n){console.log("tree drag enter: ",t.label)},handleDragLeave:function(e,t,n){console.log("tree drag leave: ",t.label)},handleDragOver:function(e,t,n){console.log("tree drag over: ",t.label)},handleDragEnd:function(e,t,n,a){console.log("tree drag end: ",t&&t.label,n)},handleDrop:function(e,t,n,a){console.log("tree drop: ",t.label,n)},allowDrop:function(e,t,n){return"Niveau deux 3-1"!==t.data.label||"inner"!==n},allowDrag:function(e){return-1===e.data.label.indexOf("Niveau trois 3-1-1")}}})}},i=n(0),s=Object(i.a)(r,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Affiche un ensemble de données possédant plusieurs niveaux de hiérarchie ou d'imbrication.")]),e._m(1),n("p",[e._v("Voici la structure basique.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree :data=\"data\" :props=\"defaultProps\" @node-click=\"handleNodeClick\"></el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(2),n("p",[e._v("Vous pouvez activer la sélection des noeuds.")]),n("demo-block",[n("div",[n("p",[e._v("cet exemple montre également comment charger des données de manière asynchrone.")])]),n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones'\n        },\n        count: 1\n      };\n    },\n    methods: {\n      handleCheckChange(data, checked, indeterminate) {\n        console.log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        console.log(data);\n      },\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'Root1' }, { name: 'Root2' }]);\n        }\n        if (node.level > 3) return resolve([]);\n\n        var hasChild;\n        if (node.data.name === 'region1') {\n          hasChild = true;\n        } else if (node.data.name === 'region2') {\n          hasChild = false;\n        } else {\n          hasChild = Math.random() > 0.5;\n        }\n\n        setTimeout(() => {\n          var data;\n          if (hasChild) {\n            data = [{\n              name: 'zone' + this.count++\n            }, {\n              name: 'zone' + this.count++\n            }];\n          } else {\n            data = [];\n          }\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(3),n("demo-block",[n("div",[n("p",[e._v("Les données d'un noeud ne sont pas accessibles tant que la noeud n'est pas cliqué, l'arbre ne peut donc pas prédire si un noeud sera une feuille. C'est pourquoi un bouton de menu est ajouté à chaque noeud, et si c'est une feuille il disparaîtra après le clic. Vous pouvez également dire par avance à l'arbre si un noeud est une feuille, pour éviter l'apparition du bouton de menu.")])]),n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :props=\"props\"\n  :load=\"loadNode\"\n  lazy\n  show-checkbox>\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        props: {\n          label: 'name',\n          children: 'zones',\n          isLeaf: 'leaf'\n        },\n      };\n    },\n    methods: {\n      loadNode(node, resolve) {\n        if (node.level === 0) {\n          return resolve([{ name: 'region' }]);\n        }\n        if (node.level > 1) return resolve([]);\n\n        setTimeout(() => {\n          const data = [{\n            name: 'leaf',\n            leaf: true\n          }, {\n            name: 'zone'\n          }];\n\n          resolve(data);\n        }, 500);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(4),n("p",[e._v("Les checkbox des noeuds peuvent être désactivées individuellement.")]),n("demo-block",[n("div",[n("p",[e._v("Dans cet exemple, la propriété "),n("code",[e._v("disabled")]),e._v(" est ajoutée à "),n("code",[e._v("defaultProps")]),e._v(", et certains noeuds ont "),n("code",[e._v("disabled:true")]),e._v(". Les checkbox correspondantes sont donc désactivées.")])]),n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  show-checkbox\n  @check-change=\"handleCheckChange\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 3,\n            label: 'Niveau deux 2-1',\n            children: [{\n              id: 4,\n              label: 'Niveau trois 3-1-1'\n            }, {\n              id: 5,\n              label: 'Niveau trois 3-1-2',\n              disabled: true\n            }]\n          }, {\n            id: 2,\n            label: 'Niveau deux 2-2',\n            disabled: true,\n            children: [{\n              id: 6,\n              label: 'Niveau trois 3-2-1'\n            }, {\n              id: 7,\n              label: 'Niveau trois 3-2-2',\n              disabled: true\n            }]\n          }]\n        }],\n        defaultProps: {\n            children: 'children',\n            label: 'label',\n            disabled: 'disabled',\n        },\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(5),n("p",[e._v("Certains noeuds peuvent être ouverts et/ou sélectionnés par défaut.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez "),n("code",[e._v("default-expanded-keys")]),e._v(" et "),n("code",[e._v("default-checked-keys")]),e._v(" pour réglez respectivement les noeuds ouverts et les noeuds sélectionnés par défaut. Notez que "),n("code",[e._v("node-key")]),e._v(" est requis dans ce cas. Sa valeurs est le nom d'une clé dans l'objets data, et sa valeur devrait être unique dans tout l'arbre.")])]),n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  show-checkbox\n  node-key=\"id\"\n  :default-expanded-keys=\"[2, 3]\"\n  :default-checked-keys=\"[5]\"\n  :props=\"defaultProps\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(6),n("demo-block",[n("div",[n("p",[e._v("Cet exemple montre comment récupérer et sélectionner des noeuds. Vous pouvez utiliser deux approches: les noeuds ou les clés. Dans le cas des clés, "),n("code",[e._v("node-key")]),e._v(" est requis.")])]),n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  show-checkbox\n  default-expand-all\n  node-key=\"id\"\n  ref=\"tree\"\n  highlight-current\n  :props=\"defaultProps\">\n</el-tree>\n\n<div class=\"buttons\">\n  <el-button @click=\"getCheckedNodes\">Récupération par noeud</el-button>\n  <el-button @click=\"getCheckedKeys\">Récupération par clé</el-button>\n  <el-button @click=\"setCheckedNodes\">Sélection par noeud</el-button>\n  <el-button @click=\"setCheckedKeys\">Sélection par clé</el-button>\n  <el-button @click=\"resetChecked\">Reset</el-button>\n</div>\n\n<script>\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: 'Niveau deux 2-1'\n        }, {\n          id: 9,\n          label: 'Niveau trois 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(7),n("p",[e._v("Le contenu des noeuds peut être personnalisé, afin de pouvoir ajouter des icônes ou des boutons par exemple.")]),n("demo-block",[n("div",[n("p",[e._v("Il existe deux méthodes de personnalisation: "),n("code",[e._v("render-content")]),e._v(" et les slots avec portée. Utilisez "),n("code",[e._v("render-content")]),e._v(" pour assigner une fonction de rendu qui va générer le contenu des noeuds. Voire la documentation de Vue pour plus d'informations. Si vous préférez les slots, vous aurez accès à "),n("code",[e._v("node")]),e._v(" et "),n("code",[e._v("data")]),e._v(" dans le scope, corerspondant à l'objet TreeNode et aux données du noeud courant. Notez que  la démo de "),n("code",[e._v("render-content")]),e._v(" ne marche pas dans jsfiddle car il ne supporte pas JSX. Dans un vrai projet, "),n("code",[e._v("render-content")]),e._v(" marchera si les dépendances sont satisfaites.")])]),n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<div class="custom-tree-container">\n  <div class="block">\n    <p>Avec render-content</p>\n    <el-tree\n      :data="data"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false"\n      :render-content="renderContent">\n    </el-tree>\n  </div>\n  <div class="block">\n    <p>Avec un slot</p>\n    <el-tree\n      :data="data"\n      show-checkbox\n      node-key="id"\n      default-expand-all\n      :expand-on-click-node="false">\n      <span class="custom-tree-node" slot-scope="{ node, data }">\n        <span>{{ node.label }}</span>\n        <span>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => append(data)">\n            Ajouter\n          </el-button>\n          <el-button\n            type="text"\n            size="mini"\n            @click="() => remove(node, data)">\n            Supprimer\n          </el-button>\n        </span>\n      </span>\n    </el-tree>\n  </div>\n</div>\n\n<script>\n  let id = 1000;\n\n  export default {\n    data() {\n      const data = [{\n        id: 1,\n        label: \'Niveau un 1\',\n        children: [{\n          id: 4,\n          label: \'Niveau deux 1-1\',\n          children: [{\n            id: 9,\n            label: \'Niveau trois 1-1-1\'\n          }, {\n            id: 10,\n            label: \'Niveau trois 1-1-2\'\n          }]\n        }]\n      }, {\n        id: 2,\n        label: \'Niveau un 2\',\n        children: [{\n          id: 5,\n          label: \'Niveau deux 2-1\'\n        }, {\n          id: 6,\n          label: \'Niveau deux 2-2\'\n        }]\n      }, {\n        id: 3,\n        label: \'Niveau un 3\',\n        children: [{\n          id: 7,\n          label: \'Niveau deux 3-1\'\n        }, {\n          id: 8,\n          label: \'Niveau deux 3-2\'\n        }]\n      }];\n      return {\n        data: JSON.parse(JSON.stringify(data)),\n        data: JSON.parse(JSON.stringify(data))\n      }\n    },\n\n    methods: {\n      append(data) {\n        const newChild = { id: id++, label: \'testtest\', children: [] };\n        if (!data.children) {\n          this.$set(data, \'children\', []);\n        }\n        data.children.push(newChild);\n      },\n\n      remove(node, data) {\n        const parent = node.parent;\n        const children = parent.data.children || parent.data;\n        const index = children.findIndex(d => d.id === data.id);\n        children.splice(index, 1);\n      },\n\n      renderContent(h, { node, data, store }) {\n        return (\n          <span class="custom-tree-node">\n            <span>{node.label}</span>\n            <span>\n              <el-button size="mini" type="text" on-click={ () => this.append(data) }>Ajouter</el-button>\n              <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Supprimer</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n<\/script>\n\n<style>\n  .custom-tree-node {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    font-size: 14px;\n    padding-right: 8px;\n  }\n</style>\n')])])])],2),e._m(8),n("p",[e._v("Les noeuds peuvent être filtrés par mot-clé.")]),n("demo-block",[n("div",[n("p",[e._v("Utilisez la méthode "),n("code",[e._v("filter")]),e._v(" de l'instance de Tree pour pouvoir filtrer les noeuds, son paramètre étant le mot-clé. Notez que pour que cela fonctionne, "),n("code",[e._v("filter-node-method")]),e._v(" est requis, sa valeur étant la méthode de filtrage.")])]),n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-input\n  placeholder=\"Filter keyword\"\n  v-model=\"filterText\">\n</el-input>\n\n<el-tree\n  class=\"filter-tree\"\n  :data=\"data\"\n  :props=\"defaultProps\"\n  default-expand-all\n  :filter-node-method=\"filterNode\"\n  ref=\"tree\">\n</el-tree>\n\n<script>\n  export default {\n    watch: {\n      filterText(val) {\n        this.$refs.tree.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data: [{\n          id: 1,\n          label: 'Niveau un 1',\n          children: [{\n            id: 4,\n            label: 'Niveau deux 1-1',\n            children: [{\n              id: 9,\n              label: 'Niveau trois 1-1-1'\n            }, {\n              id: 10,\n              label: 'Niveau trois 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: 'Niveau un 2',\n          children: [{\n            id: 5,\n            label: 'Niveau deux 2-1'\n          }, {\n            id: 6,\n            label: 'Niveau deux 2-2'\n          }]\n        }, {\n          id: 3,\n          label: 'Niveau un 3',\n          children: [{\n            id: 7,\n            label: 'Niveau deux 3-1'\n          }, {\n            id: 8,\n            label: 'Niveau deux 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n<\/script>\n")])])])],2),e._m(9),n("p",[e._v("Vous pouvez utiliser un mode accordéon afin que seul un noeud par niveau soit ouvert.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo8")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  :props=\"defaultProps\"\n  accordion\n  @node-click=\"handleNodeClick\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleNodeClick(data) {\n        console.log(data);\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(10),e._m(11),n("demo-block",[n("template",{slot:"source"},[n("element-demo9")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v("<el-tree\n  :data=\"data\"\n  node-key=\"id\"\n  default-expand-all\n  @node-drag-start=\"handleDragStart\"\n  @node-drag-enter=\"handleDragEnter\"\n  @node-drag-leave=\"handleDragLeave\"\n  @node-drag-over=\"handleDragOver\"\n  @node-drag-end=\"handleDragEnd\"\n  @node-drop=\"handleDrop\"\n  draggable\n  :allow-drop=\"allowDrop\"\n  :allow-drag=\"allowDrag\">\n</el-tree>\n\n<script>\n  export default {\n    data() {\n      return {\n        data: [{\n          label: 'Niveau un 1',\n          children: [{\n            label: 'Niveau deux 1-1',\n            children: [{\n              label: 'Niveau trois 1-1-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 2',\n          children: [{\n            label: 'Niveau deux 2-1',\n            children: [{\n              label: 'Niveau trois 2-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 2-2',\n            children: [{\n              label: 'Niveau trois 2-2-1'\n            }]\n          }]\n        }, {\n          label: 'Niveau un 3',\n          children: [{\n            label: 'Niveau deux 3-1',\n            children: [{\n              label: 'Niveau trois 3-1-1'\n            }]\n          }, {\n            label: 'Niveau deux 3-2',\n            children: [{\n              label: 'Niveau trois 3-2-1'\n            }]\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    },\n    methods: {\n      handleDragStart(node, ev) {\n        console.log('drag start', node);\n      },\n      handleDragEnter(draggingNode, dropNode, ev) {\n        console.log('tree drag enter: ', dropNode.label);\n      },\n      handleDragLeave(draggingNode, dropNode, ev) {\n        console.log('tree drag leave: ', dropNode.label);\n      },\n      handleDragOver(draggingNode, dropNode, ev) {\n        console.log('tree drag over: ', dropNode.label);\n      },\n      handleDragEnd(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drag end: ', dropNode && dropNode.label, dropType);\n      },\n      handleDrop(draggingNode, dropNode, dropType, ev) {\n        console.log('tree drop: ', dropNode.label, dropType);\n      },\n      allowDrop(draggingNode, dropNode, type) {\n        if (dropNode.data.label === 'Niveau deux 3-1') {\n          return type !== 'inner';\n        } else {\n          return true;\n        }\n      },\n      allowDrag(draggingNode) {\n        return draggingNode.data.label.indexOf('Niveau trois 3-1-1') === -1;\n      }\n    }\n  };\n<\/script>\n")])])])],2),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),e._m(19),e._m(20),e._m(21),e._m(22)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"tree"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[this._v("¶")]),this._v(" Tree")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"usage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Usage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selection"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selection","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélection")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeud-feuille-personnalises-en-mode-lazy"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeud-feuille-personnalises-en-mode-lazy","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeud-feuille personnalisés en mode lazy")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"checkbox-desactivees"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-desactivees","aria-hidden":"true"}},[this._v("¶")]),this._v(" Checkbox désactivées")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"ouverture-et-selection-par-defaut"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#ouverture-et-selection-par-defaut","aria-hidden":"true"}},[this._v("¶")]),this._v(" Ouverture et sélection par défaut")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"selectionner-des-noeuds"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#selectionner-des-noeuds","aria-hidden":"true"}},[this._v("¶")]),this._v(" Sélectionner des noeuds")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"contenu-personnalise"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#contenu-personnalise","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contenu personnalisé")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"filtrage"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#filtrage","aria-hidden":"true"}},[this._v("¶")]),this._v(" Filtrage")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"accordeon"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#accordeon","aria-hidden":"true"}},[this._v("¶")]),this._v(" Accordéon")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"noeuds-deplacables"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#noeuds-deplacables","aria-hidden":"true"}},[this._v("¶")]),this._v(" Noeuds déplaçables")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Vous pouvez déplacer les noeuds par drag'n drop en ajoutant l'attribut "),t("code",[this._v("draggable")]),this._v(".")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("data")]),n("td",[e._v("Données de l'arbre")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("empty-text")]),n("td",[e._v("Texte à afficher quand il n'y a pas de données.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("node-key")]),n("td",[e._v("Identifiant unique pour chaque noeud, doit être unique dans tout l'arbre.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("props")]),n("td",[e._v("Options de configuration, voir table suivante.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-after-expand")]),n("td",[e._v("Si les noeuds enfants doivent être générés seulement après la première ouverture du parent.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("load")]),n("td",[e._v("Méthode pour charger les noeuds enfants, uniquement en mode "),n("code",[e._v("lazy")]),e._v(".")]),n("td",[e._v("function(node, resolve)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("render-content")]),n("td",[e._v("Fonction de rendu pour les noeuds.")]),n("td",[e._v("Function(h, { node, data, store }")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("highlight-current")]),n("td",[e._v("Si le noeud courant est mis en valeur.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-expand-all")]),n("td",[e._v("Si tous les noeuds sont ouverts par défaut.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("expand-on-click-node")]),n("td",[e._v("Si l'ouverture se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", l'ouverture ne se fera qu'en cliquant sur l'icône.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("check-on-click-node")]),n("td",[e._v("Si la sélection se fait aussi en cliquant sur le noeud. Si "),n("code",[e._v("false")]),e._v(", la sélection ne se fera qu'en cliquant sur la checkbox.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("auto-expand-parent")]),n("td",[e._v("Si un noeud parent est automatiquement ouvert quand un noeud enfant s'ouvre.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("default-expanded-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement ouverts.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("show-checkbox")]),n("td",[e._v("Si un noeud est sélectionnable.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("check-strictly")]),n("td",[e._v("Si la sélection d'un noeud affecte celle de son parent quand "),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("default-checked-keys")]),n("td",[e._v("Tableau des clés des noeuds initialement sélectionnés.")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("current-node-key")]),n("td",[e._v("Clé du noeud initialement sélectionné.")]),n("td",[e._v("string, number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("filter-node-method")]),n("td",[e._v("Fonction exécutée sur chaque noeud pour le filtrage. Si elle retourne "),n("code",[e._v("false")]),e._v(", les noeuds seront cachés.")]),n("td",[e._v("Function(value, data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("accordion")]),n("td",[e._v("Si les noeuds fonctionnent en mode accordéon.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("indent")]),n("td",[e._v("Indentation horizontale des noeuds en px.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("16")])]),n("tr",[n("td",[e._v("icon-class")]),n("td",[e._v("Icône pour chaque noeud.")]),n("td",[e._v("string")]),n("td",[e._v("-")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("lazy")]),n("td",[e._v("Si les noeuds sont chargés en mode lazy, utilisé avec l'attribut "),n("code",[e._v("load")]),e._v(".")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("draggable")]),n("td",[e._v("Si les noeuds sont déplaçables par drag'n drop.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("allow-drag")]),n("td",[e._v("Fonction exécutée avant le déplacement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne sera pas déplaçable.")]),n("td",[e._v("Function(node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("allow-drop")]),n("td",[e._v("Fonction exécutée avant le placement d'un noeud. Si "),n("code",[e._v("false")]),e._v(" est retourné, le noeud ne pourra être placé sur la zone en question. "),n("code",[e._v("type")]),e._v(" a trois valeurs possibles: 'prev' (insertion avant le noeud cible), 'inner' (insertion dans le noeud cible) and 'next' (insertion après le noeud cible).")]),n("td",[e._v("Function(draggingNode, dropNode, type)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"props"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("¶")]),this._v(" props")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("label")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente le label.")]),n("td",[e._v("string, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("children")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente les noeuds enfants.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Détermine quelle clé de l'objet noeud représente la désactivation du noeud.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("isLeaf")]),n("td",[e._v("Détermine si le noeud est une feuille, ne marche qu'avec le mode lazy loading.")]),n("td",[e._v("boolean, function(data, node)")]),n("td",[e._v("—")]),n("td",[e._v("—")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[t("code",[this._v("Tree")]),this._v(" possède les méthodes suivantes, qui retourne la sélection de noeuds actuelle.")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("filter")]),n("td",[e._v("Filtre les noeuds.")]),n("td",[e._v("Accepte un paramètre qui sera le premier paramètre de "),n("code",[e._v("filter-node-method")]),e._v(".")])]),n("tr",[n("td",[e._v("updateKeyChildren")]),n("td",[e._v("Ajoute de nouvelles données au noeud, ne marche que lorsque "),n("code",[e._v("node-key")]),e._v(" est assigné.")]),n("td",[e._v("(key, data) Accepte deux paramètres: 1. clé du noeud 2. nouvelles données.")])]),n("tr",[n("td",[e._v("getCheckedNodes")]),n("td",[e._v("Si le noeud peut-être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), il retourne un tableau des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly, includeHalfChecked) Accepte deux booléen: 1. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne seulement un tableau des sous-noeuds sélectionnés. 2. Défaut à "),n("code",[e._v("false")]),e._v(". Si "),n("code",[e._v("true")]),e._v(", retourne la moitié des noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedNodes")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("Un tableau de noeuds qui doivent être sélectionnés.")])]),n("tr",[n("td",[e._v("getCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne un tableau de clés des noeuds sélectionnés.")]),n("td",[e._v("(leafOnly) Booléen, défaut à "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setCheckedKeys")]),n("td",[e._v("Détermine quels noeuds sont sélectionnés, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(keys, leafOnly) Accepte deux paramètres: 1. un tableau de clés de noeuds à sélectionner 2. un booléen avec pour défaut "),n("code",[e._v("false")]),e._v(". Si à "),n("code",[e._v("true")]),e._v(", Il retourne seulement un tableau des sous-noeuds sélectionnés.")])]),n("tr",[n("td",[e._v("setChecked")]),n("td",[e._v("Détermine si un noeud est sélectionnable, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key/data, checked, deep) Accepte trois paramètres: 1. La clé ou les données du noeud 2. un booléen indiquant si sélectionné. 3. un booléen indiquant si profond.")])]),n("tr",[n("td",[e._v("getHalfCheckedNodes")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getHalfCheckedKeys")]),n("td",[e._v("Si le noeud peut être sélectionné ("),n("code",[e._v("show-checkbox")]),e._v(" est "),n("code",[e._v("true")]),e._v("), retourne les clés de la moitié des noeuds sélectionnés.")]),n("td",[e._v("-")])]),n("tr",[n("td",[e._v("getCurrentKey")]),n("td",[e._v("retourne la clé du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("getCurrentNode")]),n("td",[e._v("retourne les données du noeud actuellement en valeur ("),n("code",[e._v("null")]),e._v(" si aucun noeud n'est en valeur).")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("setCurrentKey")]),n("td",[e._v("Met un noeud en valeur par sa clé, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(key) la clé du noeud. Si "),n("code",[e._v("null")]),e._v(", annule la sélection actuelle.")])]),n("tr",[n("td",[e._v("setCurrentNode")]),n("td",[e._v("Met un noeud en valeur, ne marche que si "),n("code",[e._v("node_key")]),e._v(" est assigné.")]),n("td",[e._v("(node) le noeud.")])]),n("tr",[n("td",[e._v("getNode")]),n("td",[e._v("Retourne le noeud grâce à sa clé ou ses données.")]),n("td",[e._v("(data) la clé ou les données du noeud.")])]),n("tr",[n("td",[e._v("remove")]),n("td",[e._v("Supprime un noeud, ne marche que si node-key est assigné.")]),n("td",[e._v("(data) le noeud ou ses données à supprimer.")])]),n("tr",[n("td",[e._v("append")]),n("td",[e._v("Ajoute un noeud à un autre noeud.")]),n("td",[e._v("(data, parentNode) 1. les données du noeud à ajouter 2. les données du parent, clé ou données.")])]),n("tr",[n("td",[e._v("insertBefore")]),n("td",[e._v("Insère un noeud avant un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])]),n("tr",[n("td",[e._v("insertAfter")]),n("td",[e._v("Insère un noeud après un autre noeud.")]),n("td",[e._v("(data, refNode) 1. Les données du noeud à insérer 2. Clé ou noeud de référence.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"evenements"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#evenements","aria-hidden":"true"}},[this._v("¶")]),this._v(" Évènements")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Nom")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("node-click")]),n("td",[e._v("Se déclenche quand est cliqué.")]),n("td",[e._v("Le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-contextmenu")]),n("td",[e._v("Se déclenche quand un noeud reçoit un clic droit.")]),n("td",[e._v("L'évènement, le noeud cliqué, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("check-change")]),n("td",[e._v("Se déclenche quand quand la sélection d'un noeud change.")]),n("td",[e._v("Le noeud modifié, si le noeud est sélectionné, si des enfants sont sélectionnés.")])]),n("tr",[n("td",[e._v("check")]),n("td",[e._v("Se déclenche après un clic sur le checkbox.")]),n("td",[e._v("Le noeud modifié, l'objet statut de l'arbre avec quatre propriétés: checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys.")])]),n("tr",[n("td",[e._v("current-change")]),n("td",[e._v("Se déclenche quand le noeud courant changes.")]),n("td",[e._v("Le noeud courant, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode")])]),n("tr",[n("td",[e._v("node-expand")]),n("td",[e._v("Se déclenche quand le noeud courant s'ouvre.")]),n("td",[e._v("Le noeud ouvert, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-collapse")]),n("td",[e._v("Se déclenche quand le noeud courant se ferme.")]),n("td",[e._v("Le noeud fermé, la propriété "),n("code",[e._v("node")]),e._v(" de TreeNode, TreeNode lui-même.")])]),n("tr",[n("td",[e._v("node-drag-start")]),n("td",[e._v("Se déclenche quand le déplacement commence.")]),n("td",[e._v("Le noeud déplacé, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-enter")]),n("td",[e._v("Se déclenche quand le noeud déplacé entre dans un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-leave")]),n("td",[e._v("Se déclenche quand le noeud déplacé quitte un autre noeud.")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-over")]),n("td",[e._v("Se déclenche quand le noeud passe au-dessus d'un autre noeud (comme l'évènement mouseover).")]),n("td",[e._v("Le noeud déplacé, l'autre noeud, l'évènement.")])]),n("tr",[n("td",[e._v("node-drag-end")]),n("td",[e._v("Se déclenche quand le déplacement se termine.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée (peut-être "),n("code",[e._v("undefined")]),e._v("), le type de placement (before / after / inner), l'évènement.")])]),n("tr",[n("td",[e._v("node-drop")]),n("td",[e._v("Se déclenche après que le noeud déplacé soit placé.")]),n("td",[e._v("Le noeud déplacé, le noeud d'arrivée, le type de placement (before / after / inner), l'évènement.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot-avec-portee"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot-avec-portee","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot avec portée")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("—")]),t("td",[this._v("Le contenu personnalisé des noeuds. les paramètres sont { node, data }.")])])])])}],!1,null,null,null);t.default=s.exports},802:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"typographie"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#typographie","aria-hidden":"true"}},[this._v("¶")]),this._v(" Typographie")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"police"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#police","aria-hidden":"true"}},[this._v("¶")]),this._v(" Police")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"demo-term-box"},[t("img",{attrs:{src:a(416),alt:""}}),t("img",{attrs:{src:a(417),alt:""}}),t("img",{attrs:{src:a(418),alt:""}}),t("img",{attrs:{src:a(419),alt:""}}),t("img",{attrs:{src:a(420),alt:""}}),t("img",{attrs:{src:a(421),alt:""}})])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"convention-des-polices"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#convention-des-polices","aria-hidden":"true"}},[this._v("¶")]),this._v(" Convention des polices")])},function(){var e=this.$createElement,t=this._self._c||e;return t("tr",[t("td",[this._v("Level")]),t("td",[this._v("Font Size")]),t("td",{staticClass:"color-dark-light"},[this._v("Demo")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-line-height"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-line-height","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font Line Height")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("img",{staticClass:"lineH-left",attrs:{src:a(422)}}),n("ul",{staticClass:"lineH-right"},[n("li",[e._v("line-height:1 "),n("span",[e._v("No line height")])]),n("li",[e._v("line-height:1.3 "),n("span",[e._v("Compact")])]),n("li",[e._v("line-height:1.5 "),n("span",[e._v("Regular")])]),n("li",[e._v("line-height:1.7 "),n("span",[e._v("Loose")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"font-family"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[this._v("¶")]),this._v(" Font-family")])},function(){var e=this.$createElement,t=this._self._c||e;return t("pre",[t("code",{staticClass:"language-css"},[this._v('font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;\n')])])}],l=a(24),r=a(25),i=["$--font-size-extra-large","$--font-size-large","$--font-size-medium","$--font-size-base","$--font-size-small","$--font-size-extra-small"],s={font_size_extra_large:"20px",font_size_large:"18px",font_size_medium:"16px",font_size_base:"14px",font_size_small:"13px",font_size_extra_small:"12px"},o={created:function(){l.a.$on(r.d,this.setGlobal)},mounted:function(){this.setGlobal()},methods:{tintColor:function(n){function e(e,t){return n.apply(this,arguments)}return e.toString=function(){return n.toString()},e}(function(e,t){return tintColor(e,t)}),setGlobal:function(){window.userThemeConfig&&(this.global=window.userThemeConfig.global)}},data:function(){return{global:{},font_size_extra_large:"",font_size_large:"",font_size_medium:"",font_size_base:"",font_size_small:"",font_size_extra_small:""}},watch:{global:{immediate:!0,handler:function(n){var a=this;i.forEach(function(e){var t=e.replace("$--","").replace(/-/g,"_");n[e]?a[t]=n[e]:a[t]=s[t]})}}}},d=a(0),c=Object(d.a)(o,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Nous avons créé une convention de police d'écriture afin d'assurer la meilleur présentation possible sur toutes le plateformes.")]),e._m(1),e._m(2),e._m(3),n("table",{staticClass:"demo-typo-size"},[n("tbody",[e._m(4),n("tr",{style:{fontSize:e.font_size_extra_small}},[n("td",[e._v("Supplementary text")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_small)+" Extra Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_small}},[n("td",[e._v("Body (small)")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_small)+" Small")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_base}},[n("td",[e._v("Body")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_base)+" Base")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_medium}},[n("td",[e._v("Small Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_medium)+" Medium")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_large}},[n("td",[e._v("Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_large)+" large")]),n("td",[e._v("Build with Element")])]),n("tr",{style:{fontSize:e.font_size_extra_large}},[n("td",[e._v("Main Title")]),n("td",{staticClass:"color-dark-light"},[e._v(e._s(e.font_size_extra_large)+" Extra large")]),n("td",[e._v("Build with Element")])])])]),e._m(5),e._m(6),e._m(7),e._m(8)])},n,!1,null,null,null);t.default=c.exports},803:function(e,t,n){"use strict";n.r(t);var a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e},l={name:"component-doc",components:{"element-demo0":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"before-remove":e.beforeRemove,multiple:"",limit:3,"on-exceed":e.handleExceed,"file-list":e.fileList}},[n("el-button",{attrs:{size:"small",type:"primary"}},[e._v("Cliquer pour envoyer")]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)},handleExceed:function(e,t){this.$message.warning("La limite est 3, vous avez choisi "+e.length+" fichiers, soit "+(e.length+t.length)+" au total.")},beforeRemove:function(e,t){return this.$confirm("Supprimer le transfert de "+e.name+" ?")}}}),"element-demo1":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":this.handleAvatarSuccess,"before-upload":this.beforeAvatarUpload}},[this.imageUrl?t("img",{staticClass:"avatar",attrs:{src:this.imageUrl}}):t("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1)},staticRenderFns:[]},{data:function(){return{imageUrl:""}},methods:{handleAvatarSuccess:function(e,t){this.imageUrl=URL.createObjectURL(t.raw)},beforeAvatarUpload:function(e){var t="image/jpeg"===e.type,n=e.size/1024/1024<2;return t||this.$message.error("L'avatar doit être en JPG !"),n||this.$message.error("L'avatar ne peut pas excéder 2Mb !"),t&&n}}}),"element-demo2":a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":t.handlePictureCardPreview,"on-remove":t.handleRemove}},[n("i",{staticClass:"el-icon-plus"})]),t._v(" "),n("el-dialog",{attrs:{visible:t.dialogVisible},on:{"update:visible":function(e){t.dialogVisible=e}}},[n("img",{attrs:{width:"100%",src:t.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0}}}),"element-demo3":a({render:function(){var n=this,e=n.$createElement,a=n._self._c||e;return a("div",[a("el-upload",{attrs:{action:"#","list-type":"picture-card","auto-upload":!1},scopedSlots:n._u([{key:"file",fn:function(e){var t=e.file;return a("div",{},[a("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}),n._v(" "),a("span",{staticClass:"el-upload-list__item-actions"},[a("span",{staticClass:"el-upload-list__item-preview",on:{click:function(e){n.handlePictureCardPreview(t)}}},[a("i",{staticClass:"el-icon-zoom-in"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){n.handleDownload(t)}}},[a("i",{staticClass:"el-icon-download"})]),n._v(" "),n.disabled?n._e():a("span",{staticClass:"el-upload-list__item-delete",on:{click:function(e){n.handleRemove(t)}}},[a("i",{staticClass:"el-icon-delete"})])])])}}])},[a("i",{staticClass:"el-icon-plus",attrs:{slot:"default"},slot:"default"})]),n._v(" "),a("el-dialog",{attrs:{visible:n.dialogVisible},on:{"update:visible":function(e){n.dialogVisible=e}}},[a("img",{attrs:{width:"100%",src:n.dialogImageUrl,alt:""}})])],1)},staticRenderFns:[]},{data:function(){return{dialogImageUrl:"",dialogVisible:!1,disabled:!1}},methods:{handleRemove:function(e){console.log(e)},handlePictureCardPreview:function(e){this.dialogImageUrl=e.url,this.dialogVisible=!0},handleDownload:function(e){console.log(e)}}}),"element-demo4":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":this.handlePreview,"on-remove":this.handleRemove,"file-list":this.fileList,"list-type":"picture"}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Cliquer pour envoyer")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleRemove:function(e,t){console.log(e,t)},handlePreview:function(e){console.log(e)}}}),"element-demo5":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":this.handleChange,"file-list":this.fileList}},[t("el-button",{attrs:{size:"small",type:"primary"}},[this._v("Cliquer pour envoyer")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]},{data:function(){return{fileList:[{name:"food.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"},{name:"food2.jpeg",url:"https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"}]}},methods:{handleChange:function(e,t){this.fileList=t.slice(-3)}}}),"element-demo6":a({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":e.handlePreview,"on-remove":e.handleRemove,"file-list":e.fileList,multiple:""}},[n("i",{staticClass:"el-icon-upload"}),e._v(" "),n("div",{staticClass:"el-upload__text"},[e._v("Déposer les fichiers ici ou"),n("em",[e._v("cliquez pour envoyer")])]),e._v(" "),n("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[e._v("Fichiers jpg/png avec une taille inférieure à 500kb")])])],1)},staticRenderFns:[]},{}),"element-demo7":a({render:function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[t("el-button",{attrs:{slot:"trigger",size:"small",type:"primary"},slot:"trigger"},[this._v("Choisir un fichier")]),this._v(" "),t("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:this.submitUpload}},[this._v("Envoyer au serveur")]),this._v(" "),t("div",{staticClass:"el-upload__tip",attrs:{slot:"tip"},slot:"tip"},[this._v("Fichiers jpg/png avec une taille inférieure à 500kb")])],1)],1)},staticRenderFns:[]},{methods:{submitUpload:function(){this.$refs.upload.submit()}}})}},r=n(0),i=Object(r.a)(l,function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[e._m(0),n("p",[e._v("Permet d'uploader des fichiers en cliquant ou en les déplaçant sur le composant.")]),e._m(1),n("demo-block",[n("div",[n("p",[e._v("Personnalisez le bouton d'envoi avec "),n("code",[e._v("slot")]),e._v(". Utilisez "),n("code",[e._v("limit")]),e._v(" et "),n("code",[e._v("on-exceed")]),e._v(" pour limiter le nombre maximal de fichiers et déterminer le comportement quand ce nombre est dépassé. De plus, vous pouvez annuler la suppression d'un fichier avec "),n("code",[e._v("before-remove")]),e._v(".")])]),n("template",{slot:"source"},[n("element-demo0")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :before-remove="beforeRemove"\n  multiple\n  :limit="3"\n  :on-exceed="handleExceed"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      },\n      handleExceed(files, fileList) {\n        this.$message.warning(`La limite est 3, vous avez choisi ${files.length} fichiers, soit ${files.length + fileList.length} au total.`);\n      },\n      beforeRemove(file, fileList) {\n        return this.$confirm(`Supprimer le transfert de ${ file.name } ?`);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(2),e._m(3),n("demo-block",[n("template",{slot:"source"},[n("element-demo1")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="avatar-uploader"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :show-file-list="false"\n  :on-success="handleAvatarSuccess"\n  :before-upload="beforeAvatarUpload">\n  <img v-if="imageUrl" :src="imageUrl" class="avatar">\n  <i v-else class="el-icon-plus avatar-uploader-icon"></i>\n</el-upload>\n\n<style>\n  .avatar-uploader .el-upload {\n    border: 1px dashed #d9d9d9;\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n  }\n  .avatar-uploader .el-upload:hover {\n    border-color: #409EFF;\n  }\n  .avatar-uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 178px;\n    height: 178px;\n    line-height: 178px;\n    text-align: center;\n  }\n  .avatar {\n    width: 178px;\n    height: 178px;\n    display: block;\n  }\n</style>\n\n<script>\n  export default {\n    data() {\n      return {\n        imageUrl: \'\'\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === \'image/jpeg\';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error(\'L\\\'avatar doit être en JPG !\');\n        }\n        if (!isLt2M) {\n          this.$message.error(\'L\\\'avatar ne peut pas excéder 2Mb !\');\n        }\n        return isJPG && isLt2M;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(4),e._m(5),n("demo-block",[n("template",{slot:"source"},[n("element-demo2")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="https://jsonplaceholder.typicode.com/posts/"\n  list-type="picture-card"\n  :on-preview="handlePictureCardPreview"\n  :on-remove="handleRemove">\n  <i class="el-icon-plus"></i>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(6),e._m(7),n("demo-block",[n("template",{slot:"source"},[n("element-demo3")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  action="#"\n  list-type="picture-card"\n  :auto-upload="false">\n    <i slot="default" class="el-icon-plus"></i>\n    <div slot="file" slot-scope="{file}">\n      <img\n        class="el-upload-list__item-thumbnail"\n        :src="file.url" alt=""\n      >\n      <span class="el-upload-list__item-actions">\n        <span\n          class="el-upload-list__item-preview"\n          @click="handlePictureCardPreview(file)"\n        >\n          <i class="el-icon-zoom-in"></i>\n        </span>\n        <span\n          v-if="!disabled"\n          class="el-upload-list__item-delete"\n          @click="handleDownload(file)"\n        >\n          <i class="el-icon-download"></i>\n        </span>\n        <span\n          v-if="!disabled"\n          class="el-upload-list__item-delete"\n          @click="handleRemove(file)"\n        >\n          <i class="el-icon-delete"></i>\n        </span>\n      </span>\n    </div>\n</el-upload>\n<el-dialog :visible.sync="dialogVisible">\n  <img width="100%" :src="dialogImageUrl" alt="">\n</el-dialog>\n<script>\n  export default {\n    data() {\n      return {\n        dialogImageUrl: \'\',\n        dialogVisible: false,\n        disabled: false\n      };\n    },\n    methods: {\n      handleRemove(file) {\n        console.log(file);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      },\n      handleDownload(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(8),n("demo-block",[n("template",{slot:"source"},[n("element-demo4")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  list-type="picture">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{name: \'food.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}, {name: \'food2.jpeg\', url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'}]\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(9),e._m(10),n("demo-block",[n("template",{slot:"source"},[n("element-demo5")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-change="handleChange"\n  :file-list="fileList">\n  <el-button size="small" type="primary">Cliquer pour envoyer</el-button>\n  <div slot="tip" class="el-upload__tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    data() {\n      return {\n        fileList: [{\n          name: \'food.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }, {\n          name: \'food2.jpeg\',\n          url: \'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100\'\n        }]\n      };\n    },\n    methods: {\n      handleChange(file, fileList) {\n        this.fileList = fileList.slice(-3);\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(11),n("p",[e._v("Vous pouvez déposer les fichiers par drag'n drop sur l'espace dédié.")]),n("demo-block",[n("template",{slot:"source"},[n("element-demo6")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  drag\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :on-preview="handlePreview"\n  :on-remove="handleRemove"\n  :file-list="fileList"\n  multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">Déposer les fichiers ici ou<em>cliquez pour envoyer</em></div>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n')])])])],2),e._m(12),n("demo-block",[n("template",{slot:"source"},[n("element-demo7")],1),n("template",{slot:"highlight"},[n("pre",{pre:!0},[n("code",{pre:!0,attrs:{class:"html"}},[e._v('<el-upload\n  class="upload-demo"\n  ref="upload"\n  action="https://jsonplaceholder.typicode.com/posts/"\n  :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">Choisir un fichier</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">Envoyer au serveur</el-button>\n  <div class="el-upload__tip" slot="tip">Fichiers jpg/png avec une taille inférieure à 500kb</div>\n</el-upload>\n<script>\n  export default {\n    methods: {\n      submitUpload() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n<\/script>\n')])])])],2),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"upload"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[this._v("¶")]),this._v(" Upload")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"cliquer-pour-envoyer"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#cliquer-pour-envoyer","aria-hidden":"true"}},[this._v("¶")]),this._v(" Cliquer pour envoyer")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-d-avatar-utilisateur"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-d-avatar-utilisateur","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi d'avatar utilisateur")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("before-upload")]),this._v(" pour restreindre le format et la taille du fichier à envoyer.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"mur-de-photos"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#mur-de-photos","aria-hidden":"true"}},[this._v("¶")]),this._v(" Mur de photos")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("list-type")]),this._v(" pour changer le style de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"custom-file-thumbnail"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#custom-file-thumbnail","aria-hidden":"true"}},[this._v("¶")]),this._v(" Custom file thumbnail")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Use "),t("code",[this._v("scoped-slot")]),this._v(" to change default thumbnail template.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"liste-de-fichiers-avec-miniatures"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#liste-de-fichiers-avec-miniatures","aria-hidden":"true"}},[this._v("¶")]),this._v(" Liste de fichiers avec miniatures")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"controle-de-la-liste-de-fichiers"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#controle-de-la-liste-de-fichiers","aria-hidden":"true"}},[this._v("¶")]),this._v(" Contrôle de la liste de fichiers")])},function(){var e=this.$createElement,t=this._self._c||e;return t("p",[this._v("Utilisez "),t("code",[this._v("on-change")]),this._v(" pour contrôler le comportement de la liste de fichiers.")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-en-deposant"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-en-deposant","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi en déposant")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"envoi-manuel"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#envoi-manuel","aria-hidden":"true"}},[this._v("¶")]),this._v(" Envoi manuel")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"attributs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#attributs","aria-hidden":"true"}},[this._v("¶")]),this._v(" Attributs")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Attribut")]),n("th",[e._v("Description")]),n("th",[e._v("Type")]),n("th",[e._v("Valeurs acceptées")]),n("th",[e._v("Défaut")])])]),n("tbody",[n("tr",[n("td",[e._v("action")]),n("td",[e._v("Requis, l'url de requête.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("headers")]),n("td",[e._v("Les headers de la requête.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("multiple")]),n("td",[e._v("Si envoyer de multiples fichiers est autorisé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("data")]),n("td",[e._v("Options additionnelles de la requête.")]),n("td",[e._v("object")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("name")]),n("td",[e._v("Identifiant du fichier.")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("file")])]),n("tr",[n("td",[e._v("with-credentials")]),n("td",[e._v("Si les cookies sont aussi envoyés.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("show-file-list")]),n("td",[e._v("Si la liste des fichiers est affichée.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("drag")]),n("td",[e._v("Si le mode drag'n drop est activé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("accept")]),n("td",[n("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[e._v("Types de fichiers")]),e._v(" acceptés, ne marche pas si "),n("code",[e._v("thumbnail-mode")]),e._v(" est "),n("code",[e._v("true")]),e._v(".")]),n("td",[e._v("string")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-preview")]),n("td",[e._v("Fonction pour quand le fichier est cliqué.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-remove")]),n("td",[e._v("Fonction pour quand des fichiers sont supprimés.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-success")]),n("td",[e._v("Fonction pour quand l'upload a réussi.")]),n("td",[e._v("function(response, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-error")]),n("td",[e._v("Fonction pour quand l'upload renvoi une erreur.")]),n("td",[e._v("function(err, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-progress")]),n("td",[e._v("Fonction pour quand l'upload est en cours.")]),n("td",[e._v("function(event, file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-change")]),n("td",[e._v("Fonction pour quand le statut d'un fichier change (sélection, upload, erreur...).")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-upload")]),n("td",[e._v("Fonction pour avant l'upload. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, l'envoi sera annulé.")]),n("td",[e._v("function(file)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("before-remove")]),n("td",[e._v("Fonction pour avant la suppression de fichiers. Si "),n("code",[e._v("false")]),e._v(" est retourné ou une "),n("code",[e._v("Promise")]),e._v(" qui est ensuite rejetée, la suppression sera ensuite annulée.")]),n("td",[e._v("function(file, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("thumbnail-mode")]),n("td",[e._v("Si les miniatures sont affichées.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("file-list")]),n("td",[e._v("Les fichiers envoyé par défaut, e.g. [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]")]),n("td",[e._v("array")]),n("td",[e._v("—")]),n("td",[e._v("[]")])]),n("tr",[n("td",[e._v("list-type")]),n("td",[e._v("Le type de liste de fichiers.")]),n("td",[e._v("string")]),n("td",[e._v("text/picture/picture-card")]),n("td",[e._v("text")])]),n("tr",[n("td",[e._v("auto-upload")]),n("td",[e._v("Si l'envoi est automatique.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("true")])]),n("tr",[n("td",[e._v("http-request")]),n("td",[e._v("Écrase le xhr par défaut, afin que vous puissiez implémenter votre propre fonction d'envoi.")]),n("td",[e._v("function")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("disabled")]),n("td",[e._v("Si le composant est désactivé.")]),n("td",[e._v("boolean")]),n("td",[e._v("—")]),n("td",[e._v("false")])]),n("tr",[n("td",[e._v("limit")]),n("td",[e._v("Nombre maximum d'envoi autorisés.")]),n("td",[e._v("number")]),n("td",[e._v("—")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("on-exceed")]),n("td",[e._v("Fonction pour quand la limite d'envoi est dépassée.")]),n("td",[e._v("function(files, fileList)")]),n("td",[e._v("—")]),n("td",[e._v("-")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"slot"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[this._v("¶")]),this._v(" Slot")])},function(){var e=this.$createElement,t=this._self._c||e;return t("table",[t("thead",[t("tr",[t("th",[this._v("Nom")]),t("th",[this._v("Description")])])]),t("tbody",[t("tr",[t("td",[this._v("trigger")]),t("td",[this._v("Le contenu qui déclenche le Dialog du fichier.")])]),t("tr",[t("td",[this._v("tip")]),t("td",[this._v("Le contenu des tips.")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h3",{attrs:{id:"methodes"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#methodes","aria-hidden":"true"}},[this._v("¶")]),this._v(" Méthodes")])},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("table",[n("thead",[n("tr",[n("th",[e._v("Méthode")]),n("th",[e._v("Description")]),n("th",[e._v("Paramètres")])])]),n("tbody",[n("tr",[n("td",[e._v("clearFiles")]),n("td",[e._v("Efface la liste (non supporté dans "),n("code",[e._v("before-upload")]),e._v(").")]),n("td",[e._v("—")])]),n("tr",[n("td",[e._v("abort")]),n("td",[e._v("Annule l'envoi en cours.")]),n("td",[e._v("（ file: fileList's item ）")])]),n("tr",[n("td",[e._v("submit")]),n("td",[e._v("Envoi la liste de fichiers manuellement.")]),n("td",[e._v("—")])])])])}],!1,null,null,null);t.default=i.exports},813:function(e,t,a){"use strict";a.r(t);a(525);var n=a(0),l=Object(n.a)({},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[n("h2",[e._v("Principes de conception")]),n("el-row",{staticClass:"cards",attrs:{gutter:14}},[n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(399),alt:"Consistency"}}),n("h4",[e._v("Cohérence")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(400),alt:"Feedback"}}),n("h4",[e._v("Feedback")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(401),alt:"Efficiency"}}),n("h4",[e._v("Efficacité")]),n("span")])]),n("el-col",{attrs:{xs:12,sm:6}},[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(402),alt:"Controllability"}}),n("h4",[e._v("Controlabilité")]),n("span")])])],1),n("h3",[e._v("Cohérence")]),e._m(0),n("h3",[e._v("Feedback")]),e._m(1),n("h3",[e._v("Efficacité")]),e._m(2),n("h3",[e._v("Controllabilité")]),e._m(3)],1)},[function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Cohérence avec la vraie vie: ")]),this._v("en accord avec les processus habituels de la vie réelle, conforme aux langages et habitudes des utilisateurs.")]),t("li",[t("strong",[this._v("Cohérence au sein de l'interface: ")]),this._v("tout les élements doivent être cohérents entre eux et suivre les même règles, par exemple: le style global, les icônes, la position des élements, etc.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Retour d'expèrience: ")]),this._v("permets aux utilisateurs de percevoir clairement leur opérations par le biais d'animations et d'effets interactifs.")]),t("li",[t("strong",[this._v("Retour visuel: ")]),this._v("reflète l'état actuel de la page via le réarrangement ou la mise à jour des éléments.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Simplifier le processus: ")]),this._v("garde chaque operation simple et intuitive.")]),t("li",[t("strong",[this._v("Clair et défini: ")]),this._v("énonce clairement ses intentions afin que l'utilisateur puisse comprendre et prendre une décision rapidement.")]),t("li",[t("strong",[this._v("Facile à identifier: ")]),this._v("l'interface devrait être simple et facile d'accès, afin que les utilisateurs n'ai pas d'efforts de mémorisation à faire.")])])},function(){var e=this.$createElement,t=this._self._c||e;return t("ul",[t("li",[t("strong",[this._v("Prise de décision: ")]),this._v("possibilité de donner des conseils sur les opérations, mais ne jamais prendre de décisions à la place des utilisateurs")]),t("li",[t("strong",[this._v("Contrôle des conséquences: ")]),this._v("les utilisateurs devraient pouvoir controller l'exécution de leurs opérations, y compris l'annulation et la suppression des opérations courantes.")])])}],!1,null,"38f46eef",null);t.default=l.exports},814:function(e,t,a){"use strict";a.r(t);var n=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"page-container page-resource"},[n("h2",[e._v("Resources")]),n("p",[e._v("Plus de ressources sont en développement.")]),n("div",{staticClass:"cards"},[n("ul",{staticClass:"container"},[n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(413),alt:""}}),n("h3",[e._v("Composants Axure")]),n("p",[e._v("En important ELement UI dans Axure, vous pourrez facilement utiliser les composants durant le design des interactions")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Axure');",href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v2.1.0.rplib"}},[e._v("Téléchargement")])])]),n("li",[n("div",{staticClass:"card"},[n("img",{attrs:{src:a(414),alt:""}}),n("h3",[e._v("Modèle de croquis")]),n("p",[e._v("Applique des composants d'un template Element, afin d'améliorer l'efficacité du design tout en gardant un style visuel unifié.")]),n("a",{attrs:{onclick:"ga('send', 'event', 'ResourceDownload', 'Download', 'Sketch');",href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch"}},[e._v("Téléchargement")])])])])])])}],l=(a(529),a(0)),r=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},n,!1,null,"39e33065",null);t.default=r.exports},815:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){var e=this.$createElement;return(this._self._c||e)("router-view")},[],!1,null,null,null);t.default=l.exports},828:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Thème")]),n("p",[e._v("Element utilise le style BEM pour le CSS afin que vous puissiez écraser les règles prédéfinies facilement. Mais si vous avez besoin de remplacer des styles à une plus grande échelle , e.g. changer le thème de bleu à orange ou vert, les modifier une par une serait fastidieux. Nous fournissons ttrtois méthodes pour changer les variables de style.")]),n("h3",{attrs:{id:"theme-roller"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#theme-roller","aria-hidden":"true"}},[e._v("¶")]),e._v(" Theme Roller")]),n("p",[e._v("Utilisez "),n("a",{attrs:{href:"./#/fr-FR/theme"}},[e._v("Online Theme Roller")]),e._v(" pour personnaliser les Design Tokens des variables globales et des composants, et prévisualisez le nouveau thème en temps réel. Il peut générer un package de style complet basé sur le nouveau thème que vous pouvez télécharger directement (pour importer de nouveaux fichiers de style dans votre projet, veuillez vous reporter à la partie 'Importer un thème personnalisé'' de cette section).")]),n("p",[e._v("Also, use "),n("a",{attrs:{href:"https://chrome.google.com/webstore/detail/element-theme-roller/lifkjlojflekabbmlddfccdkphlelmim"}},[e._v("Theme Roller Chrome Extension")]),e._v("，to customize theme and preview in real-time on any website developed by Element.")]),n("img",{staticStyle:{width:"100%",margin:"30px auto 0",display:"block"},attrs:{src:"https://shadow.elemecdn.com/app/sns-client/element-theme-editor2.e16c6a01-806d-11e9-bc23-21435c54c509.png"}}),n("h3",{attrs:{id:"changer-la-couleur-du-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#changer-la-couleur-du-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Changer la couleur du thème")]),n("p",[e._v("Si vous avez juste besoin de changer la couleur du thème, le "),n("a",{attrs:{href:"https://elementui.github.io/theme-chalk-preview/#/en-US"}},[e._v("générateur de thème en ligne")]),e._v(" est recommandé. La couleur du thème d'Element est un bleu clair et agréable. En le changeant, vous rendez Element visuellement plus adapté à vos projets.")]),n("p",[e._v("Le site précédent vous permet de visualiser et de télécharger un nouveau thème immédiatement (pour importer un nouveau thème, référez-vous à la partie 'Importer un thème personnalisé' or 'Importer un thème de composant à la demande' de cette section).")]),n("h3",{attrs:{id:"mettre-a-jour-les-variables-scss-de-votre-projet"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#mettre-a-jour-les-variables-scss-de-votre-projet","aria-hidden":"true"}},[e._v("¶")]),e._v(" Mettre à jour les variables SCSS de votre projet")]),n("p",[n("code",[e._v("theme-chalk")]),e._v(" est écrit en SCSS. Si votre projet utilises SCSS, vous pouvez changer directement les variables d'Élément. Créez un nouveau fichier, e.g. "),n("code",[e._v("element-variables.scss")]),e._v(":")]),n("pre",[n("code",{staticClass:"language-html"},[e._v("/* couleur du thème */\n$--color-primary: teal;\n\n/* chemin vers le fichier de police, requis */\n$--font-path: '~element-ui/lib/theme-chalk/fonts';\n\n@import \"~element-ui/packages/theme-chalk/src/index\";\n")])]),n("p",[e._v("Puis dans le fichier d'entrée, importez ce style au lieu de celui d'Element:")]),n("pre",[n("code",{staticClass:"language-JS"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport './element-variables.scss'\n\nVue.use(Element)\n")])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est obligatoire de remplacer le chemin du fichier de police.")])]),n("h3",{attrs:{id:"outil-de-theme-cli"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#outil-de-theme-cli","aria-hidden":"true"}},[e._v("¶")]),e._v(" Outil de thème CLI")]),n("p",[e._v("Si votre projet n'utilise pas SCSS, vous pouvez personnaliser le thème en utilisant notre outil en ligne de commande:")]),n("h4",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Installation")])]),n("p",[e._v("Installez le générateur de thème de manière globale ou locale. Une installation locale est recommandé afin que les personnes clonant votre dépôt bénéficient d'une installation automatique via npm.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-theme -g\n")])]),n("p",[e._v("Installer ensuite le thème chalk depuis npm ou GitHub.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("# Via npm\nnpm i element-theme-chalk -D\n\n# Via GitHub\nnpm i https://github.com/ElementUI/theme-chalk -D\n")])]),n("h4",{attrs:{id:"initialisation-d-un-fichier-de-variable"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#initialisation-d-un-fichier-de-variable","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Initialisation d'un fichier de variable")])]),n("p",[e._v("Après l'installation des paquets ci-dessus, une commande appelée "),n("code",[e._v("et")]),e._v(" devient disponible dans le CLI (si les paquets sont installés localement, utilisez "),n("code",[e._v("node_modules/.bin/et")]),e._v(" à la place). Utilisez "),n("code",[e._v("-i")]),e._v(" pour initialiser le fichier de variables, "),n("code",[e._v("element-variables.scss")]),e._v(" par défaut. Vous pouvez spécifier n'importe quel dossier comme sortie.")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et -i [nom du fichier]\n\n> ✔ Generator variables file\n")])]),n("p",[e._v("Dans "),n("code",[e._v("element-variables.scss")]),e._v(" vous trouverez toutes les variables utilisées pour le style d'Element, définies en SCSS. Voici un snippet:")]),n("pre",[n("code",{staticClass:"language-css"},[e._v("$--color-primary: #409EFF !default;\n$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */\n$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */\n$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */\n$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */\n$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */\n$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */\n$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */\n$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */\n$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */\n\n$--color-success: #67c23a !default;\n$--color-warning: #e6a23c !default;\n$--color-danger: #f56c6c !default;\n$--color-info: #909399 !default;\n\n...\n")])]),n("h4",{attrs:{id:"modifier-les-variables"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#modifier-les-variables","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Modifier les variables")])]),n("p",[e._v("Éditer "),n("code",[e._v("element-variables.scss")]),e._v(", e.g. en changeant la couleur du thème pour du rouge:")]),n("pre",[n("code",{staticClass:"language-CSS"},[e._v("$--color-primary: red;\n")])]),n("h4",{attrs:{id:"generer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#generer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Générer le thème")])]),n("p",[e._v("Après avoir sauvegardé le fichier de variables, utilisez "),n("code",[e._v("et")]),e._v(" pour générer le thème. Vous pouvez activer le mode "),n("code",[e._v("watch")]),e._v(" en ajoutant le paramètre "),n("code",[e._v("-w")]),e._v(". Si vous avez choisi le chemin du fichier de sortie, il vous faudra ajouter le paramètre "),n("code",[e._v("-c")]),e._v(" avec le nom du fichier. Par défaut le thème généré est placé dans "),n("code",[e._v("./theme")]),e._v(". Vous pouvez spécifier le dossier de sortie grâce à "),n("code",[e._v("-o")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),n("h3",{attrs:{id:"use-custom-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-custom-theme","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use custom theme")]),n("h4",{attrs:{id:"importer-le-theme"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème")])]),n("p",[e._v('Importing your own theme is just like importing the default theme, only this time you import the file built from "Online Theme Roller" or "CLI tool":')]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import '../theme/index.css'\nimport ElementUI from 'element-ui'\nimport Vue from 'vue'\n\nVue.use(ElementUI)\n")])]),n("h4",{attrs:{id:"importer-le-theme-d-un-composant-sur-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-le-theme-d-un-composant-sur-demande","aria-hidden":"true"}},[e._v("¶")]),n("strong",[e._v("Importer le thème d'un composant sur demande")])]),n("p",[e._v("Si vous utilisez "),n("code",[e._v("babel-plugin-component")]),e._v(" pour les imports sur demande, modifiez "),n("code",[e._v(".babelrc")]),e._v(" et spécifiez "),n("code",[e._v("styleLibraryName")]),e._v(" avec le chemin où votre thème est localisé relativement à "),n("code",[e._v(".babelrc")]),e._v(". N'oubliez pas que "),n("code",[e._v("~")]),e._v(" est requis:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "~theme"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Si vous n'êtes pas familier avec "),n("code",[e._v("babel-plugin-component")]),e._v(", référez-vous à la page "),n("a",{attrs:{href:"./#/fr-FR/component/quickstart"}},[e._v("Guide")]),e._v(". Pour plus d'informations, jetez un oeil au "),n("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[e._v("dépôt du projet")]),e._v(" de "),n("code",[e._v("element-theme")]),e._v(".")])])}],!1,null,null,null);t.default=l.exports},829:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"internationalisation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#internationalisation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Internationalisation")]),n("p",[e._v("La langue par défaut d'Element est le Chinois. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element entièrement:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport ElementUI from 'element-ui'\nimport locale from 'element-ui/lib/locale/lang/en'\n\nVue.use(ElementUI, { locale })\n")])]),n("p",[e._v("Ou si vous importez Element à la demande:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport { Button, Select } from 'element-ui'\nimport lang from 'element-ui/lib/locale/lang/en'\nimport locale from 'element-ui/lib/locale'\n\n// configure la langue\nlocale.use(lang)\n\n// importe les composants\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),n("p",[e._v("La pack de la langue Chinois est importé par défaut, même si vous configurez une autre langue. En utilisant le "),n("code",[e._v("NormalModuleReplacementPlugin")]),e._v(" fournit par webpack vous pouvez remplacer la locale par défaut:")]),n("p",[e._v("webpack.config.js")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("{\n  plugins: [\n    new webpack.NormalModuleReplacementPlugin(/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/, 'element-ui/lib/locale/lang/en')\n  ]\n}\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-5-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-5-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@5.x")])]),n("p",[e._v("Element est compatible avec "),n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[e._v("vue-i18n@5.x")]),e._v(", ce qui rend le changement de langue encore plus simple.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport VueI18n from 'vue-i18n'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = 'zh-cn'\nVue.locale('zh-cn', zhLocale)\nVue.locale('en', enLocale)\n")])]),n("h2",{attrs:{id:"compatible-avec-d-autres-plugins-i18n"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-d-autres-plugins-i18n","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec d'autres plugins i18n")]),n("p",[e._v("Element n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(Element, {\n  i18n: function (path, options) {\n    // ...\n  }\n})\n")])]),n("h2",{attrs:{id:"compatible-avec-vue-i18n-6-x"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#compatible-avec-vue-i18n-6-x","aria-hidden":"true"}},[e._v("¶")]),e._v(" Compatible avec "),n("code",[e._v("vue-i18n@6.x")])]),n("p",[e._v("Vous devrez le configurer manuellement pour la compatibilité avec "),n("code",[e._v("6.x")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue'\nimport Element from 'element-ui'\nimport VueI18n from 'vue-i18n'\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\n\nVue.use(VueI18n)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nVue.use(Element, {\n  i18n: (key, value) => i18n.t(key, value)\n})\n\nnew Vue({ i18n }).$mount('#app')\n")])]),n("h2",{attrs:{id:"i18n-personnalisee-dans-les-composants-a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18n-personnalisee-dans-les-composants-a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" i18n personnalisée dans les composants à la demande")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue'\nimport DatePicker from 'element/lib/date-picker'\nimport VueI18n from 'vue-i18n'\n\nimport enLocale from 'element-ui/lib/locale/lang/en'\nimport zhLocale from 'element-ui/lib/locale/lang/zh-CN'\nimport ElementLocale from 'element-ui/lib/locale'\n\nVue.use(VueI18n)\nVue.use(DatePicker)\n\nconst messages = {\n  en: {\n    message: 'hello',\n    ...enLocale\n  },\n  zh: {\n    message: '你好',\n    ...zhLocale\n  }\n}\n\n// Crée l'instance de VueI18n avec ses options\nconst i18n = new VueI18n({\n  locale: 'en', // indique la locale\n  messages, // indique les messages\n})\n\nElementLocale.i18n((key, value) => i18n.t(key, value))\n")])]),n("h2",{attrs:{id:"import-via-un-cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-via-un-cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import via un CDN")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue@2"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  ELEMENT.locale(ELEMENT.lang.en)\n<\/script>\n')])]),n("p",[e._v("Compatible avec "),n("code",[e._v("vue-i18n")])]),n("pre",[n("code",{staticClass:"language-html"},[e._v('<script src="//unpkg.com/vue@2"><\/script>\n<script src="//unpkg.com/vue-i18n/dist/vue-i18n.js"><\/script>\n<script src="//unpkg.com/element-ui"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"><\/script>\n<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"><\/script>\n\n<script>\n  Vue.locale(\'en\', ELEMENT.lang.en)\n  Vue.locale(\'zh-cn\', ELEMENT.lang.zhCN)\n<\/script>\n')])]),n("p",[e._v("Actuellement, Element supporte les langues suivantes:")]),n("ul",{staticClass:"language-list"},[n("li",[e._v("Chinois simplifié (zh-CN)")]),n("li",[e._v("Anglais (en)")]),n("li",[e._v("Allemand (de)")]),n("li",[e._v("Portugais (pt)")]),n("li",[e._v("Espagnol (es)")]),n("li",[e._v("Danois (da)")]),n("li",[e._v("Français (fr)")]),n("li",[e._v("Norvégien (nb-NO)")]),n("li",[e._v("Chinois traditionnel (zh-TW)")]),n("li",[e._v("Italien (it)")]),n("li",[e._v("Coréen (ko)")]),n("li",[e._v("Japonais (ja)")]),n("li",[e._v("Néerlandais (nl)")]),n("li",[e._v("Vietnamien (vi)")]),n("li",[e._v("Russe (ru-RU)")]),n("li",[e._v("Turque (tr-TR)")]),n("li",[e._v("Portugais brésilien (pt-br)")]),n("li",[e._v("Farsi (fa)")]),n("li",[e._v("Thaï (th)")]),n("li",[e._v("Indonésien (id)")]),n("li",[e._v("Bulgare (bg)")]),n("li",[e._v("Polonais (pl)")]),n("li",[e._v("Finnois (fi)")]),n("li",[e._v("Suédois (sv-SE)")]),n("li",[e._v("Grec (el)")]),n("li",[e._v("Slovaque (sk)")]),n("li",[e._v("Catalan (ca)")]),n("li",[e._v("Tchèque (cs-CZ)")]),n("li",[e._v("Ukrainien (ua)")]),n("li",[e._v("Turkmène (tk)")]),n("li",[e._v("Tamoul (ta)")]),n("li",[e._v("Letton (lv)")]),n("li",[e._v("Afrikaans (af-ZA)")]),n("li",[e._v("Estonien (ee)")]),n("li",[e._v("Slovène (sl)")]),n("li",[e._v("Arabe (ar)")]),n("li",[e._v("Hébreu (he)")]),n("li",[e._v("Lituanien (lt)")]),n("li",[e._v("Mongol (mn)")]),n("li",[e._v("Kazakh (kz)")]),n("li",[e._v("Hongrois (hu)")]),n("li",[e._v("Roumain (ro)")]),n("li",[e._v("Kurde (ku)")]),n("li",[e._v("Ouïghour (ug-CN)")]),n("li",[e._v("Khmer (km)")]),n("li",[e._v("Serbe (sr)")]),n("li",[e._v("Basque (eu)")]),n("li",[e._v("Kirghize (kg)")]),n("li",[e._v("Croate (hr)")]),n("li",[e._v("Arménien (hy)")]),n("li",[e._v("Espéranto (eo)")])]),n("p",[e._v("Si votre langue n'apparaît pas dans la liste, n'hésitez pas a contribuer: ajoutez simplement un fichier de configuration "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/dev/src/locale/lang"}},[e._v("ici")]),e._v(" et créez une pull request.")])])}],!1,null,null,null);t.default=l.exports},830:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"installation"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[e._v("¶")]),e._v(" Installation")]),n("h3",{attrs:{id:"npm"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[e._v("¶")]),e._v(" NPM")]),n("p",[e._v("Installer Element via npm est recommandé, il fonctionne parfaitement avec "),n("a",{attrs:{href:"https://webpack.js.org/"}},[e._v("webpack")]),e._v(".")]),n("pre",[n("code",{staticClass:"language-shell"},[e._v("npm i element-ui -S\n")])]),n("h3",{attrs:{id:"cdn"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[e._v("¶")]),e._v(" CDN")]),n("p",[e._v("Obtenez la dernière version via "),n("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[e._v("unpkg.com/element-ui")]),e._v(", et importez le JavaScript et le CSS dans votre page.")]),n("pre",[n("code",{staticClass:"language-html"},[e._v('\x3c!-- import du CSS --\x3e\n<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">\n\x3c!-- import du JavaScript --\x3e\n<script src="https://unpkg.com/element-ui/lib/index.js"><\/script>\n')])]),n("div",{staticClass:"tip"},[n("p",[e._v("Il est recommandé de fixer la version d'Element lors de l'utilisation du CDN. Référez-vous à  "),n("a",{attrs:{href:"https://unpkg.com"}},[e._v("unpkg.com")]),e._v(" pour plus d'informations.")])]),n("h3",{attrs:{id:"hello-world"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[e._v("¶")]),e._v(" Hello world")]),n("p",[e._v("Si vous utilisez un CDN, une page hello-world peut être obtenue facilement avec Element ("),n("a",{attrs:{href:"https://codepen.io/bofeng/pen/poaEmJY"}},[e._v("démo en ligne")]),e._v(").")]),n("iframe",{staticStyle:{width:"100%"},attrs:{height:"265",scrolling:"no",title:"Element demo",src:"//codepen.io/bofeng/embed/poaEmJY/?height=265&theme-id=light&default-tab=html",frameborder:"no",allowtransparency:"true",allowfullscreen:"true"}},[e._v("\n  See the Pen "),n("a",{attrs:{href:"https://codepen.io/bofeng/pen/poaEmJY/"}},[e._v("Element demo")]),e._v(" by hetech\n  ("),n("a",{attrs:{href:"https://codepen.io/bofeng"}},[e._v("@bofeng")]),e._v(") on "),n("a",{attrs:{href:"https://codepen.io"}},[e._v("CodePen")]),e._v(".\n")]),n("p",[e._v("Si vous utilisez npm et souhaitez ajouter webpack, continuez sur la page suivante: "),n("a",{attrs:{href:"/#/fr-FR/component/quickstart"}},[e._v("Démarrer")]),e._v(".")])])}],!1,null,null,null);t.default=l.exports},831:function(e,t,n){"use strict";n.r(t);var a=n(0),l=Object(a.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("section",{staticClass:"content element-doc"},[n("h2",{attrs:{id:"demarrer"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#demarrer","aria-hidden":"true"}},[e._v("¶")]),e._v(" Démarrer")]),n("p",[e._v("Cette page vous guidera tout le long de l'installation d'Element au sein d'un projet webpack.")]),n("h3",{attrs:{id:"use-vue-cli-3"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#use-vue-cli-3","aria-hidden":"true"}},[e._v("¶")]),e._v(" Use vue-cli@3")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/vue-cli-plugin-element"}},[e._v("plugin Element")]),e._v(" pour vue-cli@3, que vous pouvez utiliser pour créer rapidement un projet basé sur Element.")]),n("h3",{attrs:{id:"utiliser-le-starter-kit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-le-starter-kit","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser le Starter Kit")]),n("p",[e._v("Nous fournissons un "),n("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[e._v("template de projet")]),e._v(" pour débuter rapidement. Pour les utilisateurs Laravel, il est aussi possible d'utiliser ce "),n("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[e._v("template")]),e._v(". VOus pouvez les télécharger directement.")]),n("p",[e._v("Si vous préférer vous passer de template, voyez la section suivante.")]),n("h3",{attrs:{id:"importer-element"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#importer-element","aria-hidden":"true"}},[e._v("¶")]),e._v(" Importer Element")]),n("p",[e._v("Element peut être importé entièrement ou à la demande. Commençons par l'import total.")]),n("h4",{attrs:{id:"import-total"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#import-total","aria-hidden":"true"}},[e._v("¶")]),e._v(" Import total")]),n("p",[e._v("Dans main.js:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport ElementUI from 'element-ui';\nimport 'element-ui/lib/theme-chalk/index.css';\nimport App from './App.vue';\n\nVue.use(ElementUI);\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("L'exemple ci-dessus importe Element entièrement. Notez que les fichiers CSS doivent être importés séparément.")]),n("h4",{attrs:{id:"a-la-demande"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#a-la-demande","aria-hidden":"true"}},[e._v("¶")]),e._v(" À la demande")]),n("p",[e._v("Grâce au "),n("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[e._v("babel-plugin-component")]),e._v(", nous pouvons importer uniquement les composants désirés, rendant ainsi le projet plus léger.")]),n("p",[e._v("Tout d'abord, installez babel-plugin-component:")]),n("pre",[n("code",{staticClass:"language-bash"},[e._v("npm install babel-plugin-component -D\n")])]),n("p",[e._v("Puis éditez .babelrc:")]),n("pre",[n("code",{staticClass:"language-json"},[e._v('{\n  "presets": [["es2015", { "modules": false }]],\n  "plugins": [\n    [\n      "component",\n      {\n        "libraryName": "element-ui",\n        "styleLibraryName": "theme-chalk"\n      }\n    ]\n  ]\n}\n')])]),n("p",[e._v("Ensuite, si vous n'avez besoin que de Button et Select, éditez main.js comme suit:")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport { Button, Select } from 'element-ui';\nimport App from './App.vue';\n\nVue.component(Button.name, Button);\nVue.component(Select.name, Select);\n/* ou\n * Vue.use(Button)\n * Vue.use(Select)\n */\n\nnew Vue({\n  el: '#app',\n  render: h => h(App)\n});\n")])]),n("p",[e._v("Exemple complet (liste complète des composants dans "),n("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/master/components.json"}},[e._v("components.json")]),e._v("):")]),n("pre",[n("code",{staticClass:"language-javascript"},[e._v("import Vue from 'vue';\nimport {\n  Pagination,\n  Dialog,\n  Autocomplete,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Menu,\n  Submenu,\n  MenuItem,\n  MenuItemGroup,\n  Input,\n  InputNumber,\n  Radio,\n  RadioGroup,\n  RadioButton,\n  Checkbox,\n  CheckboxButton,\n  CheckboxGroup,\n  Switch,\n  Select,\n  Option,\n  OptionGroup,\n  Button,\n  ButtonGroup,\n  Table,\n  TableColumn,\n  DatePicker,\n  TimeSelect,\n  TimePicker,\n  Popover,\n  Tooltip,\n  Breadcrumb,\n  BreadcrumbItem,\n  Form,\n  FormItem,\n  Tabs,\n  TabPane,\n  Tag,\n  Tree,\n  Alert,\n  Slider,\n  Icon,\n  Row,\n  Col,\n  Upload,\n  Progress,\n  Spinner,\n  Badge,\n  Card,\n  Rate,\n  Steps,\n  Step,\n  Carousel,\n  CarouselItem,\n  Collapse,\n  CollapseItem,\n  Cascader,\n  ColorPicker,\n  Transfer,\n  Container,\n  Header,\n  Aside,\n  Main,\n  Footer,\n  Timeline,\n  TimelineItem,\n  Link,\n  Divider,\n  Image,\n  Calendar,\n  Backtop,\n  PageHeader,\n  CascaderPanel,\n  Loading,\n  MessageBox,\n  Message,\n  Notification\n} from 'element-ui';\n\nVue.use(Pagination);\nVue.use(Dialog);\nVue.use(Autocomplete);\nVue.use(Dropdown);\nVue.use(DropdownMenu);\nVue.use(DropdownItem);\nVue.use(Menu);\nVue.use(Submenu);\nVue.use(MenuItem);\nVue.use(MenuItemGroup);\nVue.use(Input);\nVue.use(InputNumber);\nVue.use(Radio);\nVue.use(RadioGroup);\nVue.use(RadioButton);\nVue.use(Checkbox);\nVue.use(CheckboxButton);\nVue.use(CheckboxGroup);\nVue.use(Switch);\nVue.use(Select);\nVue.use(Option);\nVue.use(OptionGroup);\nVue.use(Button);\nVue.use(ButtonGroup);\nVue.use(Table);\nVue.use(TableColumn);\nVue.use(DatePicker);\nVue.use(TimeSelect);\nVue.use(TimePicker);\nVue.use(Popover);\nVue.use(Tooltip);\nVue.use(Breadcrumb);\nVue.use(BreadcrumbItem);\nVue.use(Form);\nVue.use(FormItem);\nVue.use(Tabs);\nVue.use(TabPane);\nVue.use(Tag);\nVue.use(Tree);\nVue.use(Alert);\nVue.use(Slider);\nVue.use(Icon);\nVue.use(Row);\nVue.use(Col);\nVue.use(Upload);\nVue.use(Progress);\nVue.use(Spinner);\nVue.use(Badge);\nVue.use(Card);\nVue.use(Rate);\nVue.use(Steps);\nVue.use(Step);\nVue.use(Carousel);\nVue.use(CarouselItem);\nVue.use(Collapse);\nVue.use(CollapseItem);\nVue.use(Cascader);\nVue.use(ColorPicker);\nVue.use(Transfer);\nVue.use(Container);\nVue.use(Header);\nVue.use(Aside);\nVue.use(Main);\nVue.use(Footer);\nVue.use(Timeline);\nVue.use(TimelineItem);\nVue.use(Link);\nVue.use(Divider);\nVue.use(Image);\nVue.use(Calendar);\nVue.use(Backtop);\nVue.use(PageHeader);\nVue.use(CascaderPanel);\n\nVue.use(Loading.directive);\n\nVue.prototype.$loading = Loading.service;\nVue.prototype.$msgbox = MessageBox;\nVue.prototype.$alert = MessageBox.alert;\nVue.prototype.$confirm = MessageBox.confirm;\nVue.prototype.$prompt = MessageBox.prompt;\nVue.prototype.$notify = Notification;\nVue.prototype.$message = Message;\n")])]),n("h3",{attrs:{id:"configuration-globale"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#configuration-globale","aria-hidden":"true"}},[e._v("¶")]),e._v(" Configuration globale")]),n("p",[e._v("Lors de l'import d'Element, vous pouvez définir un objet de configuration global. Actuellement il possède de propriétés: "),n("code",[e._v("size")]),e._v(" et "),n("code",[e._v("zIndex")]),e._v(". La propriété "),n("code",[e._v("size")]),e._v(" détermine la taille par défaut de tout les composants et "),n("code",[e._v("zIndex")]),e._v(" règle le z-index initial (default: 2000) des fenêtres modales:")]),n("p",[e._v("Import total d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport Element from 'element-ui';\nVue.use(Element, { size: 'small', zIndex: 3000 });\n")])]),n("p",[e._v("Import partiel d'Element：")]),n("pre",[n("code",{staticClass:"language-js"},[e._v("import Vue from 'vue';\nimport { Button } from 'element-ui';\n\nVue.prototype.$ELEMENT = { size: 'small', zIndex: 3000 };\nVue.use(Button);\n")])]),n("p",[e._v("Avec la configuration ci-dessus, la taille par défaut des composants ayant l'attribut size sera 'small', et le z-index initial des fenêtres modales est 3000.")]),n("h3",{attrs:{id:"commencer-a-developper"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#commencer-a-developper","aria-hidden":"true"}},[e._v("¶")]),e._v(" Commencer à développer")]),n("p",[e._v("Maintenant que vous avez ajouté Vue et Element à votre projet, vous pouvez commencer à coder. Référez-vous à la documentation de chaque composant pour savoir comment les utiliser.")]),n("h3",{attrs:{id:"utiliser-nuxt-js"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#utiliser-nuxt-js","aria-hidden":"true"}},[e._v("¶")]),e._v(" Utiliser Nuxt.js")]),n("p",[e._v("Vous pouvez également commencer un projet avec "),n("a",{attrs:{href:"https://nuxtjs.org/"}},[e._v("Nuxt.js")]),e._v(":")]),n("div",{staticClass:"glitch-embed-wrap",staticStyle:{height:"420px",width:"100%"}},[n("iframe",{staticStyle:{height:"100%",width:"100%",border:"0"},attrs:{src:"https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true",alt:"nuxt-with-element on glitch"}})])])}],!1,null,null,null);t.default=l.exports}}]);