/**
 * 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); } }))));
});
