@orca-fe/pocket/lib/eq-ratio-box/demo/Demo1.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _Ruler = _interopRequireDefault(require("./Ruler"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/**
 * title: Default usage
 * desc: Simple demo, set xAlign of 'left' / 'center' / 'right'
 *
 * title.zh-CN: 基础用法
 * desc.zh-CN: 下面的例子，设置高度为100。分别展示居左，居中，居右。
 */

var Demo = function Demo() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioBox, {
      width: 150,
      height: 150,
      xAlign: "left",
      style: {
        overflow: 'hidden',
        height: 100,
        border: '1px solid #9999ff'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ruler.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      children: "xAlign = left"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioBox, {
      width: 150,
      height: 150,
      style: {
        overflow: 'hidden',
        height: 100,
        border: '1px solid #9999ff'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ruler.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      style: {
        textAlign: 'center'
      },
      children: "xAlign = center(default)"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioBox, {
      width: 150,
      height: 150,
      xAlign: "right",
      style: {
        overflow: 'hidden',
        height: 100,
        border: '1px solid #9999ff'
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ruler.default, {})
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
      style: {
        textAlign: 'right'
      },
      children: "xAlign = right"
    })]
  });
};
var _default = exports.default = Demo;