@cainiaofe/cn-ui-m
Version:
37 lines (36 loc) • 1.6 kB
JavaScript
import { __assign } from "tslib";
import { CnDemoBlock as DemoBlock, CnSlider, CnSliderItem, CnDemoPage, } from "../../..";
import React, { useState } from 'react';
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 () {
var _a = useState(1), index = _a[0], setIndex = _a[1];
var handleChangeIndex = function (i) {
if (i < 0 || i >= colors.length) {
return;
}
setIndex(i);
};
return (React.createElement(CnDemoPage, { title: "\u53D7\u63A7" },
React.createElement(DemoBlock, { title: "\u53D7\u63A7" },
React.createElement(CnSlider, { loop: true, index: index, onIndexChange: setIndex }, items),
React.createElement("button", { onClick: function () {
handleChangeIndex(index - 1);
} }, "\u4E0A\u4E00\u4E2A"),
React.createElement("button", { onClick: function () {
handleChangeIndex(index + 1);
} }, "\u4E0B\u4E00\u4E2A"))));
};
export default { title: 'demo/CnSlider' };