@orca-fe/pocket/lib/eq-ratio-img/demo/Demo2.js

UI components by orca-team

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
var _react = _interopRequireDefault(require("react"));
var _ = require("../..");
var _jsxRuntime = require("react/jsx-runtime");
var _window$publicPath;
/**
 * title: position
 * desc: Use imgPosition to adjust the position of the image in the container
 *
 * title.zh-CN: 图片位置
 * desc.zh-CN: 通过 imgPosition 调整图片在容器中的位置
 */
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var imgSrc = "".concat((_window$publicPath = window['publicPath']) !== null && _window$publicPath !== void 0 ? _window$publicPath : '/', "tmp.jpg");
var Demo = function Demo() {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "top/center/bottom"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "top",
        style: {
          width: 100,
          height: 200,
          border: '1px solid #DDD'
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "center",
        style: {
          width: 100,
          height: 200,
          border: '1px solid #DDD'
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "bottom",
        style: {
          width: 100,
          height: 200,
          border: '1px solid #DDD'
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "left/center/right"
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "left",
        style: {
          width: 280,
          height: 100,
          border: '1px solid #DDD'
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "center",
        style: {
          width: 280,
          height: 100,
          border: '1px solid #DDD'
        }
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
        src: imgSrc,
        mode: "contain",
        imgPosition: "right",
        style: {
          width: 280,
          height: 100,
          border: '1px solid #DDD'
        }
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      children: "percent 20%"
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
      src: imgSrc,
      mode: "contain",
      imgPosition: "20% 20%",
      style: {
        width: 100,
        height: 200,
        border: '1px solid #DDD'
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioImg, {
      src: imgSrc,
      mode: "contain",
      imgPosition: "20% 20%",
      style: {
        width: 280,
        height: 100,
        border: '1px solid #DDD'
      }
    })]
  });
};
var _default = exports.default = Demo;