@cainiaofe/cn-ui-m
Version:
41 lines (40 loc) • 3.84 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: "\u7AD6\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", direction: "ver", current: curStep, onChange: setCurStep },
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 1", content: "\u63CF\u8FF0\u6587\u6848", onClick: handleClick }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848", onClick: handleClick }),
React.createElement(CnStepItem, { status: "process", title: "\u6B65\u9AA4 3", content: "process\u63CF\u8FF0\u6587\u6848", onClick: handleClick }))),
React.createElement(CnDemoBlock, { title: "\u65F6\u95F4\u5C55\u793A" },
React.createElement(CnStep, { shape: "circle", direction: "ver", 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", addon: "12:38" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848", addon: "12:39" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 3", content: "\u63CF\u8FF0\u6587\u6848", addon: "12:40" }))),
React.createElement(CnDemoBlock, { title: "\u5B8C\u6574\u65F6\u95F4\u5C55\u793A" },
React.createElement(CnStep, { shape: "circle", direction: "ver", 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", extra: "2022-02-16 12:38" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 2", content: "\u63CF\u8FF0\u6587\u6848", extra: "2022-02-16 12:39" }),
React.createElement(CnStepItem, { title: "\u6B65\u9AA4 3", content: "\u63CF\u8FF0\u6587\u6848", extra: "2022-02-16 14:38" })))));
};
export default { title: 'demo/CnStep' };