react+antd 函数式组件写一个可以折叠的竖直步骤条

最新推荐文章于 2024-06-23 09:44:22 发布

好记性不如

最新推荐文章于 2024-06-23 09:44:22 发布

阅读量860

点赞数

分类专栏： react 项目相关内容文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/r8577/article/details/127890686

版权

本文介绍了如何在React应用中结合antd库，利用函数式组件实现一个具有折叠功能的竖直步骤条。包括前言、预期效果展示和具体的代码实现。

摘要由CSDN通过智能技术生成

react antd 函数式组件可折叠的竖直步骤条

文章目录

react antd 函数式组件可折叠的竖直步骤条
前言
效果图
代码如下

前言

实现一个有折叠效果的步骤条

效果图

在这里插入图片描述

代码如下

import {
    DownOutlined, UpOutlined } from '@ant-design/icons';
import {
    Steps } from 'antd'
import React,{
   useState} from 'react'

export default function Step() {
   
  // 默认步骤条全部展开
  const showAll=true

  const description = 'This is a description.';
  const items = [
    {
   
      title: '基本设置'