@alicloud/console-components/esm/rc/collapse/demos/demo2.js

Alibaba Cloud React Components

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);
};
/**
 * title: "卡片形态"
 * description: "Collapse 接受子组件 Panel 展示信息。Panel 可设置： title（标题）、disable（是否可操作）其中 title 可为字符串或 Component 组件。"
 */
import React from 'react';
import { Collapse } from '@alicloud/console-components';
var Panel = Collapse.Panel;
var titleStyle = {
    color: '#1D1D1F',
    height: 20,
    marginBottom: 4,
};
export default function App() {
    return (React.createElement("div", { className: "App" },
        React.createElement(Collapse, { type: "card", style: { marginBottom: 40 } },
            React.createElement("div", { style: __assign(__assign({}, titleStyle), { marginTop: 0 }) }, "\u9ED8\u8BA4"),
            React.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.createElement(Collapse, { defaultExpandedKeys: ['2'], type: "card", style: { marginBottom: 40 } },
            React.createElement("div", { style: __assign(__assign({}, titleStyle), { marginTop: 0 }) }, "\u5C55\u5F00"),
            React.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.createElement(Collapse, { type: "card" },
            React.createElement("div", { style: __assign(__assign({}, titleStyle), { marginTop: 0 }) }, "\u7981\u7528"),
            React.createElement(Panel, { title: "\u9879\u76EE\u6807\u9898", key: "2", disabled: true }, "\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"))));
}