当前位置: 首页 > news >正文

van-tabs 自定义

1. 标签样式修改

css

:deep(.van-tab--card) {color: #000;border-radius: 192rpx;border: none;margin-right: 20rpx;
}

  • :deep(.van-tab--card):选中 Vant 中卡片风格的标签页
  • color: #000:设置标签文字颜色为黑色
  • border-radius: 192rpx:设置标签圆角半径,使标签呈现胶囊形状
  • border: none:移除标签的边框
  • margin-right: 20rpx:为每个标签右侧添加间距

2. 激活状态样式

css

:deep(.van-tab--active) {background-color: rgba(242, 87, 0, 1) !important;
}

  • :deep(.van-tab--active):选中当前激活的标签页
  • background-color: rgba(242, 87, 0, 1):设置激活标签的背景色为橙色
  • !important:强制覆盖组件默认样式

3. 标签导航栏样式

css

:deep(.van-tabs__nav--card) {border: none;
}

  • :deep(.van-tabs__nav--card):选中卡片风格的标签导航容器
  • border: none:移除导航容器的边框

4. 标签包裹容器样式

css

:deep(.van-tabs__wrap) {height: 100rpx;display: flex;align-items: center;border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);border-top: 1rpx solid rgba(0, 0, 0, 0.08);margin-bottom: 36rpx;
}

  • :deep(.van-tabs__wrap):选中整个标签页的包裹容器
  • height: 100rpx:设置容器高度
  • display: flex 和 align-items: center:使用 Flex 布局并垂直居中内容
  • border-bottom 和 border-top:添加顶部和底部细边框
  • margin-bottom: 36rpx:为标签容器下方添加间距
http://www.dtcms.com/a/272548.html

相关文章:

  • 08-自然壁纸实战教程-视频列表-云
  • softmax公式推导
  • 深度学习中的批处理vs小批量训练
  • 大数据时代UI前端的智能化升级:基于机器学习的用户意图预测
  • MyBatis-Plus的LambdaQuery用法
  • 【音视频】HTTP协议介绍
  • 钉钉拿飞书当靶
  • 测试开发和后端开发到底怎么选?
  • 打破技术债困境:从“保持现状”到成为变革的推动者
  • VILA-M3: Enhancing Vision-Language Models with Medical Expert Knowledge
  • AI大模型平台
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_keepalive_time
  • 在虚拟机中安装Linux系统
  • EasyCVR视频汇聚平台国标接入设备TCP主动播放失败排查指南
  • 操作系统-IO多路复用
  • 深度学习核心:从基础到前沿的全面解析
  • 约束-1-约束
  • 【论文笔记】A Deep Reinforcement Learning Based Real-Time Solution Policy for the TSP
  • leetcode 226 翻转二叉树
  • openEuler 24.03 (LTS-SP1) 下安装 K8s 集群 + KubeSphere 遇到 etcd 报错的解决方案
  • Qt:按像素切割图片
  • 制胶学习分享
  • FFmpeg在Go、Python、C++、Rust实践案例
  • vue3 el-table 列汉字 排序时排除 null 或空字符串的值
  • rust cargo 编译双架构的库
  • 构建InfluxDB 3 Python插件深入实践指南
  • DDL期间TDSQL异常会话查询造成数据库主备切换
  • linux环境下安装和配置MySQL数据库
  • 关于市场主流自动化测试工具和框架的简要介绍
  • MySQL主键深度解析:数据库设计的核心基石