@orca-fe/pocket
Version:
UI components by orca-team
42 lines (40 loc) • 1.27 kB
JavaScript
;
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: Cover mode
* desc: Ruler will always cover parent.
*
* title.zh-CN: Cover 模式
* desc.zh-CN: 这个例子为cover模式，标尺永远占满容器，尺寸为 10x60 20x60 30x60 40x60 50x60 60x60 70x60 80x60 90x60
*/
var Demo = function Demo() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
style: {
display: 'flex',
justifyContent: 'space-evenly'
},
children: [10, 20, 30, 40, 50, 60, 70, 80, 90].map(function (width) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EqRatioBox, {
width: 150,
height: 150,
mode: "cover",
style: {
border: '1px solid #9999FF',
overflow: 'hidden',
height: 60,
width: width
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ruler.default, {})
}, width);
})
});
};
var _default = exports.default = Demo;