diff --git a/src/hooks/useElementHeight.ts b/src/hooks/useElementHeight.ts new file mode 100644 index 000000000..e8e161a75 --- /dev/null +++ b/src/hooks/useElementHeight.ts @@ -0,0 +1,69 @@ +import { useRef, useState, useEffect, useCallback } from 'react'; + +export interface UseElementHeightOptions { + /** 是否立即计算高度 */ + immediate?: boolean; + /** 监听窗口大小变化 */ + resizeObserver?: boolean; +} + +/** + * 用于计算元素高度的 hook + * @param targetRef 目标元素的 ref + * @param options 配置选项 + * @returns 返回高度和重新计算的方法 + */ +export default function useElementHeight( + targetRef: React.RefObject, + options: UseElementHeightOptions = {}, +) { + const { immediate = true, resizeObserver = false } = options; + const [elementHeight, setElementHeight] = useState(0); + const resizeObserverInstance = useRef(null); + + const calculateHeight = useCallback(() => { + const currentElement = targetRef.current; + if (currentElement) { + // 使用 getBoundingClientRect 获取精确高度 + const { height } = currentElement.getBoundingClientRect(); + setElementHeight(height); + } + }, [targetRef]); + + const setupResizeObserver = useCallback(() => { + if (!resizeObserver) return; + + const currentElement = targetRef.current; + if (currentElement && window.ResizeObserver) { + resizeObserverInstance.current = new ResizeObserver(() => { + calculateHeight(); + }); + resizeObserverInstance.current.observe(currentElement); + } + }, [resizeObserver, calculateHeight, targetRef]); + + const cleanupResizeObserver = useCallback(() => { + if (resizeObserverInstance.current) { + resizeObserverInstance.current.disconnect(); + resizeObserverInstance.current = null; + } + }, []); + + useEffect(() => { + if (immediate) { + // 使用 setTimeout 确保在 DOM 更新后计算高度 + const timeoutId = setTimeout(calculateHeight, 0); + return () => clearTimeout(timeoutId); + } + }, [immediate, calculateHeight]); + + useEffect(() => { + setupResizeObserver(); + return cleanupResizeObserver; + }, [setupResizeObserver, cleanupResizeObserver]); + + return { + height: elementHeight, + calculateHeight, + }; +} diff --git a/src/navbar/Navbar.tsx b/src/navbar/Navbar.tsx index 443124f7d..35163b2d5 100644 --- a/src/navbar/Navbar.tsx +++ b/src/navbar/Navbar.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useMemo } from 'react'; +import React, { useMemo } from 'react'; import type { CSSProperties } from 'react'; import { ChevronLeftIcon } from 'tdesign-icons-react'; -import ClassNames from 'classnames'; +import classNames from 'classnames'; import { usePrefixClass } from '../hooks/useClass'; import { StyledProps } from '../common'; import { TdNavbarProps } from './type'; @@ -26,23 +26,26 @@ const Navbar: React.FC = (originProps) => { right, fixed, animation, + placeholder, + zIndex, className, + safeAreaInsetTop, style, onLeftClick, onRightClick, } = props; - const prefix = usePrefixClass('navbar'); + const prefixClass = usePrefixClass(); + const navbarClass = usePrefixClass('navbar'); const animationSuffix = useMemo(() => (animation ? '-animation' : ''), [animation]); - const cls = useCallback((name?: string) => (name ? `${prefix}__${name}` : prefix), [prefix]); - // 左侧胶囊区域 - const leftCapsuleContent = useMemo(() => { - if (!capsule) { + const renderCapsule = () => { + const capsuleContent = parseTNode(capsule); + if (!capsuleContent) { return null; } - return
{capsule}
; - }, [capsule, cls]); + return
{capsuleContent}
; + }; const titleChildren = useMemo(() => { let titleNode = children || title; @@ -56,49 +59,70 @@ const Navbar: React.FC = (originProps) => { } } - return isStringTitle ? {parseTNode(titleNode)} : parseTNode(titleNode); - }, [children, cls, title, titleMaxLength]); + return isStringTitle ? ( + {parseTNode(titleNode)} + ) : ( + parseTNode(titleNode) + ); + }, [children, navbarClass, title, titleMaxLength]); // 右侧icon - const rightContent = useMemo( - () => - right ? ( -
- {parseTNode(right)} -
- ) : null, - [cls, right, onRightClick], - ); + const renderRight = () => + right ? ( +
+ {parseTNode(right)} +
+ ) : null; const navClass = useMemo( () => - ClassNames( - prefix, - { [`${prefix}--fixed`]: fixed }, - visible ? `${prefix}--visible${animationSuffix}` : `${prefix}--hide${animationSuffix}`, + classNames( + navbarClass, + { [`${navbarClass}--fixed`]: fixed, [`${prefixClass}-safe-area-top`]: safeAreaInsetTop }, + visible ? `${navbarClass}--visible${animationSuffix}` : `${navbarClass}--hide${animationSuffix}`, ), - [prefix, fixed, visible, animationSuffix], + [navbarClass, prefixClass, fixed, visible, animationSuffix, safeAreaInsetTop], ); const navStyle = useMemo( () => ({ - position: fixed ? 'fixed' : 'relative', + zIndex, ...style, }), - [fixed, style], + [zIndex, style], + ); + + const renderLeftArrow = () => { + if (leftArrow) { + return ; + } + return null; + }; + + const renderLeft = () => ( +
+ {renderLeftArrow()} + {parseTNode(left)} + {renderCapsule()} +
); + const renderCenter = () =>
{titleChildren}
; + + const renderPlaceholder = () => { + if (fixed && placeholder) { + return
; + } + return null; + }; + return ( -
- {fixed &&
} -
-
- {leftArrow && } - {parseTNode(left)} - {leftCapsuleContent} -
-
{titleChildren}
- {rightContent} +
+ {renderPlaceholder()} +
+ {renderLeft()} + {renderCenter()} + {renderRight()}
); diff --git a/src/navbar/_example/index.tsx b/src/navbar/_example/index.tsx index 0558f7f91..466a791f3 100644 --- a/src/navbar/_example/index.tsx +++ b/src/navbar/_example/index.tsx @@ -13,7 +13,7 @@ import './style/index.less'; export default function Base() { return (
- + diff --git a/src/navbar/defaultProps.ts b/src/navbar/defaultProps.ts index e14447b38..dc829c372 100644 --- a/src/navbar/defaultProps.ts +++ b/src/navbar/defaultProps.ts @@ -4,4 +4,12 @@ import { TdNavbarProps } from './type'; -export const navbarDefaultProps: TdNavbarProps = { animation: true, fixed: true, leftArrow: false, visible: true }; +export const navbarDefaultProps: TdNavbarProps = { + animation: true, + fixed: true, + leftArrow: false, + placeholder: false, + safeAreaInsetTop: true, + visible: true, + zIndex: 1, +}; diff --git a/src/navbar/navbar.en-US.md b/src/navbar/navbar.en-US.md index 49a0a7251..4ec2cd099 100644 --- a/src/navbar/navbar.en-US.md +++ b/src/navbar/navbar.en-US.md @@ -2,25 +2,27 @@ ## API - ### Navbar Props name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N animation | Boolean | true | \- | N background | String | - | `deprecated`。background | N -capsule | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +capsule | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | \- | N -left | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +left | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N leftArrow | Boolean | false | \- | N -right | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -title | TNode | - | page title。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +placeholder | Boolean | false | `0.21.1` | N +right | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +safeAreaInsetTop | Boolean | true | \- | N +title | TNode | - | page title。Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N titleMaxLength | Number | - | \- | N visible | Boolean | true | \- | N -onLeftClick | Function | | Typescript：`() => void`
| N -onRightClick | Function | | Typescript：`() => void`
| N +zIndex | Number | 1 | \- | N +onLeftClick | Function | | Typescript: `() => void`
| N +onRightClick | Function | | Typescript: `() => void`
| N ### CSS Variables diff --git a/src/navbar/navbar.md b/src/navbar/navbar.md index b88ab2063..ad2f9cd22 100644 --- a/src/navbar/navbar.md +++ b/src/navbar/navbar.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Navbar Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -13,10 +14,13 @@ capsule | TElement | - | 左侧胶囊区域。TS 类型：`TNode`。[通用类 fixed | Boolean | true | 是否固定在顶部 | N left | TNode | - | 左侧区域。值为 `string` 表示文本，为其他表示自定义内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N leftArrow | Boolean | false | 是否展示左侧箭头 | N +placeholder | Boolean | false | `0.21.1`。固定在顶部时是否开启占位 | N right | TNode | - | 右侧区域。值为 `string` 表示文本，为其他表示自定义内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +safeAreaInsetTop | Boolean | true | 是否开启顶部安全区适配 | N title | TNode | - | 页面标题。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N titleMaxLength | Number | - | 标题文字最大长度，超出的范围使用 `...` 表示 | N visible | Boolean | true | 是否显示 | N +zIndex | Number | 1 | 导航条层级 | N onLeftClick | Function | | TS 类型：`() => void`
点击左侧区域时触发 | N onRightClick | Function | | TS 类型：`() => void`
点击右侧区域时触发 | N diff --git a/src/navbar/type.ts b/src/navbar/type.ts index 57fe87e8f..4dbf32384 100644 --- a/src/navbar/type.ts +++ b/src/navbar/type.ts @@ -30,10 +30,20 @@ export interface TdNavbarProps { * @default false */ leftArrow?: boolean; + /** + * 固定在顶部时是否开启占位 + * @default false + */ + placeholder?: boolean; /** * 右侧区域。值为 `string` 表示文本，为其他表示自定义内容 */ right?: TNode; + /** + * 是否开启顶部安全区适配 + * @default true + */ + safeAreaInsetTop?: boolean; /** * 页面标题 */ @@ -47,6 +57,11 @@ export interface TdNavbarProps { * @default true */ visible?: boolean; + /** + * 导航条层级 + * @default 1 + */ + zIndex?: number; /** * 点击左侧区域时触发 */ diff --git a/src/style/index.js b/src/style/index.js index 00e668a88..b0803c9bc 100644 --- a/src/style/index.js +++ b/src/style/index.js @@ -1 +1,3 @@ +import '../_common/style/mobile/_global.less'; + import '../_common/style/mobile/theme/_index.less'; diff --git a/src/tab-bar/TabBar.tsx b/src/tab-bar/TabBar.tsx index bbd00c373..39c621c5e 100644 --- a/src/tab-bar/TabBar.tsx +++ b/src/tab-bar/TabBar.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, memo, useMemo, useRef } from 'react'; +import React, { forwardRef, memo, useMemo, useRef, useCallback } from 'react'; import classNames from 'classnames'; import useDefault from '../_util/useDefault'; import type { StyledProps } from '../common'; @@ -8,6 +8,7 @@ import parseTNode from '../_util/parseTNode'; import useDefaultProps from '../hooks/useDefaultProps'; import { usePrefixClass } from '../hooks/useClass'; import { tabBarDefaultProps } from './defaultProps'; +import useElementHeight from '../hooks/useElementHeight'; export interface TabBarProps extends TdTabBarProps, StyledProps {} @@ -25,6 +26,8 @@ const TabBar = forwardRef((originProps, ref) => { shape, split, theme, + zIndex, + placeholder, children, } = props; @@ -39,6 +42,35 @@ const TabBar = forwardRef((originProps, ref) => { }, `${tabBarClass}--${props.shape}`, ); + + const styles = useMemo( + () => ({ + zIndex, + ...style, + }), + [style, zIndex], + ); + + const internalRef = useRef(null); + const { height: tabBarHeight } = useElementHeight(internalRef, { + immediate: fixed && placeholder, + }); + + // 创建合并的 ref callback，保持用户 ref 指向 role="tablist" 元素 + const mergedRef = useCallback( + (element: HTMLDivElement | null) => { + internalRef.current = element; + + const userRef = ref; + if (typeof userRef === 'function') { + userRef(element); + } else if (userRef && 'current' in userRef) { + userRef.current = element; + } + }, + [ref], + ); + const [activeValue, onToggleActiveValue] = useDefault(value, defaultValue, onChange); const defaultIndex = useRef(-1); @@ -60,11 +92,21 @@ const TabBar = forwardRef((originProps, ref) => { [defaultIndex, activeValue, updateChild, shape, split, theme, itemCount], ); - return ( -
+ const tabBarElement = ( +
{parseTNode(children)}
); + + if (fixed && placeholder) { + return ( +
+ {tabBarElement} +
+ ); + } + + return tabBarElement; }); export default memo(TabBar); diff --git a/src/tab-bar/_example/badge-props.tsx b/src/tab-bar/_example/badge-props.tsx index 013de2d48..5f6423ac8 100644 --- a/src/tab-bar/_example/badge-props.tsx +++ b/src/tab-bar/_example/badge-props.tsx @@ -22,7 +22,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( {item.text} diff --git a/src/tab-bar/_example/base.tsx b/src/tab-bar/_example/base.tsx index 13ec110db..2734b152d 100644 --- a/src/tab-bar/_example/base.tsx +++ b/src/tab-bar/_example/base.tsx @@ -22,7 +22,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( {item.label} diff --git a/src/tab-bar/_example/custom.tsx b/src/tab-bar/_example/custom.tsx index 2a9264971..17f4aae3f 100644 --- a/src/tab-bar/_example/custom.tsx +++ b/src/tab-bar/_example/custom.tsx @@ -22,7 +22,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( ))} diff --git a/src/tab-bar/_example/pure-icon.tsx b/src/tab-bar/_example/pure-icon.tsx index 7565c9039..583bac382 100644 --- a/src/tab-bar/_example/pure-icon.tsx +++ b/src/tab-bar/_example/pure-icon.tsx @@ -22,7 +22,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( ))} diff --git a/src/tab-bar/_example/round.tsx b/src/tab-bar/_example/round.tsx index e534f2964..6dff49665 100644 --- a/src/tab-bar/_example/round.tsx +++ b/src/tab-bar/_example/round.tsx @@ -22,7 +22,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( ))} diff --git a/src/tab-bar/_example/style/index.less b/src/tab-bar/_example/style/index.less index ba42c4e3e..f37975724 100644 --- a/src/tab-bar/_example/style/index.less +++ b/src/tab-bar/_example/style/index.less @@ -1,7 +1,4 @@ .tdesign-mobile-demo { - .t-tab-bar { - position: relative; - } .t-tab-bar + .t-tab-bar { margin-top: 16px; } diff --git a/src/tab-bar/_example/text-spread.tsx b/src/tab-bar/_example/text-spread.tsx index 75698218d..a5af1650a 100644 --- a/src/tab-bar/_example/text-spread.tsx +++ b/src/tab-bar/_example/text-spread.tsx @@ -35,7 +35,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( {item.label} diff --git a/src/tab-bar/_example/text.tsx b/src/tab-bar/_example/text.tsx index 0cc38e739..e04140565 100644 --- a/src/tab-bar/_example/text.tsx +++ b/src/tab-bar/_example/text.tsx @@ -21,7 +21,7 @@ function TabBarBaseDemo() { return (
- + {list.map((item, i) => ( {item.label} diff --git a/src/tab-bar/defaultProps.ts b/src/tab-bar/defaultProps.ts index af85cd594..80ab92f28 100644 --- a/src/tab-bar/defaultProps.ts +++ b/src/tab-bar/defaultProps.ts @@ -7,9 +7,10 @@ import { TdTabBarProps } from './type'; export const tabBarDefaultProps: TdTabBarProps = { bordered: true, fixed: true, + placeholder: false, safeAreaInsetBottom: true, shape: 'normal', split: true, theme: 'normal', - defaultValue: undefined, + zIndex: 1, }; diff --git a/src/tab-bar/tab-bar.en-US.md b/src/tab-bar/tab-bar.en-US.md index ff5e7e42e..1f871e2a5 100644 --- a/src/tab-bar/tab-bar.en-US.md +++ b/src/tab-bar/tab-bar.en-US.md @@ -7,17 +7,19 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N bordered | Boolean | true | \- | N -children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | \- | N +placeholder | Boolean | false | `0.21.1` | N safeAreaInsetBottom | Boolean | true | \- | N -shape | String | 'normal' | options: normal/round | N +shape | String | normal | options: normal/round | N split | Boolean | true | \- | N -theme | String | 'normal' | options: normal/tag | N -value | String / Number / Array | undefined | Typescript：`string \| number \| Array` | N -defaultValue | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array` | N -onChange | Function | | Typescript：`(value: string \| number) => void`
| N +theme | String | normal | options: normal/tag | N +value | String / Number / Array | - | Typescript: `string \| number \| Array` | N +defaultValue | String / Number / Array | - | uncontrolled property。Typescript: `string \| number \| Array` | N +zIndex | Number | 1 | \- | N +onChange | Function | | Typescript: `(value: string \| number) => void`
| N ### TabBarItem Props @@ -25,11 +27,11 @@ onChange | Function | | Typescript：`(value: string \| number) => void`
| name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N -badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -children | TNode | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -icon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -subTabBar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N +badgeProps | Object | - | Typescript: `BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +children | TNode | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | Typescript: `SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | \- | N ### CSS Variables diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index 7e53c2c63..ebdf401e5 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -11,12 +11,14 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N bordered | Boolean | true | 是否显示外边框 | N children | TNode | - | 标签栏内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N fixed | Boolean | true | 是否固定在底部 | N -safeAreaInsetBottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N -shape | String | 'normal' | 标签栏的形状。可选项：normal/round | N +placeholder | Boolean | false | `0.21.1`。固定在底部时是否开启占位 | N +safeAreaInsetBottom | Boolean | true | 是否开启底部安全区适配 | N +shape | String | normal | 标签栏的形状。可选项：normal/round | N split | Boolean | true | 是否需要分割线 | N -theme | String | 'normal' | 选项风格。可选项：normal/tag | N -value | String / Number / Array | undefined | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N -defaultValue | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N +theme | String | normal | 选项风格。可选项：normal/tag | N +value | String / Number / Array | - | 当前选中标签的索引。TS 类型：`string \| number \| Array` | N +defaultValue | String / Number / Array | - | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array` | N +zIndex | Number | 1 | 标签栏层级 | N onChange | Function | | TS 类型：`(value: string \| number) => void`
选中标签切换时触发 | N diff --git a/src/tab-bar/type.ts b/src/tab-bar/type.ts index 2dfbae2c0..8239dfae2 100644 --- a/src/tab-bar/type.ts +++ b/src/tab-bar/type.ts @@ -23,13 +23,18 @@ export interface TdTabBarProps { */ fixed?: boolean; /** - * 是否为 iPhoneX 留出底部安全距离 + * 固定在底部时是否开启占位 + * @default false + */ + placeholder?: boolean; + /** + * 是否开启底部安全区适配 * @default true */ safeAreaInsetBottom?: boolean; /** * 标签栏的形状 - * @default 'normal' + * @default normal */ shape?: 'normal' | 'round'; /** @@ -39,7 +44,7 @@ export interface TdTabBarProps { split?: boolean; /** * 选项风格 - * @default 'normal' + * @default normal */ theme?: 'normal' | 'tag'; /** @@ -50,6 +55,11 @@ export interface TdTabBarProps { * 当前选中标签的索引，非受控属性 */ defaultValue?: string | number | Array; + /** + * 标签栏层级 + * @default 1 + */ + zIndex?: number; /** * 选中标签切换时触发 */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 4e691d0c8..93fd9810c 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -76315,8 +76315,8 @@ exports[`csr snapshot test > csr test src/message/_example/theme.tsx 1`] = ` exports[`csr snapshot test > csr test src/navbar/_example/base.tsx 1`] = `
csr test src/navbar/_example/base.tsx 1`] = `
csr test src/navbar/_example/base.tsx 1`] = `
csr test src/navbar/_example/base.tsx 1`] = ` exports[`csr snapshot test > csr test src/navbar/_example/custom-color.tsx 1`] = `
csr test src/navbar/_example/custom-color.tsx 1`] = exports[`csr snapshot test > csr test src/navbar/_example/img.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = ` class="tdesign-mobile-demo" >
-
@@ -76846,8 +76843,8 @@ exports[`csr snapshot test > csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = `
csr test src/navbar/_example/index.tsx 1`] = ` class="t-navbar-demo" >
csr test src/navbar/_example/index.tsx 1`] = ` exports[`csr snapshot test > csr test src/navbar/_example/left-title.tsx 1`] = `
csr test src/navbar/_example/left-title.tsx 1`] = `
csr test src/navbar/_example/left-title.tsx 1`] = ` exports[`csr snapshot test > csr test src/navbar/_example/search.tsx 1`] = `
csr test src/navbar/_example/search.tsx 1`] = ` exports[`csr snapshot test > csr test src/navbar/_example/size.tsx 1`] = `
csr test src/navbar/_example/size.tsx 1`] = `
csr test src/tab-bar/_example/badge-props.tsx 1`] = class="demo-tab-bar" >
csr test src/tab-bar/_example/base.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/custom.tsx 1`] = ` class="demo-tab-bar section-custom" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/mobile.tsx 1`] = ` class="demo-tab-bar section-custom" >
csr test src/tab-bar/_example/pure-icon.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/round.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/text.tsx 1`] = ` class="demo-tab-bar" >
csr test src/tab-bar/_example/text-spread.tsx 1`] = class="demo-tab-bar" >
ssr test src/message/_example/index.tsx 1`] = `" ssr test src/message/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `"
标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `"
标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
返回
大尺寸标题
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
返回
大尺寸标题
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; @@ -133672,21 +133683,21 @@ exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `"
ssr test src/switch/_example/status.tsx 1`] = `"
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4006829e3..f0d6a6893 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -408,19 +408,19 @@ exports[`ssr snapshot test > ssr test src/message/_example/index.tsx 1`] = `" ssr test src/message/_example/theme.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `"
标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/custom-color.tsx 1`] = `"
标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/img.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/index.tsx 1`] = `"
Navbar 导航条

Navbar 导航栏

用于不同页面之间切换或者跳转，位于内容区的上方，系统状态栏的下方。

01 组件类型

基础导航栏

标题文字
标题文字
标题文字

带搜索导航栏

带图片导航栏

02 组件样式

标题对齐

标题居中
标题左对齐

标题尺寸

标题文字
返回
大尺寸标题

自定义颜色

标题文字
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/left-title.tsx 1`] = `"
标题居中
标题左对齐
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/search.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
返回
大尺寸标题
"`; +exports[`ssr snapshot test > ssr test src/navbar/_example/size.tsx 1`] = `"
标题文字
返回
大尺寸标题
"`; exports[`ssr snapshot test > ssr test src/notice-bar/_example/base.tsx 1`] = `"
这是一条普通的通知消息
"`; @@ -674,21 +674,21 @@ exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `"
ssr test src/switch/_example/status.tsx 1`] = `"
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换，位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/round.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/text-spread.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/table/_example/base.tsx 1`] = `"
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`;