475 lines
8.7 KiB
SCSS
475 lines
8.7 KiB
SCSS
.y-tabs {
|
||
position: relative;
|
||
display: block;
|
||
width: 100%;
|
||
|
||
// 标签栏垂直方位下的根容器样式
|
||
&.is-vertical {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
flex: 1;
|
||
|
||
// 垂直时标签栏scroll-view的子项垂直排列
|
||
.y-tabs__scroll {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
&.is-cancel-tonch{
|
||
touch-action: none;
|
||
}
|
||
|
||
// 区域滚动下的滚动导航
|
||
&.is-areaScroll.is-scrollNav {
|
||
display: flex;
|
||
height: 100vh;
|
||
flex-direction: column;
|
||
|
||
// 标签栏不收缩
|
||
.y-tabs__wrap {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.y-tabs__track,
|
||
.y-tabs__content-scrollview {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
// 区域滚动下的侧边栏导航
|
||
&.is-areaScroll.is-sidebarNav {
|
||
display: flex;
|
||
height: 100vh;
|
||
flex-direction: row;
|
||
|
||
.y-tabs__scroll {
|
||
height: 100%;
|
||
}
|
||
|
||
// 标签栏不收缩
|
||
.y-tabs__wrap {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.y-tabs__track,
|
||
.y-tabs__content-scrollview {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 依赖元素
|
||
.y-tabs__depend {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 1px; //必须保证有高度，否则observer无效
|
||
width: 100%;
|
||
}
|
||
|
||
// 透明标签栏所需的依赖元素
|
||
.y-tabs__depend--transparent {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 1px; //必须保证有高度，否则observer无效
|
||
width: 1px;
|
||
}
|
||
|
||
// 模拟标签栏吸顶时设置offset时距屏幕顶部的元素
|
||
.y-tabs__depend--offset {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: -1;
|
||
height: 1px;
|
||
}
|
||
|
||
// 标签栏占位元素
|
||
.y-tabs__placeholder {
|
||
position: relative;
|
||
}
|
||
|
||
// 标签垂直展示且吸顶时，标签栏占位元素不伸缩
|
||
.y-tabs.is-fixed.is-vertical .y-tabs__placeholder {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
// 文字省略
|
||
.y-tabs__ellipsis {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// 导航区域包裹层
|
||
.y-tabs__wrap {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
visibility: visible;
|
||
background: #fff;
|
||
// touch-action: none;
|
||
height: 40px;
|
||
|
||
// 标签栏垂直展示时包裹层样式
|
||
&.is-vertical {
|
||
width: 100px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-shrink: 0;
|
||
height: 100%;
|
||
}
|
||
|
||
// 粘性定位布局下的导航区域包裹层
|
||
&.is-fixed {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
// 标签垂直展示且吸顶时，给定bottom，否则scroll-view不会滚动
|
||
&.is-fixed.is-vertical {
|
||
bottom: 0;
|
||
}
|
||
|
||
// 透明的导航区域包裹层
|
||
&.is-transparent {
|
||
background: rgba(255, 255, 255, 0);
|
||
}
|
||
|
||
// 标签栏水平时按钮风格的包裹层
|
||
&.is-button:not(.is-vertical),
|
||
&.is-line-button:not(.is-vertical) {
|
||
padding: 0 8px;
|
||
}
|
||
}
|
||
|
||
// scroll-view组件样式
|
||
.y-tabs__scroll {
|
||
position: relative;
|
||
width: 100%;
|
||
white-space: nowrap; // 使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式
|
||
flex-direction: row;
|
||
}
|
||
|
||
// 条件编译不放在样式中，vue3无效
|
||
|
||
// H5、APP端去滚动条
|
||
// 小程序端会报：Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors.
|
||
/* #ifdef H5 || APP */
|
||
.y-tabs__scroll ::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
-webkit-appearance: none;
|
||
background: transparent;
|
||
color: transparent;
|
||
}
|
||
/* #endif */
|
||
|
||
// IOS 13 以下的系统，当滚动区域设置了-webkit-overflow-scrolling: touch;时（必须设置，否者几乎无法滚动），::-webkit-scrollbar 相关属性会失效，iOS 13 已经修复了此Bug。
|
||
// 小程序端: 去除 scroll-view 组件的滚动条
|
||
/* #ifndef H5 || APP */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
-webkit-appearance: none;
|
||
background: transparent;
|
||
color: transparent;
|
||
}
|
||
/* #endif */
|
||
|
||
// 导航区域
|
||
.y-tabs__nav {
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
user-select: none;
|
||
flex: 1;
|
||
display: flex;
|
||
|
||
&.is-shrink{
|
||
display: inline-flex;
|
||
}
|
||
|
||
// 卡片风格
|
||
&.is-card {
|
||
margin: 6px 16px;
|
||
border-radius: 4px;
|
||
box-sizing: border-box;
|
||
border: 1px solid #0022ab;
|
||
}
|
||
|
||
// 标签栏垂直时导航区域样式
|
||
&.is-vertical {
|
||
flex-direction: column;
|
||
height: auto;
|
||
|
||
.y-tab {
|
||
flex: unset;
|
||
}
|
||
}
|
||
|
||
// 标签左侧、右侧的补充区域
|
||
&-left,
|
||
&-right {
|
||
position: relative;
|
||
display: inline-flex;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
// 导航标签
|
||
.y-tab {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
height: 40px;
|
||
font-size: 28rpx;
|
||
color: #646566;
|
||
text-align: center;
|
||
padding: 0 4px;
|
||
flex: 1;
|
||
cursor: pointer;
|
||
// webkit的css扩展：1、-webkit-tap-highlight-color:这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。有事件监听的元素被点击的时候会被高亮显示，比如我的android上表现为一个蓝框加上半透明的背景
|
||
-webkit-tap-highlight-color: transparent;
|
||
// transition-duration: 0.2s;
|
||
// transition-property: background;
|
||
flex-shrink: 0;
|
||
z-index: 2;
|
||
|
||
// 选中状态
|
||
&.is-active {
|
||
color: #323233;
|
||
font-weight: 500;
|
||
}
|
||
|
||
// 禁用状态
|
||
&.is-disabled {
|
||
color: #c8c9cc !important;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
// 收缩布局
|
||
&.is-shrink {
|
||
flex: none;
|
||
padding: 0 8px;
|
||
}
|
||
|
||
//卡片风格
|
||
&.is-card {
|
||
height: 28px;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
|
||
// 标题区域
|
||
.y-tab__title {
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
height: inherit;
|
||
}
|
||
|
||
// 标题区域垂直排列
|
||
.y-tab__title--top,
|
||
.y-tab__title--bottom {
|
||
flex-direction: column;
|
||
}
|
||
|
||
// 标题文字
|
||
.y-tab__text {
|
||
position: relative;
|
||
display: block;
|
||
line-height: 1.2;
|
||
order: 2;
|
||
white-space: nowrap; //字节会设置white-space:normal
|
||
}
|
||
|
||
// 标签垂直展示时，未达到文字超出隐藏的条件时
|
||
.y-tabs__nav.is-vertical .y-tab__text:not(.y-tabs__ellipsis) {
|
||
white-space: normal;
|
||
}
|
||
|
||
// 使用order排序
|
||
.y-tab__text--left,
|
||
.y-tab__text--top {
|
||
order: 0;
|
||
}
|
||
|
||
// 标题图标/图片包裹层
|
||
.y-tab__icons {
|
||
display: flex;
|
||
align-items: center;
|
||
order: 1;
|
||
z-index: 1;
|
||
}
|
||
|
||
//标题图片
|
||
.y-tab__image {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
// 右上角信息区域
|
||
.y-tab__info {
|
||
display: inline-flex;
|
||
position: relative;
|
||
|
||
&--dot,
|
||
&--badge {
|
||
display: inline-block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
background-color: #e53935;
|
||
transform-origin: 100%;
|
||
}
|
||
|
||
// 小红点
|
||
&--dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 100%;
|
||
transform: translate(0%, -180%);
|
||
}
|
||
|
||
// 徽标
|
||
&--badge {
|
||
line-height: 13px;
|
||
min-width: 18px;
|
||
border-radius: 18px;
|
||
padding: 0 2px;
|
||
transform: translate(0%, -120%);
|
||
font-size: 18rpx;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
// 底部条滑块
|
||
.y-tabs__bar {
|
||
position: absolute;
|
||
display: inline-flex;
|
||
left: 0;
|
||
z-index: 1;
|
||
width: 20px;
|
||
height: 3px;
|
||
border-radius: 3px;
|
||
background-color: #0022ab;
|
||
box-sizing: border-box;
|
||
|
||
// line风格的滑块
|
||
&.is-line {
|
||
z-index: 2; //z-index与y-tab一样,避免被遮挡
|
||
|
||
// 标签水平展示时
|
||
&:not(.is-vertical) {
|
||
bottom: 3px;
|
||
width: 20px;
|
||
height: 3px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
// 标签垂直展示时
|
||
&.is-vertical {
|
||
top: 0;
|
||
left: 3px;
|
||
width: 3px;
|
||
height: 20px;
|
||
border-radius: 3px;
|
||
}
|
||
}
|
||
|
||
// button、line-button风格的滑块
|
||
&.is-button,
|
||
&.is-line-button {
|
||
// top: 0;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 26px;
|
||
|
||
// 标签水平展示时
|
||
&:not(.is-vertical) {
|
||
height: calc(100% - 8px);
|
||
bottom: 4px;
|
||
}
|
||
|
||
// 标签垂直展示时
|
||
&.is-vertical {
|
||
left: 3px;
|
||
width: calc(100% - 8px);
|
||
height: calc(100% - 8px);
|
||
}
|
||
}
|
||
|
||
// 线性按钮风格的滑块
|
||
&.is-line-button {
|
||
background-color: transparent;
|
||
border: 2rpx solid transparent;
|
||
}
|
||
}
|
||
|
||
// 标签内容
|
||
.y-tabs__content {
|
||
display: block;
|
||
position: relative;
|
||
overflow: hidden; //会导致uni-data-select无法撑开显示下拉选项,最好给pane中的内容设置一个高度(如果包裹select的父元素都没有设置relative，则不会裁剪absolute属性的元素)
|
||
// 标签栏垂直展示，内容减去标签栏默认宽度
|
||
&.is-vertical {
|
||
width: 100%;
|
||
}
|
||
}
|
||
// 标签内容的滑动轨道容器
|
||
.y-tabs__track {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
// will-change: left;
|
||
will-change: transform;
|
||
|
||
// 滚动导航模式下内容卡片垂直排列
|
||
&.is-scrollspy {
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
|
||
// 标签内容卡片
|
||
.y-tab__pane {
|
||
flex-shrink: 0;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 0;
|
||
position: relative;
|
||
flex-direction: row;
|
||
display: block;
|
||
visibility: visible;
|
||
transform: translate(0px, 0px) translateZ(0px);
|
||
|
||
// 选中时
|
||
&.is-active {
|
||
height: auto;
|
||
}
|
||
// 滚动导航
|
||
&.is-scrollspy {
|
||
height: auto;
|
||
}
|
||
}
|
||
.y-tab__pane--wrap {
|
||
position: relative;
|
||
}
|
||
// 区域滚动下的标签内容scroll-view
|
||
.y-tabs__content-scrollview {
|
||
flex-direction: column;
|
||
}
|