element-plus/DOCS en-US9.50901e38ca861663009e.js
2020-12-09 05:14:52 +00:00

444 lines
28 KiB
JavaScript

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[62],{
/***/ 541:
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: ./node_modules/vue/dist/vue.esm-browser.js
var vue_esm_browser = __webpack_require__(0);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist/templateLoader.js??ref--6!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/en-US/carousel.md?vue&type=template&id=aeeb0f74
var carouselvue_type_template_id_aeeb0f74_hoisted_1 = {
class: "content element-doc"
};
var carouselvue_type_template_id_aeeb0f74_hoisted_2 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h2", {
id: "carousel"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#carousel"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Carousel")], -1);
var carouselvue_type_template_id_aeeb0f74_hoisted_3 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Loop a series of images or texts in a limited space", -1);
var carouselvue_type_template_id_aeeb0f74_hoisted_4 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "basic-usage"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#basic-usage"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Basic usage")], -1);
var carouselvue_type_template_id_aeeb0f74_hoisted_5 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Combine "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-carousel"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" with "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-carousel-item"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "el-carousel-item"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" tag. By default the carousel switches when mouse hovers over an indicator. Set "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "trigger"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "click"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(", and the carousel switches only when an indicator is clicked.")])], -1);
var carouselvue_type_template_id_aeeb0f74_hoisted_6 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<template>\n <div class=\"block\">\n <span class=\"demonstration\">Switch when indicator is hovered (default)</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\">Switch when indicator is clicked</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")], -1);
var _hoisted_7 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "indicators"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#indicators"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Indicators")], -1);
var _hoisted_8 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "Indicators can be displayed outside the carousel", -1);
var _hoisted_9 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("The "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "indicator-position"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "indicator-position"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "outside"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" moves them outside; setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "indicator-position"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "none"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" hides the indicators.")])], -1);
var _hoisted_10 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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")], -1);
var _hoisted_11 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "arrows"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#arrows"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Arrows")], -1);
var _hoisted_12 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "You can define when arrows are displayed", -1);
var _hoisted_13 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("The "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "arrow"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "arrow"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "always"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" or "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "never"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" shows/hides the arrows permanently.")])], -1);
var _hoisted_14 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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")], -1);
var _hoisted_15 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("h3", {
id: "card-mode"
}, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("a", {
class: "header-anchor",
href: "#card-mode"
}, "¶"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" Card mode")], -1);
var _hoisted_16 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, "When a page is wide enough but has limited height, you can activate card mode for carousels", -1);
var _hoisted_17 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("div", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("Setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "type"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "card"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" activates the card mode. Apart from the appearance, the biggest difference between card mode and common mode is that clicking the slides at both sides directly switches the carousel in card mode.")])], -1);
var _hoisted_18 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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")], -1);
var _hoisted_19 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("p", null, [/*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])("By default, "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" is "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "horizontal"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(". Let carousel be displayed in the vertical direction by setting "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "direction"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(" to "), /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", null, "vertical"), /*#__PURE__*/Object(vue_esm_browser["n" /* createTextVNode */])(".")], -1);
var _hoisted_20 = /*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("pre", null, [/*#__PURE__*/Object(vue_esm_browser["o" /* createVNode */])("code", {
class: "html"
}, "<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")], -1);
var _hoisted_21 = /*#__PURE__*/Object(vue_esm_browser["m" /* createStaticVNode */])("<h3 id=\"carousel-attributes\"><a class=\"header-anchor\" href=\"#carousel-attributes\">¶</a> Carousel Attributes</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>height</td><td>height of the carousel</td><td>string</td><td>—</td><td>—</td></tr><tr><td>initial-index</td><td>index of the initially active slide (starting from 0)</td><td>number</td><td>—</td><td>0</td></tr><tr><td>trigger</td><td>how indicators are triggered</td><td>string</td><td>hover/click</td><td>hover</td></tr><tr><td>autoplay</td><td>whether automatically loop the slides</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>interval</td><td>interval of the auto loop, in milliseconds</td><td>number</td><td>—</td><td>3000</td></tr><tr><td>indicator-position</td><td>position of the indicators</td><td>string</td><td>outside/none</td><td>—</td></tr><tr><td>arrow</td><td>when arrows are shown</td><td>string</td><td>always/hover/never</td><td>hover</td></tr><tr><td>type</td><td>type of the Carousel</td><td>string</td><td>card</td><td>—</td></tr><tr><td>loop</td><td>display the items in loop</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>direction</td><td>display direction</td><td>string</td><td>horizontal/vertical</td><td>horizontal</td></tr></tbody></table><h3 id=\"carousel-events\"><a class=\"header-anchor\" href=\"#carousel-events\">¶</a> Carousel Events</h3><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>change</td><td>triggers when the active slide switches</td><td>index of the new active slide, index of the old active slide</td></tr></tbody></table><h3 id=\"carousel-methods\"><a class=\"header-anchor\" href=\"#carousel-methods\">¶</a> Carousel Methods</h3><table><thead><tr><th>Method</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>setActiveItem</td><td>manually switch slide</td><td>index of the slide to be switched to, starting from 0; or the <code>name</code> of corresponding <code>el-carousel-item</code></td></tr><tr><td>prev</td><td>switch to the previous slide</td><td>—</td></tr><tr><td>next</td><td>switch to the next slide</td><td>—</td></tr></tbody></table><h3 id=\"carousel-item-attributes\"><a class=\"header-anchor\" href=\"#carousel-item-attributes\">¶</a> Carousel-Item Attributes</h3><table><thead><tr><th>Attribute</th><th>Description</th><th>Type</th><th>Accepted Values</th><th>Default</th></tr></thead><tbody><tr><td>name</td><td>name of the item, can be used in <code>setActiveItem</code></td><td>string</td><td>—</td><td>—</td></tr><tr><td>label</td><td>text content for the corresponding indicator</td><td>string</td><td>—</td><td>—</td></tr></tbody></table>", 8);
function carouselvue_type_template_id_aeeb0f74_render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_element_demo0 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo0");
var _component_demo_block = Object(vue_esm_browser["P" /* resolveComponent */])("demo-block");
var _component_element_demo1 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo1");
var _component_element_demo2 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo2");
var _component_element_demo3 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo3");
var _component_element_demo4 = Object(vue_esm_browser["P" /* resolveComponent */])("element-demo4");
return Object(vue_esm_browser["G" /* openBlock */])(), Object(vue_esm_browser["j" /* createBlock */])("section", carouselvue_type_template_id_aeeb0f74_hoisted_1, [carouselvue_type_template_id_aeeb0f74_hoisted_2, carouselvue_type_template_id_aeeb0f74_hoisted_3, carouselvue_type_template_id_aeeb0f74_hoisted_4, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo0)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [carouselvue_type_template_id_aeeb0f74_hoisted_6];
}),
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [carouselvue_type_template_id_aeeb0f74_hoisted_5];
}),
_: 1
}), _hoisted_7, _hoisted_8, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo1)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_10];
}),
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_9];
}),
_: 1
}), _hoisted_11, _hoisted_12, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo2)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_14];
}),
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_13];
}),
_: 1
}), _hoisted_15, _hoisted_16, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo3)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_18];
}),
default: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_17];
}),
_: 1
}), _hoisted_19, Object(vue_esm_browser["o" /* createVNode */])(_component_demo_block, null, {
source: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [Object(vue_esm_browser["o" /* createVNode */])(_component_element_demo4)];
}),
highlight: Object(vue_esm_browser["eb" /* withCtx */])(function () {
return [_hoisted_20];
}),
_: 1
}), _hoisted_21]);
}
// CONCATENATED MODULE: ./website/docs/en-US/carousel.md?vue&type=template&id=aeeb0f74
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
var helpers_extends = __webpack_require__(7);
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/dist??ref--2-0!./website/md-loader!./website/docs/en-US/carousel.md?vue&type=script&lang=ts
/* harmony default export */ var carouselvue_type_script_lang_ts = ({
name: 'component-doc',
components: {
"element-demo0": function () {
var _createVNode = vue_esm_browser["o" /* createVNode */],
_renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
var _hoisted_1 = {
class: "block"
};
var _hoisted_2 = /*#__PURE__*/_createVNode("span", {
class: "demonstration"
}, "Switch when indicator is hovered (default)", -1);
var _hoisted_3 = {
class: "small"
};
var _hoisted_4 = {
class: "block"
};
var _hoisted_5 = /*#__PURE__*/_createVNode("span", {
class: "demonstration"
}, "Switch when indicator is clicked", -1);
var _hoisted_6 = {
class: "small"
};
function render(_ctx, _cache) {
var _component_el_carousel_item = _resolveComponent("el-carousel-item");
var _component_el_carousel = _resolveComponent("el-carousel");
return _openBlock(), _createBlock("div", null, [_createVNode("div", _hoisted_1, [_hoisted_2, _createVNode(_component_el_carousel, {
height: "150px"
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(4, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", _hoisted_3, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})]), _createVNode("div", _hoisted_4, [_hoisted_5, _createVNode(_component_el_carousel, {
trigger: "click",
height: "150px"
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(4, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", _hoisted_6, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})])]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo1": function () {
var _renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
function render(_ctx, _cache) {
var _component_el_carousel_item = _resolveComponent("el-carousel-item");
var _component_el_carousel = _resolveComponent("el-carousel");
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_carousel, {
"indicator-position": "outside"
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(4, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", null, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo2": function () {
var _renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
function render(_ctx, _cache) {
var _component_el_carousel_item = _resolveComponent("el-carousel-item");
var _component_el_carousel = _resolveComponent("el-carousel");
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_carousel, {
interval: 5000,
arrow: "always"
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(4, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", null, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo3": function () {
var _renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
var _hoisted_1 = {
class: "medium"
};
function render(_ctx, _cache) {
var _component_el_carousel_item = _resolveComponent("el-carousel-item");
var _component_el_carousel = _resolveComponent("el-carousel");
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_carousel, {
interval: 4000,
type: "card",
height: "200px"
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(6, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", _hoisted_1, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}(),
"element-demo4": function () {
var _renderList = vue_esm_browser["N" /* renderList */],
_Fragment = vue_esm_browser["b" /* Fragment */],
_openBlock = vue_esm_browser["G" /* openBlock */],
_createBlock = vue_esm_browser["j" /* createBlock */],
_toDisplayString = vue_esm_browser["T" /* toDisplayString */],
_createVNode = vue_esm_browser["o" /* createVNode */],
_resolveComponent = vue_esm_browser["P" /* resolveComponent */],
_withCtx = vue_esm_browser["eb" /* withCtx */];
var _hoisted_1 = {
class: "medium"
};
function render(_ctx, _cache) {
var _component_el_carousel_item = _resolveComponent("el-carousel-item");
var _component_el_carousel = _resolveComponent("el-carousel");
return _openBlock(), _createBlock("div", null, [_createVNode(_component_el_carousel, {
height: "200px",
direction: "vertical",
autoplay: false
}, {
default: _withCtx(function () {
return [(_openBlock(), _createBlock(_Fragment, null, _renderList(4, function (item) {
return _createVNode(_component_el_carousel_item, {
key: item
}, {
default: _withCtx(function () {
return [_createVNode("h3", _hoisted_1, _toDisplayString(item), 1)];
}),
_: 2
}, 1024);
}), 64
/* STABLE_FRAGMENT */
))];
}),
_: 1
})]);
}
var democomponentExport = {};
return extends_default()({
render: render
}, democomponentExport);
}()
}
});
// CONCATENATED MODULE: ./website/docs/en-US/carousel.md?vue&type=script&lang=ts
// CONCATENATED MODULE: ./website/docs/en-US/carousel.md
carouselvue_type_script_lang_ts.render = carouselvue_type_template_id_aeeb0f74_render
/* harmony default export */ var carousel = __webpack_exports__["default"] = (carouselvue_type_script_lang_ts);
/***/ })
}]);