Ant Design 组件库之步骤条实现

目录

引言

1 antd 之 Steps API

2 antd 之 Steps 示例

引言

antd 组件库是基于 Ant Design 设计体系的 React UI 组件库,antd 为 Web 应用提供了丰富的基础 UI 组件,可以用于研发企业级中后台产品。这篇咱们介绍 antd 组件库之 步骤条

1 antd 之 Steps API

步骤条 Steps 的用处是在 当任务复杂或者存在先后关系时,将其分解成一系列的步骤,从而达到简化任务的目的。其 DOM 节点为 :

<Steps> <Step>...</Step> <Step>...</Step> <Step>...</Step> </Steps>

antd 中的步骤条样式丰富,可以通过设置 Steps 和 Step 的属性来产生不同的 步骤条 样式,详细的这里我进行一个整理:

下面做一些实践。

2 antd 之 Steps 示例

先来看最简单的静态的步骤条,看代码:

import { Steps } from 'antd'; import React from 'react'; const { Step } = Steps; const App = () => ( <Steps current={1}> <Step title="Finished" description="This is a description." /> <Step title="In Progress" subTitle="Left 00:00:08" description="This is a description." /> <Step title="Waiting" description="This is a description." /> </Steps> ); export default App;

可以看到现在 current 默认选择了 1,来看效果:

如果 current 我们选择了 2, 那会是什么样子的呢:

再来看一个 带图标的步骤条,这里用了 antd 的 icon,上代码:

import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons'; import { Steps } from 'antd'; import React from 'react'; const { Step } = Steps; const App = () => ( <Steps> <Step status="finish" title="Login" icon={<UserOutlined />} /> <Step status="finish" title="Verification" icon={<SolutionOutlined />} /> <Step status="process" title="Pay" icon={<LoadingOutlined />} /> <Step status="wait" title="Done" icon={<SmileOutlined />} /> </Steps> ); export default App;

来看效果:

来有意思一些的,看看动态的吧:配合按钮进行步进或后退,来表示一个流程的处理进度,上代码:

import { Button, message, Steps } from 'antd'; import React, { useState } from 'react'; const { Step } = Steps; const steps = [ { title: 'First', content: 'First-content', }, { title: 'Second', content: 'Second-content', }, { title: 'Last', content: 'Last-content', }, ]; const App = () => { const [current, setCurrent] = useState(0); const next = () => { setCurrent(current + 1); }; const prev = () => { setCurrent(current - 1); }; return ( <> <Steps current={current}> {steps.map((item) => ( <Step key={item.title} title={item.title} /> ))} </Steps> <div className="steps-content">{steps[current].content}</div> <div className="steps-action"> {current < steps.length - 1 && ( <Button type="primary" onClick={() => next()}> Next </Button> )} {current === steps.length - 1 && ( <Button type="primary" onClick={() => message.success('Processing complete!')}> Done </Button> )} {current > 0 && ( <Button style={{ margin: '0 8px', }} onClick={() => prev()} > Previous </Button> )} </div> </> ); }; export default App;

还有 CSS 代码,同级目录下写个 index.less

.steps-content { min-height: 200px; margin-top: 16px; padding-top: 80px; text-align: center; background-color: #fafafa; border: 1px dashed #e9e9e9; border-radius: 2px; } .steps-action { margin-top: 24px; }

来看效果:

步骤条还可以通过 Steps 的 status 属性来指定当前步骤的状态,来看示例:

import { Steps } from 'antd'; import React from 'react'; const { Step } = Steps; const App = () => ( <Steps current={1} status="error"> <Step title="Finished" description="This is a description" /> <Step title="In Process" description="This is a description" /> <Step title="Waiting" description="This is a description" /> </Steps> ); export default App;

来看效果,这里是第 1 步出现 err 了:

咱们也可以给步骤条的每个步骤添加自定义的展示,上代码:

import { Popover, Steps } from 'antd'; import React from 'react'; const { Step } = Steps; const customDot = (dot, { status, index }) => ( <Popover content={ <span> step {index} status: {status} </span> } > {dot} </Popover> ); const App = () => ( <Steps current={1} progressDot={customDot}> <Step title="Finished" description="You can hover on the dot." /> <Step title="In Progress" description="You can hover on the dot." /> <Step title="Waiting" description="You can hover on the dot." /> <Step title="Waiting" description="You can hover on the dot." /> </Steps> ); export default App;

来看效果:

最后来看一个 Steps 中的 Step 可点击的步骤条,上代码:

import { Divider, Steps } from 'antd'; import React, { useState } from 'react'; const { Step } = Steps; const App = () => { const [current, setCurrent] = useState(0); const onChange = (value) => { console.log('onChange:', current); setCurrent(value); }; return ( <> <Steps current={current} onChange={onChange}> <Step title="Step 1" description="This is a description." /> <Step title="Step 2" description="This is a description." /> <Step title="Step 3" description="This is a description." /> </Steps> <Divider /> <Steps current={current} onChange={onChange} direction="vertical"> <Step title="Step 1" description="This is a description." /> <Step title="Step 2" description="This is a description." /> <Step title="Step 3" description="This is a description." /> </Steps> </> ); }; export default App;

从上面的代码可以看到,当你点击 change Steps 的时候,会触发 onChange 回调函数,咱们这里的 onChange 只做了两件事情:

(1) 控制台打印 current,current 大家应该熟悉,就是第几个 Step;

(2) 设置 setCurrent。这个地方不限于此,尽可以发挥想象。

来看效果:

好了,以上分享了 Ant Design 组件库之步骤条。

更多关于Ant Design 组件库步骤条的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    电脑中玩游戏提示未安装easyanticheat怎么办【详解】

    电脑中玩游戏提示未安装easyanticheat怎么办【详解】,安装,中玩,提示,游戏,步骤,教程,  近日有用户在电脑中玩某些游戏的时候,发现突然会弹出

    antimalware service executable怎么关【关闭方法】

    antimalware service executable怎么关【关闭方法】,单击,设置,选择,下拉菜单,威胁,图标,  最近不少用户在使用电脑的时候发现自己的电脑非常

    AntiVirus是什么

    AntiVirus是什么,杀毒软件,系统,反病毒,反病毒软件,杀毒,特洛伊木马,  杀毒软件(Antivirus 或 Antivirus software)使用于侦测、移除电脑病毒

    ANT是什么接口

    ANT是什么接口,接口,路由,信号,传输,无线网卡,参数,ANT是天线接口,用来连接天线;常见于收音机或者GPS等上面;在接收短波或FM时需要外界天线,以增加

    predominant和dominant的区别是什么

    predominant和dominant的区别是什么,主导,基因,predominant和dominant的区别是什么主导和主要的是:不同的中文含义,不同的单词和不同用法的

    HP deskjet ink advantage 1018打印机如何安装【安装教程】

    HP deskjet ink advantage 1018打印机如何安装【安装教程】,安装,选择,打印,安装教程,下载,步骤,  打印机是办公室不可或缺的打印设备,在选择

    participant和 participation区别

    participant和 participation区别,参与者,英语,本文目录participant和 participation区别参与者英文participatant与participator的区别是

    Ant中的classpath配置和使用

    Ant中的classpath配置和使用,是一个,适合,Ant手册中配置classpath采用classpath标签,可是我发现这样配置总是不好用,还是直接用path设置clas

    ant 命令

    ant 命令,文件,目标,ant的构建文件一. ant 的构建文件:1. 目录结构:antBookantBook/srcantBook/buildantBook/build/classeseantBook/build/

    Arrogant  中文是什么

    Arrogant 中文是什么,傲慢,骄傲,本文目录Arrogant 中文是什么proud与 arrogant的区别arrogant和Pride的区别conceited与arrogant在英语