@alicloud/console-components
Version:
Alibaba Cloud React Components
22 lines (21 loc) • 1.7 kB
JavaScript
/**
* title: "特殊样式"
* description: "设置icon属性，添加自定义图标。"
*/
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';
export default (function () {
var _a = useState(1), currentStep = _a[0], setCurrentStep = _a[1];
var stepClick = useCallback(function (index) {
setCurrentStep(index);
}, []);
return (React.createElement("div", null,
React.createElement(Step, { current: currentStep, animation: false, shape: "circle", labelPlacement: "hoz", style: { marginBottom: '32px' } },
React.createElement(Step.Item, { title: "\u5DF2\u5B8C\u6210\u6B65\u9AA4", icon: "sub_account", onClick: function (index) { return stepClick(index); } }),
React.createElement(Step.Item, { title: "\u5F53\u524D\u6B65\u9AA4", icon: "sub_account", onClick: function (index) { return stepClick(index); } }),
React.createElement(Step.Item, { title: "\u672A\u5B8C\u6210\u6700\u540E\u6B65\u9AA4", icon: "sub_account", onClick: function (index) { return stepClick(index); } })),
React.createElement(Step, { current: currentStep, animation: false, shape: "circle", labelPlacement: "hoz" },
React.createElement(Step.Item, { title: "\u5DF2\u5B8C\u6210\u6B65\u9AA4", icon: "checkmark", onClick: function (index) { return stepClick(index); } }),
React.createElement(Step.Item, { title: "\u5F53\u524D\u6B65\u9AA4", percent: 75, onClick: function (index) { return stepClick(index); } }),
React.createElement(Step.Item, { title: "\u672A\u5B8C\u6210\u6700\u540E\u6B65\u9AA4", onClick: function (index) { return stepClick(index); } }))));
});