@cainiaofe/cn-ui-m
Version:
45 lines (44 loc) • 2.63 kB
JavaScript
import { __assign } from "tslib";
import { CnDemoBlock as DemoBlock, CnDemoDescription as DemoDescription, CnSlider, CnSliderItem, CnDemoPage, } from "../../..";
import React from 'react';
var colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
var contentStyle = {
height: '120px',
color: '#fff',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
fontSize: '48px',
userSelect: 'none',
};
var customIndicatorStyle = {
position: 'absolute',
top: '6px',
right: '6px',
background: 'rgba(0, 0, 0, 0.3)',
padding: '4px 8px',
color: '#fff',
borderRadius: '4px',
userSelect: 'none',
};
var items = colors.map(function (color, index) { return (React.createElement(CnSliderItem, { key: index },
React.createElement("div", { style: __assign(__assign({}, contentStyle), { background: color }) }, index + 1))); });
export var 指示器 = function () {
return (React.createElement(CnDemoPage, { title: "\u6307\u793A\u5668" },
React.createElement(DemoBlock, { title: "\u6307\u793A\u5668\u989C\u8272" },
React.createElement(CnSlider, { indicatorProps: {
color: 'white',
}, defaultIndex: 1 }, items),
React.createElement(DemoDescription, { content: "\u901A\u8FC7 indicatorProps \u53EF\u4EE5\u63A7\u5236\u6307\u793A\u5668\u7684\u5916\u89C2" })),
React.createElement(DemoBlock, { title: "\u6307\u793A\u5668\u5728\u6ED1\u5757\u5916\u9762" },
React.createElement(CnSlider, { style: {
'--track-padding': ' 0 0 16px',
} }, items),
React.createElement(DemoDescription, { content: '\u901A\u8FC7 --track-padding \u53EF\u4EE5\u63A7\u5236\u6ED1\u52A8\u8F68\u9053\u533A\u57DF\u7684 padding\uFF0C\u4ECE\u800C\u5B9E\u73B0\u6307\u793A\u5668\u548C\u6ED1\u5757"\u5206\u79BB"\u7684\u6548\u679C' })),
React.createElement(DemoBlock, { title: "\u81EA\u5B9A\u4E49\u6307\u793A\u5668" },
React.createElement(CnSlider, { indicator: function (total, current) { return (React.createElement("div", { style: customIndicatorStyle }, "".concat(current + 1, " / ").concat(total))); } }, items),
React.createElement(DemoDescription, { content: "\u4F60\u53EF\u4EE5\u5B8C\u5168\u81EA\u5B9A\u4E49\u6307\u793A\u5668\u7684\u6E32\u67D3\uFF0C\u751A\u81F3\u6539\u53D8\u6307\u793A\u5668\u7684\u4F4D\u7F6E" })),
React.createElement(DemoBlock, { title: "\u65E0\u6307\u793A\u5668" },
React.createElement(CnSlider, { indicator: function () { return null; } }, items))));
};
export default { title: 'demo/CnSlider' };