@orca-fe/pocket
Version:
UI components by orca-team
57 lines • 1.46 kB
JavaScript
/**
* title: Default usage
* desc: Simple demo, set xAlign of 'left' / 'center' / 'right'
*
* title.zh-CN: 基础用法
* desc.zh-CN: 下面的例子，设置高度为100。分别展示居左，居中，居右。
*/
import React from 'react';
import { EqRatioBox } from "../..";
import Ruler from "./Ruler";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Demo = () => /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx(EqRatioBox, {
width: 150,
height: 150,
xAlign: "left",
style: {
overflow: 'hidden',
height: 100,
border: '1px solid #9999ff'
},
children: /*#__PURE__*/_jsx(Ruler, {})
}), /*#__PURE__*/_jsx("p", {
children: "xAlign = left"
}), /*#__PURE__*/_jsx(EqRatioBox, {
width: 150,
height: 150,
style: {
overflow: 'hidden',
height: 100,
border: '1px solid #9999ff'
},
children: /*#__PURE__*/_jsx(Ruler, {})
}), /*#__PURE__*/_jsx("p", {
style: {
textAlign: 'center'
},
children: "xAlign = center(default)"
}), /*#__PURE__*/_jsx(EqRatioBox, {
width: 150,
height: 150,
xAlign: "right",
style: {
overflow: 'hidden',
height: 100,
border: '1px solid #9999ff'
},
children: /*#__PURE__*/_jsx(Ruler, {})
}), /*#__PURE__*/_jsx("p", {
style: {
textAlign: 'right'
},
children: "xAlign = right"
})]
});
export default Demo;