@ohu-mobile/core
Version:
437 lines (436 loc) • 11.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.Vertical = exports.Basic = void 0;
var _Button = _interopRequireDefault(require("../../Button"));
require("../../Button/style");
var _Card = _interopRequireDefault(require("../../Card"));
require("../../Card/style");
var _index = _interopRequireDefault(require("../index"));
require("../style");
var _vue = _interopRequireDefault(require("vue"));
require("./styles.scss");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
title: 'Components/DataDisplay/Carousel',
parameters: {
component: _index.default,
options: {
showPanel: true
}
}
};
var Basic = exports.Basic = function Basic() {
return _vue.default.extend({
data: function data() {
return {
v1: 0,
v2: 0,
gap: '2em',
direction: 'vertical',
center: true
};
},
render: function render() {
var _this = this;
var h = arguments[0];
return h("div", [h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["basic"]), h(_index.default, {
"style": {
background: '#aaa'
},
"attrs": {
"resize": true
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"])]), this.v1]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["loop"]), h(_index.default, {
"attrs": {
"loop": true
},
"style": {
background: '#aaa'
},
"model": {
value: _this.v1,
callback: function callback($$v) {
_this.v1 = $$v;
}
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"])]), this.v1]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["gap"]), h(_index.default, {
"attrs": {
"gap": this.gap,
"loop": true,
"center": this.center
},
"ref": "carousel",
"style": {
background: '#aaa'
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"]), h("div", {
"class": "basic-demo-item"
}, ["3"]), h("div", {
"class": "basic-demo-item"
}, ["4"])]), h("p", [h(_Button.default, {
"attrs": {
"type": "primary",
"size": "md",
"inline": true
},
"on": {
"click": function click(e) {
e.stopPropagation();
_this.$refs.carousel.prev();
}
}
}, ["Prev"]), h(_Button.default, {
"attrs": {
"inline": true,
"size": "md"
},
"on": {
"click": function click(e) {
e.stopPropagation();
_this.$refs.carousel.next();
}
}
}, ["Next"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["step perPage center"]), h(_index.default, {
"attrs": {
"value": 3,
"gap": "1em",
"center": true,
"loop": true,
"perPage": 2,
"moveStep": 1
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"]), h("div", {
"class": "basic-demo-item"
}, ["3"]), h("div", {
"class": "basic-demo-item"
}, ["4"]), h("div", {
"class": "basic-demo-item"
}, ["5"]), h("div", {
"class": "basic-demo-item"
}, ["6"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoSize"]), h(_index.default, {
"attrs": {
"autoSize": true
}
}, [h("div", {
"class": "basic-demo-item",
"style": {
width: '200px'
}
}, ["1"]), h("div", {
"class": "basic-demo-item",
"style": {
width: '100px'
}
}, ["2"]), h("div", {
"class": "basic-demo-item",
"style": {
width: '400px'
}
}, ["3"]), h("div", {
"class": "basic-demo-item",
"style": {
width: '400px'
}
}, ["4"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoplay"]), h(_index.default, {
"attrs": {
"autoplay": true
},
"style": {
background: '#aaa'
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"]), h("div", {
"class": "basic-demo-item"
}, ["3"]), h("div", {
"class": "basic-demo-item"
}, ["4"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoplay loop"]), h(_index.default, {
"attrs": {
"loop": true,
"autoplay": true
},
"style": {
background: '#aaa'
}
}, [h("div", {
"class": "basic-demo-item"
}, ["1"]), h("div", {
"class": "basic-demo-item"
}, ["2"]), h("div", {
"class": "basic-demo-item"
}, ["3"]), h("div", {
"class": "basic-demo-item"
}, ["4"])])])]);
}
});
};
var Vertical = exports.Vertical = function Vertical() {
return _vue.default.extend({
data: function data() {
return {
v1: 0,
v2: 0,
gap: '2em',
direction: 'vertical',
center: true
};
},
render: function render() {
var _this2 = this;
var h = arguments[0];
return h("div", [h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["basic"]), h(_index.default, {
"attrs": {
"direction": "vertical"
},
"style": {
height: '200px',
background: '#aaa'
},
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"])]), this.v1]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["loop"]), h(_index.default, {
"attrs": {
"loop": true,
"direction": "vertical"
},
"style": {
height: '200px',
background: '#aaa'
},
"model": {
value: _this2.v1,
callback: function callback($$v) {
_this2.v1 = $$v;
}
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"])]), this.v1]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["gap"]), h(_index.default, {
"attrs": {
"gap": this.gap,
"loop": true,
"direction": "vertical",
"center": this.center
},
"ref": "carousel",
"style": {
height: '200px',
background: '#aaa'
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"]), h("div", {
"class": "vertical-demo-item"
}, ["3"]), h("div", {
"class": "vertical-demo-item"
}, ["4"])]), h("p", [h(_Button.default, {
"attrs": {
"type": "primary",
"size": "md",
"inline": true
},
"on": {
"click": function click(e) {
e.stopPropagation();
_this2.$refs.carousel.prev();
}
}
}, ["Prev"]), h(_Button.default, {
"attrs": {
"inline": true,
"size": "md"
},
"on": {
"click": function click(e) {
e.stopPropagation();
_this2.$refs.carousel.next();
}
}
}, ["Next"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["step perPage center"]), h(_index.default, {
"attrs": {
"value": 3,
"direction": "vertical",
"gap": "1em",
"center": true,
"loop": true,
"perPage": 2,
"moveStep": 1
},
"style": {
background: '#aaa',
height: '200px'
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"]), h("div", {
"class": "vertical-demo-item"
}, ["3"]), h("div", {
"class": "vertical-demo-item"
}, ["4"]), h("div", {
"class": "vertical-demo-item"
}, ["5"]), h("div", {
"class": "vertical-demo-item"
}, ["6"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoSize"]), h(_index.default, {
"attrs": {
"direction": "vertical",
"autoSize": true
},
"style": {
background: '#aaa',
height: '200px'
}
}, [h("div", {
"class": "basic-demo-item",
"style": {
height: '200px'
}
}, ["1"]), h("div", {
"class": "basic-demo-item",
"style": {
height: '100px'
}
}, ["2"]), h("div", {
"class": "basic-demo-item",
"style": {
height: '400px'
}
}, ["3"]), h("div", {
"class": "basic-demo-item",
"style": {
height: '400px'
}
}, ["4"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoplay"]), h(_index.default, {
"attrs": {
"autoplay": true,
"direction": "vertical"
},
"style": {
background: '#aaa',
height: '200px'
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"]), h("div", {
"class": "vertical-demo-item"
}, ["3"]), h("div", {
"class": "vertical-demo-item"
}, ["4"])])]), h(_Card.default, {
"attrs": {
"shadow": true
}
}, [h(_Card.default.Header, ["autoplay loop"]), h(_index.default, {
"attrs": {
"loop": true,
"direction": "vertical",
"autoplay": true
},
"style": {
background: '#aaa',
height: '200px'
}
}, [h("div", {
"class": "vertical-demo-item"
}, ["1"]), h("div", {
"class": "vertical-demo-item"
}, ["2"]), h("div", {
"class": "vertical-demo-item"
}, ["3"]), h("div", {
"class": "vertical-demo-item"
}, ["4"])])])]);
}
});
};