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
:为标签容器下方添加间距