ant-design-3x
/
demo-0.4617812753015933.html

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        background: none;
      }
      #components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
    </style>
    <script>
      // sync parent style generated by style-loader into iframe
      if (parent.location.port) {
        [].forEach.call(parent.document.getElementsByTagName('head')[0].querySelectorAll('style'), function(node) {
          document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      } else {
        // append parent stylesheet
        [].forEach.call(parent.document.querySelectorAll('link[rel=stylesheet]'), function(node) {
          node && document.getElementsByTagName('head')[0].appendChild(node.cloneNode(true));
        });
      }
    </script>
  </head>
  <body>
    <div id="components-layout-demo-side"></div>
    <script>
      function require(module) {
        if (module === 'react-router') {
          return window.ReactRouter;
        }
        if (module === 'react-router-dom') {
          return window.ReactRouterDOM;
        }
        return window.parent[module];
      }
      var mountNode = document.getElementById('components-layout-demo-side');
      var React = require('react');
      var ReactDOM = require('react-dom');
    </script>

    <script>
      function bishengPluginReactPreviewer() {
  var React = require("react");

  var ReactDOM = require("react-dom");

  var _antd = require("antd");

  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

  function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

  var Header = _antd.Layout.Header,
      Content = _antd.Layout.Content,
      Footer = _antd.Layout.Footer,
      Sider = _antd.Layout.Sider;
  var SubMenu = _antd.Menu.SubMenu;

  var SiderDemo = /*#__PURE__*/function (_React$Component) {
    _inherits(SiderDemo, _React$Component);

    var _super = _createSuper(SiderDemo);

    function SiderDemo() {
      var _this;

      _classCallCheck(this, SiderDemo);

      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      _this = _super.call.apply(_super, [this].concat(args));

      _defineProperty(_assertThisInitialized(_this), "state", {
        collapsed: false
      });

      _defineProperty(_assertThisInitialized(_this), "onCollapse", function (collapsed) {
        console.log(collapsed);

        _this.setState({
          collapsed: collapsed
        });
      });

      return _this;
    }

    _createClass(SiderDemo, [{
      key: "render",
      value: function render() {
        return /*#__PURE__*/React.createElement(_antd.Layout, {
          style: {
            minHeight: '100vh'
          }
        }, /*#__PURE__*/React.createElement(Sider, {
          collapsible: true,
          collapsed: this.state.collapsed,
          onCollapse: this.onCollapse
        }, /*#__PURE__*/React.createElement("div", {
          className: "logo"
        }), /*#__PURE__*/React.createElement(_antd.Menu, {
          theme: "dark",
          defaultSelectedKeys: ['1'],
          mode: "inline"
        }, /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "1"
        }, /*#__PURE__*/React.createElement(_antd.Icon, {
          type: "pie-chart"
        }), /*#__PURE__*/React.createElement("span", null, "Option 1")), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "2"
        }, /*#__PURE__*/React.createElement(_antd.Icon, {
          type: "desktop"
        }), /*#__PURE__*/React.createElement("span", null, "Option 2")), /*#__PURE__*/React.createElement(SubMenu, {
          key: "sub1",
          title: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_antd.Icon, {
            type: "user"
          }), /*#__PURE__*/React.createElement("span", null, "User"))
        }, /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "3"
        }, "Tom"), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "4"
        }, "Bill"), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "5"
        }, "Alex")), /*#__PURE__*/React.createElement(SubMenu, {
          key: "sub2",
          title: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_antd.Icon, {
            type: "team"
          }), /*#__PURE__*/React.createElement("span", null, "Team"))
        }, /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "6"
        }, "Team 1"), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "8"
        }, "Team 2")), /*#__PURE__*/React.createElement(_antd.Menu.Item, {
          key: "9"
        }, /*#__PURE__*/React.createElement(_antd.Icon, {
          type: "file"
        }), /*#__PURE__*/React.createElement("span", null, "File")))), /*#__PURE__*/React.createElement(_antd.Layout, null, /*#__PURE__*/React.createElement(Header, {
          style: {
            background: '#fff',
            padding: 0
          }
        }), /*#__PURE__*/React.createElement(Content, {
          style: {
            margin: '0 16px'
          }
        }, /*#__PURE__*/React.createElement(_antd.Breadcrumb, {
          style: {
            margin: '16px 0'
          }
        }, /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, null, "User"), /*#__PURE__*/React.createElement(_antd.Breadcrumb.Item, null, "Bill")), /*#__PURE__*/React.createElement("div", {
          style: {
            padding: 24,
            background: '#fff',
            minHeight: 360
          }
        }, "Bill is a cat.")), /*#__PURE__*/React.createElement(Footer, {
          style: {
            textAlign: 'center'
          }
        }, "Ant Design \xA92018 Created by Ant UED")));
      }
    }]);

    return SiderDemo;
  }(React.Component);

  return /*#__PURE__*/React.createElement(SiderDemo, null);
}
    </script>
    <script>
      var ReactDOM = require('react-dom');
      var app = bishengPluginReactPreviewer();

      if (true) {
        var container = null;
        app = React.createElement(
          require('antd').ConfigProvider,
          {
            getPopupContainer() { return container; },
          },
          [
            React.cloneElement(app, { key: 'AppContent' }),
            React.createElement('div', {
              key: 'InjectProviderHolder',
              ref(node) { container = node; },
            }),
          ],
        );
      }

      ReactDOM.render(app, mountNode);
    </script>
  </body>
</html>