react+antd中的tab页组件修改选中的tab样式

最新推荐文章于 2024-05-08 10:01:53 发布
最新推荐文章于 2024-05-08 10:01:53 发布
阅读量6.7k 收藏 6
点赞数
文章标签： reactjs es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36706903/article/details/108537771
版权
本文介绍了如何在React应用中结合Antd库动态修改Tab组件的选中样式。当进行增删操作时，需要同步更新activeKey并调整样式。删除时，无论顺序如何，都要更新样式；新增时，默认显示新数据的Tab标签。通过获取所有Tab节点，遍历并根据当前选中状态设置不同的样式类。在React中，作者发现直接添加样式类可能会因权重问题导致失败。
摘要由CSDN通过智能技术生成

原图

效果图

思路：tab有增删，我这里是根据目录显示tab标签有选中同一个的，其实tab本身的切换也算选中同一个，

1、删除某个的时候，activeKey变得同时，样式也要跟着变，不管是有顺序的删除还是无序的删除

2、新增的时候，我这里的数据结构是都在最后一个加新数据，如果不是选中同一个，都是默认显示新增的数据的tab标签，也可以放最前面

3、我这里是根据组件的className来判断的，获取到所有的标签document.getElementsByClassName('ant-tabs-tab')节点

4、循环遍历的时候根据是否是当前选中的和没选中的来进行样式赋值，react中，我试了一下，目前就这种方式支持，我添加class，都不成功，可能是class的权重问题

最低0.47元/天 解锁文章
漂亮得皮皮
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
多款精美的tab页签样式任你挑选
05-12
多款好看的tab页签样式，希望对你有所帮助
react中修改antd的默认样式
weixin_30387423的博客
04-30 1999
最近在做react+antd项目。不可避免的遇到了修改antd默认样式的问题。 比如，table组件的表头背景色设置，如果直接使用元素样式，会修改整个项目的table。这里我用的方法是，给table添加一个div父元素，给他设置个className，然后设置这个样式内的table表头样式。 我使用的.less预编译。 <div className={st...
antd vue pro (vue 2.x) 多页签详细操作
最新发布
apgk的博客
05-08 567
antd vue pro 多页签详细配置教程。 ant design vue pro 多页签详细配置
react antd 更改table 表头和表行样式
sunyan3517的博客
10-14 6219
我这里以组件的形式来提供code 使实例正确运行至少需要以下知识： 1 创建react项目（本实例基于react项目） 2 知道如何导入和调用组件 样式效果如下图： 实现方法 目录结构： YMCollapse.css 样式文件code如下： /*行样式1*/ .oddRow{ background:LightCyan; } /*行样式2*/ .evenRow{ background:PowderBlue; } /*表头样式 ...
ant design Tabs组件 修改样式代码
weixin_72099243的博客
05-04 709
【代码】ant design Tabs组件 修改样式代码。
「antd-tabs」的type使用‘editable-card‘下状态栏切换的样式
x54955901的博客
10-08 541
为tabs内当前选中一项的样式，直接添加一个Border-top的样式即可。以下为添加样式之后的展示。我们在使用tabs时使用。时，样式方面会继续使用到。
react-antd-multi-tabs-admin:ts+react+antd-多页签后台模板(纯净版，非 antd pro！)
05-06
Antd Multi Tabs Admin :hammer_and_wrench:Antd多标签页后台管理模板:...多 tab 页签:plus:右键菜单，提升效率 Redux 状态管理:plus:持久化 封装实用 axios 请求 动态链式面包屑导航 菜单页面路由权限控制 less:plus:c
ECharts在React+Antd用法及常见错误
01-08
最近项目中开始使用ECharts做图表，在React+Antd中使用Echart还是遇到了很多坑，希望记录下解决办法可以帮助到大家。由于初次使用，很多代码优化空间很大，希望大家能帮我提出，感恩～ 最终效果 1、实现点击折线图上...
vite2.0+react17+mobx+antd带登录，tabs多开窗口的应用系统框架
03-21
1.采用vite搭建，支持图片压缩，兼容ie11，包名自定义，proxy代理请求，less语法，自动生成压缩包框架，框架主题色定制和公用样式开发 2.请求api接口方法采用axios封装，带响应拦截以及请求拦截事件 3.模拟登录页...
antd-editable:从antd继承的React组件，可以编辑单元格表
05-14
一个基于 的 React 组件， 可以编辑表格的内容并实时保存。 Features 行/列可编辑 tab 键切换 自定义表单数据校验 typescript 支持 支持 Select 控件 行/列/单元格禁用 何时使用 当表格涉及到内容的修改的时候...
【JavaScript源代码】React antd tabs切换造成子组件重复刷新.docx
12-29
React antd tabs切换造成子组件重复刷新 　描述：　Tabs组件在来回切换的过程中，造成TabPane中包含的相同子组件重复渲染，例如：　 activeKey={tabActiveKey}　onChange={(key: string) => this.changeTab(key)}　...
React Ant Design 3.x/4.5.4动态获取Table选择行数据
duansamve的博客
08-07 1297
import React from 'react' import { Row, Col, Space, Table, Button, notification, Pagination } from 'antd'; import axios from 'axios' export default class TableCom extends React.Component { state = { tableData: [], selectedRowKeys: [], // Check .
antd Tabs 实现 胶囊样式标签页
赵乘风_i
04-13 3418
现在的项目是基于antd了，但又要和之前的UI保持一致，设计师希望还用之前的tabs 标签页的样式，所以就需要在antd Tabs的基础上进行一些样式的修改。如下： 在 antd Tabs type='card'的基础上进行样式修改 <div className='c-tab-capsule'> <Tab type='card'> {children} </Tab> </div> .c-tab-capsule { .ant-tabs-
antd5 Tabs 标签头的文本颜色和背景颜色修改
【爱打盹的喵】的专栏
01-12 1450
在项目中使用Tabs标签页，由于设计和antd原始样式的差异，需要对标签头部的背景颜色和字体做修改。
react tabs切换
weixin_50639421的博客
07-16 901
react tabs切换 组件 代码如下（示例）： import { Avatar } from 'antd'; import React, { useState } from 'react'; interface ListProps { data: any[]; } const ContactsList: React.FC<ListProps> = (props) => { const { data } = props; const [checked, setcheck
记录：利用css改变el-tabs自定义样式，背景色、激活选中样式、tab底部蓝条横线样式等
iseyre的博客
11-24 4092
利用css改变el-tabs样式，背景色、激活样式等 ，代码如下可直接复制。这样就行了如果有其他需求可根据代码自行修改。
php 实现tab切换_纯CSS实现Tab页切换效果
weixin_36486277的博客
03-09 340
这次给大家带来纯CSS实现Tab页切换效果，纯CSS实现Tab页切换效果的注意事项有哪些，下面就是实战案例，一起来看一下。最近切一个页面的时候涉及到了一个tab切换的部分，因为不想用js想着能不能用纯CSS的选择器来实现切换效果。搜了一下大致有下面三种写法。1、利用 :hover 选择器缺点：只有鼠标在元素上面的时候才有效果，无法实现选中和默认显示某一个的效果2、利用 a标签的锚点 + :targ...
记录一次使用ant design 中 ConfigProvider来修改样式导致样式改变的问题（Tabs嵌套Tabs）
【爱打盹的喵】的专栏
02-01 698
如代码所示，外层Tabs中又包含了一个内层的Tab，因此内层的Tabs样式也会被 ConfigProvider 所影响，导致内层Tab样式跟外层Tab样式一样。要想只改变外部Tabs样式，而内部样式不变的方法，我只知道，通过ConfigProvider还原内部Tabs样式。在修改外层tabs样式时，使用到了antd5中的ConfigProvider，通过token进行样式修改。
antdv tabs标题栏tabbar顶部吸附固定
qq_44367273的博客
12-24 4274
antdv tabs标签页组件tabBar顶部吸附，方便在抽屉里使用tabs组件时且tab内容过长时切页
写一个例子 antd中 tab点击让 tab里面自定义img图片变颜色
04-21
好的，以下是一个简单的例子： 1. 首先需要安装 antd 和 react-img-ix 库。 ```bash npm install antd react-img-ix --save ``` 2. 在组件中导入 antd 和 react-img-ix 库，并定义一个图片数组和一个状态变量。 ```jsx import React, { useState } from 'react'; import { Tabs } from 'antd'; import ImgIX from 'react-img-ix'; const { TabPane } = Tabs; const images = [ { id: 1, src: 'https://example.com/image1.jpg', color: '#FF0000' }, { id: 2, src: 'https://example.com/image2.jpg', color: '#00FF00' }, { id: 3, src: 'https://example.com/image3.jpg', color: '#0000FF' } ]; const Example = () => { const [activeKey, setActiveKey] = useState('1'); const handleChange = key => { setActiveKey(key); }; return ( <Tabs activeKey={activeKey} onChange={handleChange}> {images.map(image => ( <TabPane key={image.id} tab={ <ImgIX src={image.src} imgixParams={{ w: 50, h: 50 }} style={{ backgroundColor: activeKey === image.id.toString() ? image.color : 'transparent' }} /> } /> ))} </Tabs> ); }; export default Example; ``` 3. 在渲染 tab 时，使用 react-img-ix 库的组件代替默认的 tab 名称，并为该组件设置样式来改变图片颜色。在样式中，判断当前选中的 tab 是否等于该图片的 id，如果是，则设置为该图片的颜色；否则设置为透明。 这样，当用户点击 tab 时，对应的图片将改变颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值