diff --git a/src/_common b/src/_common index d73d63dc..2ad75df3 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit d73d63dcbf9202b83798ca84f09c89672e660b74 +Subproject commit 2ad75df364de69850879d52e387a36fd2e4ddb29 diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx index 702239bf..888323d9 100644 --- a/src/tabs/Tabs.tsx +++ b/src/tabs/Tabs.tsx @@ -29,6 +29,7 @@ const Tabs: FC = (props) => { showBottomLine, size, theme, + split, stickyProps, swipeable, onChange, @@ -258,7 +259,7 @@ const Tabs: FC = (props) => { return (
-
+
` | N showBottomLine | Boolean | true | \- | N size | String | medium | options: medium/large | N spaceEvenly | Boolean | true | \- | N +split | Boolean | true | \- | N sticky | Boolean | false | \- | N stickyProps | Object | - | Typescript: `StickyProps`,[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N swipeable | Boolean | true | \- | N diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md index 8110c89e..e1e57d86 100644 --- a/src/tabs/tabs.md +++ b/src/tabs/tabs.md @@ -14,6 +14,7 @@ list | Array | - | 选项卡列表。TS 类型:`Array` | N showBottomLine | Boolean | true | 是否展示底部激活线条 | N size | String | medium | 组件尺寸。可选项:medium/large | N spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N +split | Boolean | true | 是否展示分割线 | N sticky | Boolean | false | 是否开启粘性布局 | N stickyProps | Object | - | 透传至 Sticky 组件。TS 类型:`StickyProps`,[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tabs/type.ts) | N swipeable | Boolean | true | 是否可以滑动切换 | N diff --git a/src/tabs/type.ts b/src/tabs/type.ts index c8ff55e6..0a7e095d 100644 --- a/src/tabs/type.ts +++ b/src/tabs/type.ts @@ -5,7 +5,7 @@ * */ import { StickyProps } from '../sticky'; -import { TNode, TElement } from '../common'; +import type { TNode, TElement } from '../common'; export interface TdTabsProps { /** @@ -36,6 +36,11 @@ export interface TdTabsProps { * @default true */ spaceEvenly?: boolean; + /** + * 是否展示分割线 + * @default true + */ + split?: boolean; /** * 是否开启粘性布局 * @default false diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 0d5d3071..7e975834 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -122801,7 +122801,7 @@ exports[`csr snapshot test > csr test src/tabs/_example/badge.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/content.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/evenly.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/evenly.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/evenly.tsx 1`] = ` style="z-index: 999;" >
csr test src/tabs/_example/evenly.tsx 1`] = ` style="z-index: 999;" >
csr test src/tabs/_example/icon.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 999;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 999;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/index.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/isometric.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/size.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/size.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/status.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/theme.tsx 1`] = ` style="z-index: 99;" >
csr test src/tabs/_example/theme.tsx 1`] = ` style="z-index: 99;" >
ssr test src/table/_example/scroll.tsx 1`] = `"
ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/evenly.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/evenly.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/icon.tsx 1`] = `"
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/icon.tsx 1`] = `"
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/index.tsx 1`] = `"

Tabs 选项卡

用于内容分类后的展示切换。

01 组件类型

均分选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项

等距选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

小尺寸
选项
选项
选项
大尺寸
选项
选项
选项

选项卡样式

选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/index.tsx 1`] = `"

Tabs 选项卡

用于内容分类后的展示切换。

01 组件类型

均分选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项

等距选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

小尺寸
选项
选项
选项
大尺寸
选项
选项
选项

选项卡样式

选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/isometric.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/isometric.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/size.tsx 1`] = `"
小尺寸
选项
选项
选项
大尺寸
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/size.tsx 1`] = `"
小尺寸
选项
选项
选项
大尺寸
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/status.tsx 1`] = `"
选中
默认
禁用
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/status.tsx 1`] = `"
选中
默认
禁用
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 236b95f1..03f10eeb 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -706,23 +706,23 @@ exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/evenly.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/evenly.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/icon.tsx 1`] = `"
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/icon.tsx 1`] = `"
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/index.tsx 1`] = `"

Tabs 选项卡

用于内容分类后的展示切换。

01 组件类型

均分选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项

等距选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

小尺寸
选项
选项
选项
大尺寸
选项
选项
选项

选项卡样式

选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/index.tsx 1`] = `"

Tabs 选项卡

用于内容分类后的展示切换。

01 组件类型

均分选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项
选项

等距选项卡

选项
选项
选项
选项
选项
选项
选项
选项
选项

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

小尺寸
选项
选项
选项
大尺寸
选项
选项
选项

选项卡样式

选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/isometric.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/isometric.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/size.tsx 1`] = `"
小尺寸
选项
选项
选项
大尺寸
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/size.tsx 1`] = `"
小尺寸
选项
选项
选项
大尺寸
选项
选项
选项
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/status.tsx 1`] = `"
选中
默认
禁用
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/status.tsx 1`] = `"
选中
默认
禁用
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/theme.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`;