@cainiaofe/cn-ui-m
Version:
48 lines (47 loc) • 4.19 kB
JavaScript
import * as React from 'react';
import { CnBox, CnButton, CnDemoBlock, CnDemoPage, CnStep, CnStepItem, } from "../../..";
export var 横向展示 = function () {
var _a = React.useState(-1), curStep = _a[0], setCurStep = _a[1];
var handleClick = function (step) {
console.log("".concat(step, " clicked"));
};
return (React.createElement(CnDemoPage, { title: "\u6A2A\u5411\u5C55\u793A" },
React.createElement(CnDemoBlock, { title: "\u63A7\u5236" },
React.createElement(CnBox, { direction: "row", align: "center", justify: "center" },
React.createElement(CnButton, { type: "primary", model: "outline", disabled: curStep < 0, onClick: function () {
if (curStep >= 0) {
setCurStep(curStep - 1);
}
} }, "\u4E0A\u4E00\u6B65"),
React.createElement("span", null,
"\u8FDB\u5EA6: ",
curStep),
React.createElement(CnButton, { disabled: curStep > 1, type: "primary", icon: "arrow-right", model: "outline", onClick: function () {
if (curStep <= 1) {
setCurStep(curStep + 1);
}
} }, "\u4E0B\u4E00\u6B65"))),
React.createElement(CnDemoBlock, { title: "\u70B9\u72B6\u5C55\u793A" },
React.createElement(CnStep, { shape: "dot", current: curStep, onChange: setCurStep },
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 1", content: "\u83DC\u9E1F\u662F\u5168\u7403\u6700\u5927\u7684\u8DE8\u5883\u7535\u5B50\u5546\u52A1\u7269\u6D41\u63D0\u4F9B\u5546\uFF0C\u62E5\u6709\u5168\u7403\u6700\u5927\u7684\u7684\u8DE8\u5883\u7535\u5546\u4ED3\u7F51\uFF0C\u4E3A\u5546\u5BB6\u63D0\u4F9B\u7AEF\u5230\u7AEF\u7684\u8DE8\u5883\u7535\u5546\u7269\u6D41\u89E3\u51B3\u65B9\u6848\u3002", onClick: handleClick }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848", onClick: handleClick }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 3", content: "\u63CF\u8FF0\u6587\u6848", onClick: handleClick }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 4", content: "\u63CF\u8FF0\u6587\u6848", onClick: handleClick }))),
React.createElement(CnDemoBlock, { title: "\u5706\u5708\u5C55\u793A" },
React.createElement(CnStep, { shape: "circle", current: curStep, onChange: setCurStep },
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 1", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { status: "error", title: "\u6B65\u9AA4 3", content: "error\u72B6\u6001\u63CF\u8FF0\u6587\u6848" }))),
React.createElement(CnDemoBlock, { title: "\u5706\u5708\u8D85\u51FA\u5C55\u793A" },
React.createElement(CnStep, { shape: "circle", current: curStep, onChange: setCurStep },
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 1", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 3", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 4", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 5", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 6", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 7", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 8", content: "\u63CF\u8FF0\u6587\u6848" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 9", content: "\u63CF\u8FF0\u6587\u6848" })))));
};
export default { title: 'demo/CnStep' };