@ohu-mobile/core
Version:
672 lines (671 loc) • 18.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NoBorder = exports.HasIndicator = exports.Basic = exports.ActiveColor = void 0;
var _FireFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/FireFilled"));
var _RocketFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/RocketFilled"));
var _StarFilled2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/StarFilled"));
var _UserSmileOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/UserSmileOutlined"));
var _PieChartOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/PieChartOutlined"));
var _MailOutlined2 = _interopRequireDefault(require("@ohu-mobile/icons/lib/MailOutlined"));
var _vue = _interopRequireDefault(require("vue"));
var _index = _interopRequireDefault(require("./index"));
require("./style");
var _Button = _interopRequireDefault(require("../Button"));
require("../Button/style");
var _Icon = _interopRequireDefault(require("../Icon"));
require("../Icon/style");
var _Card = _interopRequireDefault(require("../Card"));
require("../Card/style");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
title: 'Components/Navigation/Tabbar',
parameters: {
component: _index.default,
options: {
showPanel: true
}
}
};
var Basic = exports.Basic = function Basic() {
return _vue.default.extend({
data: function data() {
return {
active: 2
};
},
methods: {
onChange: function onChange(key) {
this.active = key;
},
setActive: function setActive() {
this.active = 0;
}
},
render: function render() {
var h = arguments[0];
var style = {
width: '100%'
};
if (this.active === 0) {
style.boxShadow = '0px 0px 20px 0px rgba(47,131,255,0.14)';
}
return h("div", {
"style": "background: #fff;"
}, [h("p", {
"style": "text-align: center;"
}, [h("p", ["index: ", this.active]), h(_Button.default, {
"attrs": {
"size": "md",
"inline": true,
"type": "primary"
},
"on": {
"click": this.setActive
}
}, ["go to index 0"])]), h(_index.default, {
"attrs": {
"value": this.active
},
"on": {
"input": this.onChange
}
}, [h(_index.default.Item, {
"attrs": {
"iconAreaSize": "lg"
}
}, [h("img", {
"slot": "icon",
"style": style,
"attrs": {
"src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
}
})]), h(_index.default.Item, {
"attrs": {
"textSize": "xsm",
"icon": _MailOutlined2.default
}
}, ["\u90AE\u7BB1"]), h(_index.default.Item, {
"attrs": {
"textSize": "xsm",
"icon": _PieChartOutlined2.default
}
}, ["\u7EDF\u8BA1"]), h(_index.default.Item, {
"attrs": {
"textSize": "xsm",
"icon": _UserSmileOutlined2.default,
"badge": {
type: 'dot'
}
}
}, ["\u6211\u7684"])])]);
}
});
};
var NoBorder = exports.NoBorder = function NoBorder() {
return _vue.default.extend({
render: function render() {
var h = arguments[0];
return h("div", {
"style": "background: #fff;"
}, [h("p", {
"style": "text-align: center;"
}, ["content"]), h(_index.default, {
"attrs": {
"border": false
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"iconAreaSize": "lg"
}
}, [h("img", {
"slot": "icon",
"style": "width: 100%; box-shadow:0px 0px 20px 0px rgba(47,131,255,0.14);",
"attrs": {
"src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo.svg"
}
})]), h(_index.default.Item, {
"attrs": {
"name": "2",
"icon": _MailOutlined2.default
}
}, ["\u90AE\u7BB1"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"icon": _PieChartOutlined2.default
}
}, ["\u7EDF\u8BA1"]), h(_index.default.Item, {
"attrs": {
"name": "4",
"icon": _UserSmileOutlined2.default
}
}, ["\u6211\u7684"])])]);
}
});
};
var ActiveColor = exports.ActiveColor = function ActiveColor() {
return _vue.default.extend({
render: function render() {
var h = arguments[0];
return h(_index.default, {
"attrs": {
"activeColor": "#ff9434",
"inActiveColor": "#000",
"value": "2"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"iconAreaSize": "lg"
}
}, [h("img", {
"slot": "icon",
"style": "width: 100%; box-shadow:0px 0px 20px 0px rgba(47,131,255,0.14);",
"attrs": {
"src": "https://raw.githubusercontent.com/jeffwcx/ohu-mobile/master/docs/storybook/src/assets/logo-white.svg"
}
})]), h(_index.default.Item, {
"attrs": {
"name": "2",
"icon": _MailOutlined2.default,
"badge": 999
}
}, ["\u90AE\u7BB1"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"icon": _PieChartOutlined2.default
}
}, ["\u7EDF\u8BA1"]), h(_index.default.Item, {
"attrs": {
"name": "4",
"icon": _UserSmileOutlined2.default
}
}, ["\u6211\u7684"])]);
}
});
};
var HasIndicator = exports.HasIndicator = function HasIndicator() {
return _vue.default.extend({
render: function render() {
var h = arguments[0];
return h("div", {
"class": "demo"
}, [h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Basic"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"border": false,
"hasIndicator": true,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["ActiveColor"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"activeColor": "red",
"border": false,
"hasIndicator": true,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md",
"badge": {
type: 'dot'
}
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Inline Icon"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"indicatorInverse": true,
"border": false,
"hasIndicator": true,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, [h(_Icon.default, {
"attrs": {
"type": _StarFilled2.default
}
}), "\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Vertical Icon"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"border": false,
"hasIndicator": true,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md",
"icon": _StarFilled2.default,
"badge": {
type: 'dot'
}
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md",
"icon": _RocketFilled2.default
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md",
"icon": _FireFilled2.default
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Indicator Width"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"border": false,
"hasIndicator": true,
"indicatorWidth": 30,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Scroll"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"scroll": true,
"activeColor": "red",
"border": false,
"hasIndicator": true,
"value": "6"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u70ED\u699C"]), h(_index.default.Item, {
"attrs": {
"name": "4",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u65B0\u95FB"]), h(_index.default.Item, {
"attrs": {
"name": "5",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u6C7D\u8F66"]), h(_index.default.Item, {
"attrs": {
"name": "6",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u5A31\u4E50"]), h(_index.default.Item, {
"attrs": {
"name": "7",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u91D1\u878D"]), h(_index.default.Item, {
"attrs": {
"name": "8",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u519B\u4E8B"]), h(_index.default.Item, {
"attrs": {
"name": "9",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u6587\u5316"]), h(_index.default.Item, {
"attrs": {
"name": "10",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u7EAA\u5F55\u7247"]), h(_index.default.Item, {
"attrs": {
"name": "11",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u7535\u5F71"]), h(_index.default.Item, {
"attrs": {
"name": "12",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u7535\u89C6\u5267"]), h(_index.default.Item, {
"attrs": {
"name": "13",
"textSize": "md"
},
"style": {
minWidth: '80px'
}
}, ["\u7EFC\u827A"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Vertical"]), h(_index.default, {
"style": {
background: 'rgb(245, 245, 245)'
},
"attrs": {
"vertical": true,
"hasIndicator": true,
"value": "1"
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md",
"icon": _StarFilled2.default
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md",
"icon": _RocketFilled2.default
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md",
"icon": _FireFilled2.default
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Vertical Indicator Inverse"]), h(_index.default, {
"attrs": {
"indicatorInverse": true,
"border": false,
"vertical": true,
"hasIndicator": true,
"value": "1"
},
"style": {
background: 'rgb(245, 245, 245)'
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md",
"icon": _StarFilled2.default
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md",
"icon": _RocketFilled2.default
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md",
"icon": _FireFilled2.default
}
}, ["\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Vertical No Icon"]), h(_index.default, {
"attrs": {
"indicatorInverse": true,
"border": false,
"vertical": true,
"hasIndicator": true,
"value": "1"
},
"style": {
background: 'rgb(245, 245, 245)'
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, [h(_Icon.default, {
"attrs": {
"type": _StarFilled2.default
}
}), "\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, [h(_Icon.default, {
"attrs": {
"type": _RocketFilled2.default
}
}), "\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
}
}, [h(_Icon.default, {
"attrs": {
"type": _FireFilled2.default
}
}), "\u70ED\u699C"])])]), h(_Card.default, {
"attrs": {
"shadow": true,
"divider": true
}
}, [h(_Card.default.Header, ["Vertical Scroll"]), h(_index.default, {
"attrs": {
"indicatorInverse": true,
"scroll": true,
"border": false,
"vertical": true,
"hasIndicator": true,
"value": "9"
},
"style": {
background: 'rgb(245, 245, 245)',
height: '400px'
}
}, [h(_index.default.Item, {
"attrs": {
"name": "1",
"textSize": "md"
}
}, ["\u5173\u6CE8"]), h(_index.default.Item, {
"attrs": {
"name": "2",
"textSize": "md"
}
}, ["\u63A8\u8350"]), h(_index.default.Item, {
"attrs": {
"name": "3",
"textSize": "md"
}
}, ["\u70ED\u699C"]), h(_index.default.Item, {
"attrs": {
"name": "4",
"textSize": "md"
}
}, ["\u65B0\u95FB"]), h(_index.default.Item, {
"attrs": {
"name": "5",
"textSize": "md"
}
}, ["\u6C7D\u8F66"]), h(_index.default.Item, {
"attrs": {
"name": "6",
"textSize": "md"
}
}, ["\u5A31\u4E50"]), h(_index.default.Item, {
"attrs": {
"name": "7",
"textSize": "md"
}
}, ["\u91D1\u878D"]), h(_index.default.Item, {
"attrs": {
"name": "8",
"textSize": "md"
}
}, ["\u519B\u4E8B"]), h(_index.default.Item, {
"attrs": {
"name": "9",
"textSize": "md"
}
}, ["\u6587\u5316"]), h(_index.default.Item, {
"attrs": {
"name": "10",
"textSize": "md"
}
}, ["\u7EAA\u5F55\u7247"]), h(_index.default.Item, {
"attrs": {
"name": "11",
"textSize": "md"
}
}, ["\u7535\u5F71"]), h(_index.default.Item, {
"attrs": {
"name": "12",
"textSize": "md"
}
}, ["\u7535\u89C6\u5267"]), h(_index.default.Item, {
"attrs": {
"name": "13",
"textSize": "md"
}
}, ["\u7EFC\u827A"])])])]);
}
});
};