@cainiaofe/cn-ui-m
Version:
28 lines (27 loc) • 1.38 kB
JavaScript
import { __assign } from "tslib";
import React from 'react';
import { CnDemoBlock as DemoBlock, CnDemoDescription as DemoDescription, CnSlider, CnSliderItem, CnDemoPage, } from "../../..";
import './demo1.scss';
var colors = ['#ace0ff', '#bcffbd', '#e4fabd', 'blue'];
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 }), onClick: function () {
console.log("\u4F60\u70B9\u51FB\u4E86\u5361\u7247 ".concat(index + 1));
} }, index + 1))); });
export var 自定义样式 = function () {
return (React.createElement(CnDemoPage, { title: "\u81EA\u5B9A\u4E49\u6837\u5F0F" },
React.createElement(DemoBlock, { title: "\u81EA\u5B9A\u4E49\u6837\u5F0F" },
React.createElement(CnSlider, { style: {
'--border-radius': '8px',
}, defaultIndex: 3 }, items),
React.createElement(DemoDescription, { content: "\u901A\u8FC7 CSS \u53D8\u91CF\u53EF\u4EE5\u63A7\u5236\u6574\u4F53\u7684\u5706\u89D2\u7B49\u6837\u5F0F" }))));
};
export default { title: 'demo/CnSlider' };