antd Tabs组件自定义头部

antd的Tabs组件，用renderTabBar自定义TabBar。

直接上代码：

import React, { Fragment, useEffect, useState, useRef } from 'react'
import styles from './style.module.scss'
import classNames from 'classnames/bind'
import { Tabs, Collapse } from 'antd';const { TabPane } = Tabs;const Demo = props => {const cx = classNames.bind(styles); //引用样式，写自己的样式即可const [activeKey, setActiveKey] = useState('0') //用于控制显示哪个TabPaneconst [infos, setInfos] = useState([])useEffect(() => {setInfos([{key: "0", title: "#201"},{key: "1", title: "#202"},{key: "2", title: "#203"},{key: "3", title: "#204"},{key: "4", title: "#205"},{key: "5", title: "#206"}])},[])const renderTabBar = () => {return(// TabBar的样式自己写<div className={cx("table-tabbar-root")}>{infos ? infos.map((item, index) => {//选中tab的样式let className = item.key === activeKey ? "active" : ""return(<div className={cx(className)} key={item.key} onClick={() => setActiveKey(item.key)}>{item.title}</div>)}):null}</div>)}return (<div className={cx("root")}><Tabs activeKey={activeKey}tabPosition={"top"}animated={true}renderTabBar={() => renderTabBar()}><TabPane tab="Tab 0" key="0">Content of Tab 0</TabPane><TabPane tab="Tab 1" key="1">Content of Tab 1</TabPane><TabPane tab="Tab 2" key="2">Content of Tab 2</TabPane><TabPane tab="Tab 3" key="3">Content of Tab 3</TabPane><TabPane tab="Tab 4" key="4">Content of Tab 4</TabPane><TabPane tab="Tab 5" key="5">Content of Tab 5</TabPane></Tabs></div>)
}export default Demo

注：

1. activeKey需要是字符串，尝试用数字，结果失败。

antd Tabs组件自定义头部相关推荐

antd走马灯组件自定义前进后退按钮
antd走马灯组件自定义前进后退按钮[ts + react] antd的Carousel没有提供前进后退按钮需要自己根据文档实现此功能官方提供了next 和prev两个方法 next() 切换到下 ...
基于Antd Input组件自定义Input的成功状态
前言 Ant Design的Input组件的有一个状态的Api 需求公司自研UI组件,在Antd的基础上进行开发.其中Input组件除了警告与错误状态外,还增加了成功的状态.如下图⬇️ 开发实现方 ...
antd tree组件自定义图标
把树的小三角替换为自定义图标,如下图效果 //小三角收起的背景图设置 ant-tree-switcher_close { width: 16px !important; height: 15px !i ...
Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use `items` directly.
Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use items directly. problem 控制台报错 Warning: ...
创建自定义Tabs组件-01
创建自定义Tabs组件-01 此文章用于讲解如何封装一个自定义 Tabs 组件.一步一步了解如何封装自己想要的组件. 构思想象一这个组件该如何使用?一定要站在使用者的角度,大致可能这样. <t ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
Antd Vue 组件库之Table表单
Antd Vue 组件库之Table表单 Table 表格展示行列数据. 何时使用当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用指定表格的 ...
antdpro 中使用 antd select 组件，defaultValue 与 value 使用问题
背景简而言之,就是业务需求中虽然使用了 ProTable,但是表格列中有处理人,处理状态等需要下拉框显示的,于是用了 render 方法,结合 antd select 组件来实现. 原本是打算用 P ...
微信小程序自定义头部导航栏
1.微信自定义头部:app.json里面配置: "navigationStyle": "custom" 2.建立一个navigationBar的公共组件: A. ...

antd Tabs组件自定义头部

antd Tabs组件自定义头部相关推荐

最新文章

热门文章