@orca-fe/pocket
Version:
UI components by orca-team
59 lines (58 loc) • 1.99 kB
JavaScript
var _window$publicPath;
/**
* title: Default usage
* desc:
*
* title.zh-CN: 基础用法
* desc.zh-CN:
*/
import React from 'react';
import { EqRatioImg } from "../..";
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: "\u9ED8\u8BA4 normal \u6A21\u5F0F\uFF0C\u8BBE\u7F6E\u5BBD\u5EA6\u4E3A150\uFF1A"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
style: {
width: 150
}
}), /*#__PURE__*/_jsx("div", {
children: "\u7ED9\u5B9A\u5BBD\u9AD8 150x150\uFF0Cscale \u6A21\u5F0F\uFF0C\u56FE\u7247\u88AB\u62C9\u4F38\u53D8\u5F62\u586B\u6EE1"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "scale",
style: {
width: 150,
height: 150,
border: '1px solid #666666'
}
}), /*#__PURE__*/_jsx("div", {
children: "\u7ED9\u5B9A\u5BBD\u9AD8 150x150\uFF0Ccover \u6A21\u5F0F\uFF0C\u56FE\u7247\u7B49\u6BD4\u7F29\u653E\uFF0C\u5360\u6EE1\u5BB9\u5668"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "cover",
style: {
width: 150,
height: 150,
border: '1px solid #666666'
}
}), /*#__PURE__*/_jsx("div", {
children: "\u7ED9\u5B9A\u5BBD\u9AD8 150x150\uFF0Ccontain \u6A21\u5F0F\uFF0C\u56FE\u7247\u7B49\u6BD4\u7F29\u653E\uFF0C\u4FDD\u8BC1\u5B8C\u6574\u663E\u793A"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc,
mode: "contain",
style: {
width: 150,
height: 150,
border: '1px solid #666666'
}
}), /*#__PURE__*/_jsx("div", {
children: "\u9ED8\u8BA4 normal \u6A21\u5F0F\uFF0C\u4E0D\u8BBE\u7F6E\u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u4F1A\u6309\u5BBD\u5EA6\u62C9\u4F38\u81F3 100%\uFF1A"
}), /*#__PURE__*/_jsx(EqRatioImg, {
src: imgSrc
})]
});
export default Demo;