@cainiaofe/cn-ui-m
Version:
26 lines (25 loc) • 1.45 kB
JavaScript
import { __assign } from "tslib";
import { CnDemoBlock as DemoBlock, CnSlider, CnSliderItem, CnDemoPage, } from "../../..";
import React from 'react';
var colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
var verticalContentStyle = {
height: '100%',
color: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '48px',
userSelect: 'none',
};
var verticalItems = colors.map(function (color, index) { return (React.createElement(CnSliderItem, { key: index },
React.createElement("div", { style: __assign(__assign({}, verticalContentStyle), { background: color }) }, index + 1))); });
export var 竖向居中展示 = function () {
return (React.createElement(CnDemoPage, { title: "\u7AD6\u5411\u5C45\u4E2D\u5C55\u793A" },
React.createElement(DemoBlock, { title: "\u7AD6\u5411" },
React.createElement(CnSlider, { direction: "vertical", style: { '--height': '200px' } }, verticalItems)),
React.createElement(DemoBlock, { title: "\u7AD6\u5411\u5C45\u4E2D\u5C55\u793A" },
React.createElement(CnSlider, { direction: "vertical", trackOffset: 10, slideSize: 80, stuckAtBoundary: false, style: { '--height': '200px' } }, verticalItems))));
};
竖向居中展示.desc =
'当你使用竖向的 Slider 时，请务必通过 --height CSS 变量设置一下它的高度，否则 Slider 的会显示异常。';
export default { title: 'demo/CnSlider' };