taro-react-uilib 1.4.32 → 1.4.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Collapse/index.js.map +1 -1
- package/dist/components/Tabbar/tabbar/Tabbar.js +1 -1
- package/dist/components/Tabbar/tabbar/Tabbar.js.map +1 -1
- package/dist/index.esm.js +6 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +4 -4
- package/dist/index.umd.js.map +1 -1
- package/dist/styles/components/tabbar.scss +29 -6
- package/package.json +1 -1
- package/types/components/Tabbar/tabbar/Tabbar.d.ts +2 -0
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
@import "../../styles/themes/variable.scss";
|
|
2
2
|
|
|
3
|
-
|
|
4
3
|
#{$xh-prefix}-tabbar {
|
|
5
4
|
display: flex;
|
|
6
5
|
flex-direction: column;
|
|
7
6
|
overflow: hidden;
|
|
8
7
|
height: 100%;
|
|
8
|
+
&-nav-scroll {
|
|
9
|
+
// width: 100%;
|
|
10
|
+
overflow-x: scroll; /* 横向滚动 */
|
|
11
|
+
overflow-y: hidden; /* 隐藏纵向滚动 */
|
|
12
|
+
height: 87px;
|
|
13
|
+
box-sizing: border-box;
|
|
14
|
+
webkit-overflow-scrolling: touch; /* 在iOS设备上启用惯性滚动 */
|
|
15
|
+
-ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
|
|
16
|
+
scrollbar-width: none; /* Firefox 隐藏滚动条 */
|
|
17
|
+
&::-webkit-scrollbar {
|
|
18
|
+
display: none; /* 隐藏滚动条 */
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
9
22
|
&-nav {
|
|
23
|
+
min-width: 100%;
|
|
24
|
+
height: 100%;
|
|
10
25
|
display: flex;
|
|
26
|
+
white-space: nowrap; /* 防止内容换行 */
|
|
11
27
|
align-items: center;
|
|
12
|
-
justify-content: space-between;
|
|
13
|
-
padding-bottom: 20px;
|
|
14
28
|
font-size: 34px;
|
|
15
|
-
box-sizing: border-box;
|
|
16
29
|
position: relative;
|
|
30
|
+
box-sizing: border-box;
|
|
17
31
|
|
|
18
32
|
&-item {
|
|
19
|
-
|
|
33
|
+
box-sizing: border-box; /* 核心：padding包含在宽高内 */
|
|
20
34
|
text-align: center;
|
|
35
|
+
flex-shrink: 0; /* 防止项目缩小 */
|
|
36
|
+
white-space: nowrap;
|
|
21
37
|
}
|
|
22
38
|
&-line {
|
|
23
39
|
width: 60px;
|
|
@@ -25,13 +41,15 @@
|
|
|
25
41
|
border-radius: 100px;
|
|
26
42
|
position: absolute;
|
|
27
43
|
bottom: 0;
|
|
28
|
-
transition: transform 0.3s;
|
|
44
|
+
transition: transform 0.3s ease, width 0.3s ease;
|
|
45
|
+
transform-origin: center center;
|
|
29
46
|
&-active {
|
|
30
47
|
transition: all 0.3s;
|
|
31
48
|
}
|
|
32
49
|
}
|
|
33
50
|
}
|
|
34
51
|
&-content {
|
|
52
|
+
flex: 1;
|
|
35
53
|
overflow-y: scroll;
|
|
36
54
|
&-item {
|
|
37
55
|
overflow: hidden;
|
|
@@ -46,4 +64,9 @@
|
|
|
46
64
|
transition-duration: 0.5s;
|
|
47
65
|
}
|
|
48
66
|
}
|
|
67
|
+
|
|
68
|
+
.more-item {
|
|
69
|
+
padding: 0 20px;
|
|
70
|
+
box-sizing: border-box; /* 强制继承，防止被覆盖 */
|
|
71
|
+
}
|
|
49
72
|
}
|
package/package.json
CHANGED
|
@@ -11,6 +11,7 @@ import Item from "./TabItem";
|
|
|
11
11
|
* @param titleInctiveColor //标题默认态颜色
|
|
12
12
|
* @param onChange //切换回调事件
|
|
13
13
|
* @param content //item公共节点
|
|
14
|
+
* @param isOverflowNav //是否超宽导航（超过屏幕宽度，自动滚动）
|
|
14
15
|
*
|
|
15
16
|
*/
|
|
16
17
|
export interface TabProps {
|
|
@@ -22,6 +23,7 @@ export interface TabProps {
|
|
|
22
23
|
onChange?: (index: number) => void;
|
|
23
24
|
content?: string | ReactNode;
|
|
24
25
|
selectIndex: number;
|
|
26
|
+
isOverflowNav?: boolean;
|
|
25
27
|
}
|
|
26
28
|
export interface TabsComponent<P = {}> extends FC<P> {
|
|
27
29
|
Item: typeof Item;
|