@cainiaofe/cn-ui-m
Version:
31 lines (30 loc) • 1.85 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 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: "\u4E0D\u662F\u6EE1\u5BBD\u7684\u6ED1\u5757" },
React.createElement(DemoBlock, { title: "\u5361\u5728\u8FB9\u754C" },
React.createElement(CnSlider, { trackOffset: 10, slideSize: 80, style: {
'--border-radius': '8px',
}, defaultIndex: 0 }, items)),
React.createElement(DemoBlock, { title: "\u5141\u8BB8\u8D8A\u8FC7\u8FB9\u754C" },
React.createElement(CnSlider, { stuckAtBoundary: false, slideSize: 80, defaultIndex: 3 }, items),
React.createElement(DemoDescription, { content: "\u5141\u8BB8\u6700\u540E\u4E00\u9879\u8D8A\u8FC7\u8FB9\u754C" })),
React.createElement(DemoBlock, { title: "\u5C45\u4E2D\u5C55\u793A" },
React.createElement(CnSlider, { slideSize: 90, trackOffset: 5, stuckAtBoundary: false }, items)),
React.createElement(DemoBlock, { title: "\u5FAA\u73AF\u5C45\u4E2D\u5C55\u793A" },
React.createElement(CnSlider, { slideSize: 70, trackOffset: 15, loop: true, stuckAtBoundary: false }, items))));
};
export default { title: 'demo/CnSlider' };