@alicloud/console-components
Version:
Alibaba Cloud React Components
41 lines (40 loc) • 3.94 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/**
* title: "折叠面板"
* description: "Collapse 接受子组件 Panel 展示信息。Panel 可设置： title（标题）、disable（是否可操作）其中 title 可为字符串或 Component 组件。"
*/
var react_1 = __importDefault(require("react"));
var console_components_1 = require("@alicloud/console-components");
var Panel = console_components_1.Collapse.Panel;
var titleStyle = {
margin: '40px 0 4px',
color: '#1D1D1F',
height: 20,
};
function App() {
return (react_1.default.createElement("div", { className: "App" },
react_1.default.createElement(console_components_1.Collapse, { defaultExpandedKeys: ['2'] },
react_1.default.createElement("div", { style: __assign(__assign({}, titleStyle), { marginTop: 0 }) }, "\u9ED8\u8BA4"),
react_1.default.createElement(Panel, { title: "\u9879\u76EE\u6807\u9898", key: "1" }, "\u5E2E\u52A9\u60A8\u57FA\u4E8E\u963F\u91CC\u4E91\u6784\u5EFA\u51FA\u4E00\u4E2A\u9694\u79BB\u7684\u7F51\u7EDC\u73AF\u5883\uFF0C\u5E76\u53EF\u4EE5\u81EA\u5B9A\u4E49IP \u5730\u5740\u8303\u56F4\u3001\u7F51\u6BB5\u3001\u8DEF\u7531\u8868\u548C\u7F51\u5173\u7B49\uFF1B\u6B64\u5916\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u4E13\u7EBF/VPN/GRE\u7B49\u8FDE\u63A5\u65B9\u5F0F\u5B9E\u73B0\u4E91\u4E0AVPC\u4E0E\u4F20\u7EDFIDC\u7684\u4E92\u8054\uFF0C\u6784\u5EFA\u6DF7\u5408\u4E91\u4E1A\u52A1\u3002"),
react_1.default.createElement("div", { style: titleStyle }, "\u5C55\u5F00"),
react_1.default.createElement(Panel, { title: "\u9879\u76EE\u6807\u9898", key: "2" }, "\u5E2E\u52A9\u60A8\u57FA\u4E8E\u963F\u91CC\u4E91\u6784\u5EFA\u51FA\u4E00\u4E2A\u9694\u79BB\u7684\u7F51\u7EDC\u73AF\u5883\uFF0C\u5E76\u53EF\u4EE5\u81EA\u5B9A\u4E49IP \u5730\u5740\u8303\u56F4\u3001\u7F51\u6BB5\u3001\u8DEF\u7531\u8868\u548C\u7F51\u5173\u7B49\uFF1B\u6B64\u5916\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u4E13\u7EBF/VPN/GRE\u7B49\u8FDE\u63A5\u65B9\u5F0F\u5B9E\u73B0\u4E91\u4E0AVPC\u4E0E\u4F20\u7EDFIDC\u7684\u4E92\u8054\uFF0C\u6784\u5EFA\u6DF7\u5408\u4E91\u4E1A\u52A1\u3002"),
react_1.default.createElement("div", { style: titleStyle }, "\u7981\u7528"),
react_1.default.createElement(Panel, { title: "\u9879\u76EE\u6807\u9898", disabled: true, key: "3" }, "\u5E2E\u52A9\u60A8\u57FA\u4E8E\u963F\u91CC\u4E91\u6784\u5EFA\u51FA\u4E00\u4E2A\u9694\u79BB\u7684\u7F51\u7EDC\u73AF\u5883\uFF0C\u5E76\u53EF\u4EE5\u81EA\u5B9A\u4E49IP \u5730\u5740\u8303\u56F4\u3001\u7F51\u6BB5\u3001\u8DEF\u7531\u8868\u548C\u7F51\u5173\u7B49\uFF1B\u6B64\u5916\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u4E13\u7EBF/VPN/GRE\u7B49\u8FDE\u63A5\u65B9\u5F0F\u5B9E\u73B0\u4E91\u4E0AVPC\u4E0E\u4F20\u7EDFIDC\u7684\u4E92\u8054\uFF0C\u6784\u5EFA\u6DF7\u5408\u4E91\u4E1A\u52A1\u3002"),
react_1.default.createElement(Panel, { title: "\u9879\u76EE\u6807\u9898", key: "4" }, "\u5E2E\u52A9\u60A8\u57FA\u4E8E\u963F\u91CC\u4E91\u6784\u5EFA\u51FA\u4E00\u4E2A\u9694\u79BB\u7684\u7F51\u7EDC\u73AF\u5883\uFF0C\u5E76\u53EF\u4EE5\u81EA\u5B9A\u4E49IP \u5730\u5740\u8303\u56F4\u3001\u7F51\u6BB5\u3001\u8DEF\u7531\u8868\u548C\u7F51\u5173\u7B49\uFF1B\u6B64\u5916\uFF0C\u4E5F\u53EF\u4EE5\u901A\u8FC7\u4E13\u7EBF/VPN/GRE\u7B49\u8FDE\u63A5\u65B9\u5F0F\u5B9E\u73B0\u4E91\u4E0AVPC\u4E0E\u4F20\u7EDFIDC\u7684\u4E92\u8054\uFF0C\u6784\u5EFA\u6DF7\u5408\u4E91\u4E1A\u52A1\u3002"))));
}
exports.default = App;