@alicloud/console-components
Version:
Alibaba Cloud React Components
21 lines (20 loc) • 1 kB
JavaScript
/**
* title: "带描述"
* description: "设置item数据的desc字段，显示描述文案。"
*/
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';
var list = [
{ title: '已完成步骤', key: 1, desc: '一句话描述文案' },
{ title: '当前步骤', key: 2, desc: '一句话描述文案' },
{ title: '未完成最后步骤', key: 3, desc: '一句话描述文案' },
];
export default function App() {
var _a = useState(1), currentStep = _a[0], setCurrentStep = _a[1];
var stepClick = useCallback(function (index) {
setCurrentStep(index);
}, []);
var steps1 = list.map(function (item) { return (React.createElement(Step.Item, { key: item.key, title: item.title, content: item.desc, onClick: function (index) { return stepClick(index); } })); });
return (React.createElement("div", null,
React.createElement(Step, { current: currentStep, shape: "circle", labelPlacement: "hoz" }, steps1)));
}