@orca-fe/pocket
Version:
UI components by orca-team
101 lines (100 loc) • 2.56 kB
JavaScript
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 调整图片在容器中的位置
*/
import React from 'react';
import { EqRatioImg } from "../..";
import { Space } from 'antd';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var imgSrc = `${(_window$publicPath = window['publicPath']) !== null && _window$publicPath !== void 0 ? _window$publicPath : '/'}tmp.jpg`;
var Demo = () => /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("div", {
children: "top/center/bottom"
}), /*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "top",
style: {
width: 100,
height: 200,
border: '1px solid #DDD'
}
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "center",
style: {
width: 100,
height: 200,
border: '1px solid #DDD'
}
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "bottom",
style: {
width: 100,
height: 200,
border: '1px solid #DDD'
}
})]
}), /*#__PURE__*/_jsx("div", {
children: "left/center/right"
}), /*#__PURE__*/_jsxs(Space, {
children: [/*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "left",
style: {
width: 280,
height: 100,
border: '1px solid #DDD'
}
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "center",
style: {
width: 280,
height: 100,
border: '1px solid #DDD'
}
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "right",
style: {
width: 280,
height: 100,
border: '1px solid #DDD'
}
})]
}), /*#__PURE__*/_jsx("div", {
children: "percent 20%"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "20% 20%",
style: {
width: 100,
height: 200,
border: '1px solid #DDD'
}
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
imgPosition: "20% 20%",
style: {
width: 280,
height: 100,
border: '1px solid #DDD'
}
})]
});
export default Demo;