在发布一个 Issue 前，请确保：
- - 在 [常见问题](https://tdesign.tencent.com/about/faq)、[更新日志](https://tdesign.tencent.com/about/release) 和 [旧Issue列表](https://github.com/TDesignOteam/tdesign-mobile-react/issues?q=is%3Aissue) 中搜索过你的问题。（你的问题可能已有人提出，也可能已在最新版本中被修正）
+ - 在 [常见问题](https://tdesign.tencent.com/about/faq)、[更新日志](https://tdesign.tencent.com/about/release) 和 [旧Issue列表](https://github.com/Tencent/tdesign-mobile-react/issues?q=is%3Aissue) 中搜索过你的问题。（你的问题可能已有人提出，也可能已在最新版本中被修正）
- 如果你发现一个已经关闭的旧 Issue 在最新版本中仍然存在，不要在旧 Issue 下面留言，请建一个新的 issue。
- type: input
diff --git a/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml b/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
index acd43c625..7fbf433a7 100644
--- a/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
+++ b/.github/ISSUE_TEMPLATE/feature-report.zh-CN.yml
@@ -9,7 +9,7 @@ body:
tdesign-mobile-react 的 Issue 列表接受 bug 报告或是新功能请求。也可加入官方社区：右侧内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
右侧内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md index 420e34bf9..975161552 100644 --- a/src/checkbox/checkbox.md +++ b/src/checkbox/checkbox.md @@ -11,13 +11,13 @@ align | String | left | 多选框和内容相对位置。可选项：left/right checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N checked | Boolean | false | 是否选中 | N defaultChecked | Boolean | false | 是否选中。非受控属性 | N -children | TNode | - | 多选框内容，同 label。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 多选框内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 多选框内容，同 label。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 多选框内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N disabled | Boolean | undefined | 是否禁用组件 | N -icon | Array | - | 自定义选中图标和非选中图标。示例：[选中态图标，非选中态图标]。TS 类型：`Array
值变化时触发，`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
| N +options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array
值变化时触发，`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`
| N diff --git a/src/collapse/collapse.md b/src/collapse/collapse.md index 414d48437..b89997098 100644 --- a/src/collapse/collapse.md +++ b/src/collapse/collapse.md @@ -10,10 +10,10 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N defaultExpandAll | Boolean | false | 默认是否展开全部 | N disabled | Boolean | - | 是否禁用面板展开/收起操作 | N -expandIcon | TNode | - | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +expandIcon | TNode | - | 展开图标。值为 undefined 或 false 则不显示展开图标；值为 true 显示默认图标；值类型为函数，则表示完全自定义展开图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N expandMutex | Boolean | false | 每个面板互斥展开，每次只展开一个面板 | N -value | String / Number / Array | - | 展开的面板集合。TS 类型：`CollapseValue` `type CollapseValue = string | number | Array
切换面板时触发，返回变化的值 | N ### CollapsePanel Props @@ -22,11 +22,11 @@ onChange | Function | | TS 类型：`(value: CollapseValue) => void`
切换 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 折叠面板内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 折叠面板内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 折叠面板内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 折叠面板内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N destroyOnCollapse | Boolean | false | 当前面板处理折叠状态时，是否销毁面板内容 | N disabled | Boolean | undefined | 禁止当前面板展开，优先级大于 Collapse 的同名属性 | N -expandIcon | TNode | - | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -header | TNode | - | 面板头内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -headerRightContent | TNode | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +expandIcon | TNode | - | 当前折叠面板展开图标，优先级大于 Collapse 的同名属性。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | - | 面板头内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +headerRightContent | TNode | - | 面板头的右侧区域，一般用于呈现面板操作。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N value | String / Number | - | 当前面板唯一标识，如果值为空则取当前面下标兜底作为唯一标识 | N diff --git a/src/count-down/count-down.md b/src/count-down/count-down.md index 225e4bcc4..a0d88474f 100644 --- a/src/count-down/count-down.md +++ b/src/count-down/count-down.md @@ -8,12 +8,12 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autoStart | Boolean | true | 是否自动开始倒计时 | N -content | TNode | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | 'default' | 最终倒计时的展示内容，值为'default'时使用默认的格式，否则使用自定义样式插槽。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N format | String | HH:mm:ss | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | N millisecond | Boolean | false | 是否开启毫秒级渲染 | N size | String | 'small' | 倒计时尺寸。可选项：small/medium/large | N splitWithUnit | Boolean | false | 使用时间单位分割 | N theme | String | 'default' | 倒计时风格。可选项：default/round/square | N time | Number | - | 必需。倒计时时长，单位毫秒 | Y -onChange | Function | | TS 类型：`(time: TimeData) => void`
时间变化时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
| N +onChange | Function | | TS 类型：`(time: TimeData) => void`
时间变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/count-down/type.ts)。
`interface TimeData { days: number; hours: number; minutes: number; seconds: number; milliseconds: number }`
| N onFinish | Function | | TS 类型：`() => void`
倒计时结束时触发 | N diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md index a98a9940f..95843dbb2 100644 --- a/src/dialog/dialog.md +++ b/src/dialog/dialog.md @@ -7,20 +7,20 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -actions | TNode | - | 操作栏。TS 类型：`Array
如果“取消”按钮存在，则点击“取消”按钮时触发，同时触发关闭事件 | N -onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`
关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' | 'overlay'`
`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`
| N +onClose | Function | | TS 类型：`(context: DialogCloseContext) => void`
关闭事件，点击 取消按钮 或 点击蒙层 时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/dialog/type.ts)。
`type DialogEventSource = 'cancel' | 'overlay'`
`interface DialogCloseContext { trigger: DialogEventSource; e: MouseEvent }`
| N onClosed | Function | | TS 类型：`() => void`
对话框消失动画效果结束后触发 | N onConfirm | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果“确认”按钮存在，则点击“确认”按钮时触发 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N @@ -30,7 +30,7 @@ onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- className | String | - | 弹框类名，示例：'t-class-dialog-first t-class-dialog-second' | N -style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +style | Object | - | 弹框 style 属性，输入 [CSSStyleDeclaration.cssText](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)。TS 类型：`Styles`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N `Omit
关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`
`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent | KeyboardEvent }`
| N +onClose | Function | | TS 类型：`(context: DrawerCloseContext) => void`
关闭事件，取消按钮点击时、关闭按钮点击时、ESC 按下时、点击蒙层时均会触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/drawer/type.ts)。
`type DrawerEventSource = 'esc' | 'close-btn' | 'cancel' | 'overlay'`
`interface DrawerCloseContext { trigger: DrawerEventSource; e: MouseEvent | KeyboardEvent }`
| N onItemClick | Function | | TS 类型：`( index: number, item: DrawerItem, context: { e: MouseEvent }) => void`
点击抽屉里的列表项 | N onOverlayClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
如果蒙层存在，点击蒙层时触发 | N diff --git a/src/fab/fab.md b/src/fab/fab.md index e283d03ff..e12e87854 100644 --- a/src/fab/fab.md +++ b/src/fab/fab.md @@ -8,6 +8,6 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N buttonProps | Object | - | 透传至 Button 组件 | N -icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N text | String | - | 文本内容 | N onClick | Function | | TS 类型：`(context: {e: MouseEvent}) => void`
悬浮按钮点击事件 | N diff --git a/src/grid/grid.md b/src/grid/grid.md index ed6515756..49dabea5c 100644 --- a/src/grid/grid.md +++ b/src/grid/grid.md @@ -40,8 +40,8 @@ gutter | Number | - | 间隔大小 | N -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/grid/type.ts) | N -description | TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -image | TNode | - | 图片，可以是图片地址，也可以自定义图片节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/grid/type.ts) | N +description | TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | 图片，可以是图片地址，也可以自定义图片节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N -text | TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +text | TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/image/image.md b/src/image/image.md index b7d218962..43aefeef7 100644 --- a/src/image/image.md +++ b/src/image/image.md @@ -9,10 +9,10 @@ | className | String | - | 类名 | N | | style | Object | - | 样式，TS 类型：`React.CSSProperties` | N | | alt | String | - | 图片描述 | N | -| error | TElement | - | 自定义加载失败状态下的图片内容。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | +| error | TElement | - | 自定义加载失败状态下的图片内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N | | fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N | | lazy | Boolean | false | 是否开启图片懒加载 | N | -| loading | TElement | - | 自定义加载中状态下的图片内容。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | +| loading | TElement | - | 自定义加载中状态下的图片内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N | | position | String | center | 等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何 px 或者百分比 | N | | shape | String | circle | 图片圆角类型。可选项：circle/round/square | N | | src | String | - | 图片链接 | N | diff --git a/src/indexes/indexes.md b/src/indexes/indexes.md index 888ed5e63..c53943041 100644 --- a/src/indexes/indexes.md +++ b/src/indexes/indexes.md @@ -9,5 +9,5 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N height | Number | - | 列表高度，未设置默认占满设备高度 | N -list | Array | [] | 必需。索引列表的列表数据。每个元素包含三个字元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/indexes/type.ts) | Y +list | Array | [] | 必需。索引列表的列表数据。每个元素包含三个字元素，index(string)：索引值，例如1，2，3，...或A，B，C等；title(string): 索引标题，可不填将默认设为索引值；children(Array<{title: string}>): 子元素列表，title为子元素的展示文案。。TS 类型：`ListItem[] ` `interface ListItem { title: string; index: string; children: { title: string; [key: string]: any} [] }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/indexes/type.ts) | Y onSelect | Function | | TS 类型：`(indexes: { groupIndex: string; childrenIndex: number }) => void`
点击行元素时触发事件 | N diff --git a/src/input/input.md b/src/input/input.md index 46e1dfb64..ce4a5a8e6 100644 --- a/src/input/input.md +++ b/src/input/input.md @@ -13,18 +13,18 @@ autofocus | Boolean | false | 自动聚焦 | N clearable | Boolean | false | 是否可清空 | N disabled | Boolean | false | 是否禁用输入框 | N errorMessage | String | - | 错误提示文本，值为空不显示 | N -label | TNode | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度。`maxcharacter` 和 `maxlength` 二选一使用 | N maxlength | Number | - | 用户最多可以输入的文本长度。值小于等于 0 的时候，则不限制输入长度。`maxcharacter` 和 `maxlength` 二选一使用 | N name | String | - | 名称 | N placeholder | String | undefined | 占位符 | N -prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +prefixIcon | TElement | - | 组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N size | String | small | 输入框尺寸。可选项：small/medium。TS 类型：`'medium' | 'small'` | N -suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffix | TNode | - | 后置图标前的后置内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | 组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N type | String | text | 输入框类型。可选项：text/number/url/tel/password/search/submit/hidden | N -value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/input/type.ts) | N -defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/input/type.ts) | N +value | String / Number | - | 输入框的值。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N +defaultValue | String / Number | - | 输入框的值。非受控属性。TS 类型：`InputValue`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/input/type.ts) | N onBlur | Function | | TS 类型：`(value: InputValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N onChange | Function | | TS 类型：`(value: InputValue, context?: { e?: InputEvent | MouseEvent }) => void`
输入框值发生变化时触发 | N onClear | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
清空按钮点击时触发 | N diff --git a/src/loading/loading.md b/src/loading/loading.md index 6393fbab5..6b3a1287f 100644 --- a/src/loading/loading.md +++ b/src/loading/loading.md @@ -8,7 +8,7 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 子元素，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N indicator | Boolean | true | 是否显示加载指示符 | N @@ -20,7 +20,7 @@ preventScrollThrough | Boolean | true | 防止滚动穿透，全屏加载模式 progress | Number | - | 加载进度 | N reverse | Boolean | - | 加载动画是否反向 | N size | String | '40rpx' | 尺寸，示例：40rpx/20px | N -text | TNode | - | 加载提示文案。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +text | TNode | - | 加载提示文案。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N theme | String | circular | 加载组件类型。可选项：circular/spinner/bar/error/dots | N ### loading 或 LoadingPlugin diff --git a/src/message/message.md b/src/message/message.md index 6159023f1..e889d2652 100644 --- a/src/message/message.md +++ b/src/message/message.md @@ -24,9 +24,9 @@ toc: false | --------------- | -------- | --------- | ------------------------------------------------------------ | ---- | | className | String | - | 类名 | N | | style | Object | - | 样式，TS 类型：`React.CSSProperties` | N | -| closeBtn | TNode | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string |boolean |TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N | +| closeBtn | TNode | undefined | 关闭按钮，可以自定义。值为 true 显示默认关闭按钮，值为 false 不显示关闭按钮。值类型为 string 则直接显示值，如：“关闭”。也可以完全自定义按钮。TS 类型：`string |boolean |TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N | | duration | Number | 3000 | 消息内置计时器，计时到达时会触发 duration-end 事件。单位：毫秒。值为 0 则表示没有计时器。 | N | -| theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/message/type.ts) | N | +| theme | String | info | 消息组件风格。可选项：info/success/warning/error。TS 类型：`MessageThemeList`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/message/type.ts) | N | | visible | Boolean | false | 是否显示，隐藏时默认销毁组件 | N | | zIndex | Number | - | 元素层级，样式默认为 5000 | N | | onClose | Function | | TS 类型：`() => void`
关闭 Message 时触发 | N | diff --git a/src/navbar/navbar.md b/src/navbar/navbar.md index dce90fd9d..a3ddd50c7 100644 --- a/src/navbar/navbar.md +++ b/src/navbar/navbar.md @@ -10,10 +10,10 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N animation | Boolean | true | 是否添加动画效果 | N background | String | - | 背景 | N fixed | Boolean | true | 是否固定在顶部 | N -homeIcon | TNode | - | 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -leftIcon | TNode | false | 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -rightIcon | TElement | - | 右侧图标，可自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -title | TNode | - | 页面标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +homeIcon | TNode | - | 首页图标。值为 true 表示显示默认返回图标，值为 false 表示不显示首页图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +leftIcon | TNode | false | 左侧图标。值为 true 表示显示默认返回图标，值为 false 表示不显示左侧图标，值为其他表示自定义图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +rightIcon | TElement | - | 右侧图标，可自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | 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 onHomeClick | Function | | TS 类型：`() => void`
点击 home 图标时触发 | N diff --git a/src/notice-bar/notice-bar.md b/src/notice-bar/notice-bar.md index 92ce24dd8..16c6039c7 100644 --- a/src/notice-bar/notice-bar.md +++ b/src/notice-bar/notice-bar.md @@ -8,13 +8,13 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -content | TNode | - | 文本内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -extra | TNode | - | 右侧额外信息。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts) | N -prefixIcon | TNode | - | 前缀图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -suffixIcon | TElement | - | 后缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 文本内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +extra | TNode | - | 右侧额外信息。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制；loop 指循环播放次数，值为 -1 表示循环播放，值为 0 表示不循环播放；delay 表示延迟多久开始播放。TS 类型：`boolean | DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts) | N +prefixIcon | TNode | - | 前缀图标。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +suffixIcon | TElement | - | 后缀图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N theme | String | info | 内置主题。可选项：info/success/warning/error | N visible | Boolean | false | 显示/隐藏 | N defaultVisible | Boolean | false | 显示/隐藏。非受控属性 | N onChange | Function | | TS 类型：`(value: boolean) => void`
展示或关闭公告栏时触发。参数为true时，代表展示公告栏。参数为false时，代表关闭公告栏 | N -onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`
| N +onClick | Function | | TS 类型：`(trigger: NoticeBarTrigger) => void`
点击事件。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/notice-bar/type.ts)。
`type NoticeBarTrigger = 'prefix-icon' | 'content' | 'extra' | 'suffix-icon';`
| N diff --git a/src/picker/picker.md b/src/picker/picker.md index 8e1f0f87c..6d5c4b677 100644 --- a/src/picker/picker.md +++ b/src/picker/picker.md @@ -9,11 +9,11 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N cancelBtn | String | 取消 | 取消按钮文字 | N confirmBtn | String | 确认 | 确定按钮文字 | N -footer | TElement | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +footer | TElement | - | 底部内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +header | TNode | true | 头部内容。值为 true 显示空白头部，值为 false 不显示任何内容，值类型为 TNode 表示自定义头部内容。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N title | String | '' | 标题 | N -value | Array | - | 选中值。TS 类型：`Array
点击取消按钮时触发 | N onChange | Function | | TS 类型：`(value: Array
选中变化时候触发 | N @@ -26,4 +26,4 @@ onConfirm | Function | | TS 类型：`(value: Array
当浮层隐藏或显示时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' | 'overlay'`
| N +onVisibleChange | Function | | TS 类型：`(visible: boolean, trigger: PopupSource) => void`
当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/popup/type.ts)。
`type PopupSource = 'close-btn' | 'overlay'`
| N diff --git a/src/progress/progress.en-US.md b/src/progress/progress.en-US.md index c8d34462f..12a91d129 100644 --- a/src/progress/progress.en-US.md +++ b/src/progress/progress.en-US.md @@ -9,9 +9,9 @@ name | type | default | description | required className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N color | String / Object / Array | '' | Typescript：`string \| Array
选中状态变化时触发 | N ### RadioGroup Props @@ -31,7 +31,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N disabled | Boolean | undefined | 是否禁用全部子单选框 | N name | String | - | HTML 元素原生属性 | N -options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array
选中值发生变化时触发 | N diff --git a/src/search/search.md b/src/search/search.md index 4346901f0..dae4b813d 100644 --- a/src/search/search.md +++ b/src/search/search.md @@ -7,14 +7,14 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -action | TNode | '' | 自定义右侧操作按钮文字。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +action | TNode | '' | 自定义右侧操作按钮文字。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N center | Boolean | false | 是否居中 | N disabled | Boolean | false | 是否禁用 | N focus | Boolean | false | 是否聚焦 | N label | String | '' | 左侧文本 | N -leftIcon | TElement | - | 左侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +leftIcon | TElement | - | 左侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N placeholder | String | '' | 占位符 | N -rightIcon | TElement | - | 右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +rightIcon | TElement | - | 右侧图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N shape | String | 'square' | 搜索框形状。可选项：square/round | N value | String | '' | 值 | N defaultValue | String | '' | 值。非受控属性 | N diff --git a/src/skeleton/skeleton.md b/src/skeleton/skeleton.md index b722bcaf4..7da92c7c1 100644 --- a/src/skeleton/skeleton.md +++ b/src/skeleton/skeleton.md @@ -6,9 +6,9 @@ 名称 | 类型 | 默认值 | 说明 | 必传 -- | -- | -- | -- | -- animation | String | - | 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画。可选项：gradient/flashed | N -default | TNode | - | 加载完成的内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | - | 加载完成的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +default | TNode | - | 加载完成的内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 加载完成的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N delay | Number | 0 | 【开发中】延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N loading | Boolean | true | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | N -rowCol | Array | - | 高级设置，用于自定义行列数量、宽度高度、间距等。【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度、尺寸（圆形或方形使用）、间距、内容等。TS 类型：`SkeletonRowCol` `type SkeletonRowCol = Array
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `value` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型：`Array
值为 true 显示默认文案；值为 false 不显示滑块当前值文本；
值为 `value` 则表示组件会根据占位符渲染文案；
值类型为函数时，参数 `value` 标识滑块值，参数 `position=start` 表示范围滑块的起始值，参数 `position=end` 表示范围滑块的终点值。TS 类型：`string | boolean | TNode<{ value: SliderValue; position?: 'start' | 'end' }>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +marks | Object / Array | - | 刻度标记，示例：[0, 10, 40, 200] 或者 `{ 10: (val) => val + '%', 50: (h) => }`。TS 类型：`Array
滑块值变化时触发 | N onDragend | Function | | TS 类型：`() => void`
结束拖动时触发 | N onDragstart | Function | | TS 类型：`() => void`
开始拖动时触发 | N diff --git a/src/steps/steps.md b/src/steps/steps.md index bc31c705c..6775b0708 100644 --- a/src/steps/steps.md +++ b/src/steps/steps.md @@ -22,8 +22,8 @@ onChange | Function | | TS 类型：`(current: string | number, previous: strin -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -children | TNode | - | 步骤描述，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -content | TNode | '' | 步骤描述。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N -title | TNode | '' | 标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +children | TNode | - | 步骤描述，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | '' | 步骤描述。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TNode | true | 图标，默认显示内置图标，也可以自定义图标，值为 false 则不显示图标。优先级大于 `status` 定义的图标。TS 类型：`boolean | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +status | String | default | 当前步骤的状态。可选项：default/process/finish/error。TS 类型：`StepStatus` `type StepStatus = 'default' | 'process' | 'finish' | 'error'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/steps/type.ts) | N +title | TNode | '' | 标题。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/sticky/sticky.md b/src/sticky/sticky.md index 8adc37329..ce2f3b812 100644 --- a/src/sticky/sticky.md +++ b/src/sticky/sticky.md @@ -11,4 +11,4 @@ container | String / Function | body | 指定滚动的容器。数据类型为 S disabled | Boolean | false | 是否禁用组件 | N offsetTop | String / Number | 0 | 吸顶时与顶部的距离，单位`px` | N zIndex | Number | 99 | 吸顶时的 z-index | N -onScroll | Function | | TS 类型：`(context: { scrollTop: number, isFixed: boolean }) => void`
滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +onScroll | Function | | TS 类型：`(context: { scrollTop: number, isFixed: boolean }) => void`
滚动时触发，scrollTop: 距离顶部位置，isFixed: 是否吸顶。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md index 74ad9211f..feb4b8221 100644 --- a/src/swipe-cell/swipe-cell.md +++ b/src/swipe-cell/swipe-cell.md @@ -8,10 +8,10 @@ -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -content | TNode | - | 操作项以外的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 操作项以外的内容。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N disabled | Boolean | - | 是否禁用滑动 | N expanded | String | - | 操作项是否呈现为打开态。可选项：left/right | N left | TNode | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array
菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。 | N -onClick | Function | | TS 类型：`(context: SwipeActionClickContext) => void`
操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。
`interface SwipeActionClickContext { action: SwipeActionItem; source: 'left' | 'right' }`
| N +onClick | Function | | TS 类型：`(context: SwipeActionClickContext) => void`
操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。
`interface SwipeActionClickContext { action: SwipeActionItem; source: 'left' | 'right' }`
| N diff --git a/src/swiper/swiper.md b/src/swiper/swiper.md index 06bcb2df6..072b3b78d 100644 --- a/src/swiper/swiper.md +++ b/src/swiper/swiper.md @@ -17,8 +17,8 @@ duration | Number | 300 | 滑动动画时长 | N height | Number | - | 当使用垂直方向滚动时的高度 | N interval | Number | 5000 | 轮播间隔时间 | N loop | Boolean | true | 是否循环播放 | N -navigation | Object | - | 【TNode类型暂不支持】导航器全部配置。TS 类型：`SwiperNavigation | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
轮播切换时触发。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' | 'touch' | ''`
| N +navigation | Object | - | 【TNode类型暂不支持】导航器全部配置。TS 类型：`SwiperNavigation | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +onChange | Function | | TS 类型：`(current: number, context: { source: SwiperChangeSource }) => void`
轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts)。
`type SwiperChangeSource = 'autoplay' | 'touch' | ''`
| N ### SwiperNavigation @@ -26,4 +26,4 @@ onChange | Function | | TS 类型：`(current: number, context: { source: Swipe -- | -- | -- | -- | -- minShowNum | Number | - | 小于这个数字不会显示导航器 | N showSlideBtn | Boolean | - | 表示是否显示两侧的滑动控制按钮 | N -type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N +type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swiper/type.ts) | N diff --git a/src/switch/switch.md b/src/switch/switch.md index 4725ac8a6..d1d4aea8b 100644 --- a/src/switch/switch.md +++ b/src/switch/switch.md @@ -10,9 +10,9 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N colors | Array | - | 自定义颜色，[打开时的颜色，关闭时的颜色]。组件默认颜色为 ['#0052d9', 'rgba(0, 0, 0, .26']。示例：[blue, gray]。TS 类型：`string[]` | N customValue | Array | - | 开关内容，[打开时的值，关闭时的值]。默认为 [true, false]。示例：[1, 0]。TS 类型：`Array
数据发生变化时触发 | N diff --git a/src/tab-bar/tab-bar.md b/src/tab-bar/tab-bar.md index a20b375b0..acb6981dc 100644 --- a/src/tab-bar/tab-bar.md +++ b/src/tab-bar/tab-bar.md @@ -20,7 +20,7 @@ onChange | Function | | TS 类型：`() => void`
选中标签切换时触 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -badgeProps | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N -icon | TNode | - | 图标名称。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N -subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +badgeProps | Object | - | 图标右上角提示信息。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N +icon | TNode | - | 图标名称。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +subTabBar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tab-bar/type.ts) | N value | String / Number | - | 标识符 | N diff --git a/src/tag/tag.md b/src/tag/tag.md index c1068e85e..ed8ef2a68 100644 --- a/src/tag/tag.md +++ b/src/tag/tag.md @@ -8,12 +8,12 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N closable | Boolean | false | 标签是否可关闭 | N -content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N -icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N maxWidth | String / Number | - | 标签最大宽度，宽度超出后会出现省略号。示例：'50px' / 80。TS 类型：`CSSProperties['maxWidth'] | number` | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N -size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N theme | String | default | 组件风格，用于描述组件不同的应用场景。可选项：default/primary/warning/danger/success | N variant | String | dark | 标签风格变体。可选项：dark/light/outline/light-outline | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发 | N @@ -28,10 +28,10 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N checked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态 | N defaultChecked | Boolean | undefined | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N closable | Boolean | false | 标签是否可关闭 | N -content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 组件子元素。TS 类型：`string | number | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N -icon | TElement | - | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N shape | String | square | 标签类型，有三种：方形、圆角方形、标记型。可选项：square/round/mark | N -size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N onChange | Function | | TS 类型：`(checked: boolean) => void`
组件子元素 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击标签时触发 | N diff --git a/src/textarea/textarea.md b/src/textarea/textarea.md index fd1543bd0..7f2fbf242 100644 --- a/src/textarea/textarea.md +++ b/src/textarea/textarea.md @@ -11,13 +11,13 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N autofocus | Boolean | false | 自动聚焦，拉起键盘 | N autosize | Boolean | false | 是否自动增高，值为 autosize 时，style.height 不生效 | N disabled | Boolean | false | 是否禁用文本框 | N -label | TNode | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/blob/develop/src/common.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N maxcharacter | Number | - | 用户最多可以输入的字符个数，一个中文汉字表示两个字符长度 | N maxlength | Number | - | 用户最多可以输入的字符个数 | N name | String | - | 名称，HTML 元素原生属性 | N placeholder | String | undefined | 占位符 | N -value | String / Number | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string | number`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/textarea/type.ts) | N -defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string | number`。[详细类型定义](https://github.com/TDesignOteam/tdesign-mobile-react/tree/develop/src/textarea/type.ts) | N +value | String / Number | - | 文本框值。TS 类型：`TextareaValue` `type TextareaValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/textarea/type.ts) | N +defaultValue | String / Number | - | 文本框值。非受控属性。TS 类型：`TextareaValue` `type TextareaValue = string | number`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/textarea/type.ts) | N onBlur | Function | | TS 类型：`(value: TextareaValue, context: { e: FocusEvent }) => void`
失去焦点时触发 | N onChange | Function | | TS 类型：`(value: TextareaValue, context?: { e?: InputEvent }) => void`
输入内容变化时触发 | N onFocus | Function | | TS 类型：`(value: TextareaValue, context : { e: FocusEvent }) => void`
获得焦点时触发 | N From 1438ed72fdbe765ec9a9870c5cbea4ca5400a9fd Mon Sep 17 00:00:00 2001 From: liweijie0812 <674416404@qq.com> Date: Tue, 30 Jul 2024 16:35:02 +0800 Subject: [PATCH 2/3] feat(Divider): refactor (#403) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(DIvider): refactor * chore: update common * chore: rename tsx * chore(site): update mobile.config * chore(husky): ci环境不运行 * chore: update snapshot * chore(site): 展示tsx 示例代码 * feat: children?: React.ReactNode * docs: sync api * feat: remove children api * docs: update --------- Co-authored-by: github-actions[bot]
DEMO (🚧建设中）...
'; } diff --git a/src/_common b/src/_common index 1bacc8e91..05c1f59ef 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 1bacc8e91408cca2b26a3ca7b4b13f9bb62d8af2 +Subproject commit 05c1f59ef27bea7da2fcfd09f98b0b838516d538 diff --git a/src/divider/Divider.tsx b/src/divider/Divider.tsx index d290ca38a..911da7c43 100644 --- a/src/divider/Divider.tsx +++ b/src/divider/Divider.tsx @@ -1,40 +1,38 @@ -import React, { FC } from 'react'; +import React from 'react'; +import type { FC } from 'react'; import classNames from 'classnames'; import { TdDividerProps } from './type'; +import { dividerDefaultProps } from './defaultProps'; +import { StyledProps } from '../common'; import useConfig from '../_util/useConfig'; -import withNativeProps, { NativeProps } from '../_util/withNativeProps'; +import useDefaultProps from '../hooks/useDefaultProps'; -export interface DividerProps extends TdDividerProps, NativeProps {} - -const defaultProps = { - align: 'center', - dashed: false, - layout: 'horizontal', - lineColor: '', -}; +export interface DividerProps extends TdDividerProps, StyledProps { + children?: React.ReactNode; +} const Divider: FC
- {contentNode && {contentNode}}
-
,
+ return (
+
+
);
};
-Divider.defaultProps = defaultProps as DividerProps;
Divider.displayName = 'Divider';
export default Divider;
diff --git a/src/divider/__tests__/divider.test.tsx b/src/divider/__tests__/divider.test.tsx
new file mode 100644
index 000000000..dd6144a3e
--- /dev/null
+++ b/src/divider/__tests__/divider.test.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { describe, expect, it, render, waitFor } from '@test/utils';
+import Divider from '../Divider';
+import { TdDividerProps } from '../type';
+
+describe('Divider', () => {
+ describe('props', () => {
+ it(':align', async () => {
+ const testId = 'divider test align';
+ const aligns: TdDividerProps['align'][] = ['left', 'right', 'center'];
+ const { getByTestId } = render(
+ {contentNode}
+
+ {aligns?.map((align, index) => (
+
,
+ );
+
+ const instance = await waitFor(() => getByTestId(testId));
+
+ for (let index = 0; index < aligns.length; index++) {
+ const align = aligns[index];
+ expect(() => instance.querySelector(`.t-divider--${align}`)).toBeTruthy();
+ }
+ });
+
+ it(':layout', async () => {
+ const testId = 'divider test layout';
+ const layouts: TdDividerProps['layout'][] = ['horizontal', 'vertical'];
+ const { getByTestId } = render(
+
+ {layouts?.map((layout, index) => (
+
,
+ );
+
+ const instance = await waitFor(() => getByTestId(testId));
+
+ for (let index = 0; index < layouts.length; index++) {
+ const layout = layouts[index];
+ expect(() => instance.querySelector(`.t-divider--${layout}`)).toBeTruthy();
+ }
+ });
+
+ it(':dashed', async () => {
+ const { container } = render(
-
- );
-}
diff --git a/src/divider/_example/base.jsx b/src/divider/_example/base.jsx
deleted file mode 100644
index 08a65dee7..000000000
--- a/src/divider/_example/base.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Divider } from 'tdesign-mobile-react';
-
-import './style/index.less';
-
-export default function Base() {
- return (
- 文字+直线
-
-
-
- 文字+虚线
-
-
- 文字信息
-
-
-
-
- );
-}
diff --git a/src/divider/_example/base.tsx b/src/divider/_example/base.tsx
new file mode 100644
index 000000000..f50a24c74
--- /dev/null
+++ b/src/divider/_example/base.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Divider } from 'tdesign-mobile-react';
+
+import './style/index.less';
+
+export default function Base() {
+ return (
+ <>
+ 直线拉通
-虚线拉通
-左右间距
-
-
-
- 右侧拉通
-
-
- 自定义左侧距离
-
-
- 水平分割线
+ 带文字水平分割线
+
+ 垂直分割线
+
+
+ 文字信息
+
+
+ );
+}
diff --git a/src/divider/_example/index.jsx b/src/divider/_example/index.tsx
similarity index 67%
rename from src/divider/_example/index.jsx
rename to src/divider/_example/index.tsx
index 12183f287..dc9629ac4 100644
--- a/src/divider/_example/index.jsx
+++ b/src/divider/_example/index.tsx
@@ -1,20 +1,20 @@
import React from 'react';
import TDemoBlock from '../../../site/mobile/components/DemoBlock';
import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import Vertical from './vertical';
import BaseDemo from './base';
-import AlignDemo from './align';
+import ThemeDemo from './theme';
import './style/index.less';
-export default function Base() {
+export default function DividerDemo() {
return (
+
+ );
+}
diff --git a/src/divider/_example/vertical.jsx b/src/divider/_example/vertical.jsx
deleted file mode 100644
index ef1e7e5e9..000000000
--- a/src/divider/_example/vertical.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Divider } from 'tdesign-mobile-react';
-import './style/index.less';
-
-export default function Vertical() {
- return (
- 虚线样式
+
-
- );
-}
diff --git a/src/divider/defaultProps.ts b/src/divider/defaultProps.ts
new file mode 100644
index 000000000..5d7b1c944
--- /dev/null
+++ b/src/divider/defaultProps.ts
@@ -0,0 +1,7 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdDividerProps } from './type';
+
+export const dividerDefaultProps: TdDividerProps = { align: 'center', dashed: false, layout: 'horizontal' };
diff --git a/src/divider/divider.en-US.md b/src/divider/divider.en-US.md
new file mode 100644
index 000000000..f1f34f0c3
--- /dev/null
+++ b/src/divider/divider.en-US.md
@@ -0,0 +1,15 @@
+:: BASE_DOC ::
+
+## API
+
+### Divider Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+align | String | center | options: left/right/center | N
+children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+dashed | Boolean | false | \- | N
+layout | String | horizontal | options: horizontal/vertical | N
diff --git a/src/divider/divider.md b/src/divider/divider.md
index 690eea321..87e28ad5a 100644
--- a/src/divider/divider.md
+++ b/src/divider/divider.md
@@ -1,8 +1,9 @@
:: BASE_DOC ::
## API
+
### Divider Props
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
className | String | - | 类名 | N
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
@@ -11,4 +12,3 @@ children | TNode | - | 子元素，同 content。TS 类型：`string | TNode`。
content | TNode | - | 子元素。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
dashed | Boolean | false | 是否虚线（仅在水平分割线有效） | N
layout | String | horizontal | 分隔线类型有两种：水平和垂直。可选项：horizontal/vertical | N
-lineColor | String | - | 分隔线颜色 | N
diff --git a/src/divider/type.ts b/src/divider/type.ts
index 919d7c768..a0b0408eb 100644
--- a/src/divider/type.ts
+++ b/src/divider/type.ts
@@ -30,9 +30,4 @@ export interface TdDividerProps {
* @default horizontal
*/
layout?: 'horizontal' | 'vertical';
- /**
- * 分隔线颜色
- * @default ''
- */
- lineColor?: string;
}
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 6c8859769..5e98494dd 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -1,5 +1,810 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`csr snapshot test > csr test src/divider/_example/base.tsx 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+ 纯文字
-
-
- 没有更多了～
-
-
-
- 垂直分割
-
- 文字信息
- 文字信息
- 文字信息
-
-
+
+ ,
+ "container":
+ 水平分割线
+
+
+
+
+
+ 带文字水平分割线
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+ 垂直分割线
+
+
+
+ 文字信息
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ 文字信息
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/divider/_example/index.tsx 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ 水平分割线
+
+
+
+
+
+ 带文字水平分割线
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+ 垂直分割线
+
+
+
+ 文字信息
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ 文字信息
+
+
+
+ ,
+ "container":
+
+
+
+ + Divider 分割符 +
++ 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +
+
+
+
+
+ + 01 组件类型 +
+
+
+
+ 水平分割线
+
+
+
+
+
+ 带文字水平分割线
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+ 垂直分割线
+
+
+
+ 文字信息
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ + 02 组件状态 +
+
+
+
+
+
+ 虚线样式
+
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`csr snapshot test > csr test src/divider/_example/theme.tsx 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+ + Divider 分割符 +
++ 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +
+
+
+
+
+ + 01 组件类型 +
+
+
+
+ 水平分割线
+
+
+
+
+
+ 带文字水平分割线
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+ 垂直分割线
+
+
+
+ 文字信息
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ 文字信息
+
+
+
+
+
+ + 02 组件状态 +
+
+
+
+
+
+ 虚线样式
+
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+ ,
+ "container":
+
+
+ 虚线样式
+
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
{
"asFragment": [Function],
@@ -355,4 +1160,10 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
}
`;
+exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
+
+
+ 虚线样式
+
+
+
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+
+
+
+ 文字信息
+
+ 水平分割线
带文字水平分割线
文字信息
文字信息
文字信息
垂直分割线
文字信息
"`;
+
+exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"文字信息
文字信息
Divider 分割符
用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
01 组件类型
水平分割线
带文字水平分割线
文字信息
文字信息
文字信息
垂直分割线
文字信息
文字信息
文字信息
02 组件状态
虚线样式
文字信息
文字信息
文字信息
虚线样式
文字信息
文字信息
文字信息
标题文字
8
标题文字
new
标题文字
···
标题文字
水平分割线
带文字水平分割线
文字信息
文字信息
文字信息
垂直分割线
文字信息
"`;
+
+exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `"文字信息
文字信息
Divider 分割符
用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
01 组件类型
水平分割线
带文字水平分割线
文字信息
文字信息
文字信息
垂直分割线
文字信息
文字信息
文字信息
02 组件状态
虚线样式
文字信息
文字信息
文字信息
虚线样式
文字信息
文字信息
文字信息
标题文字
8
标题文字
new
标题文字
···
标题文字
-
- ,
- "container":
- 水平分割线
-
-
-
-
-
- 带文字水平分割线
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
- 垂直分割线
-
-
-
- 文字信息
-
-
-
-
-
-
- 文字信息
-
-
-
-
-
- 文字信息
-
-
+
+
`;
exports[`csr snapshot test > csr test src/divider/_example/theme.tsx 1`] = `
-{
- "asFragment": [Function],
- "baseElement":
-
+
+
+
+
+
+`;
+
+exports[`csr snapshot test > csr test src/divider/_example/index.tsx 1`] = `
+
+ 水平分割线
+
+
- 水平分割线
-
+ class="t-divider__content"
+ />
+
+ 带文字水平分割线
+
+
-
+ 文字信息
+
- 带文字水平分割线
+ 文字信息
+
-
+
- 文字信息
-
+ 文字信息
+ 垂直分割线
+
+
+
+ 文字信息
+
+
+ 文字信息
+
+
+ 文字信息
+
+
+
- 文字信息
-
+ />
- 文字信息
-
+ />
+
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
-`;
-
-exports[`csr snapshot test > csr test src/divider/_example/index.tsx 1`] = `
-{
- "asFragment": [Function],
- "baseElement":
-
- ,
- "container":
- 垂直分割线
+
+ Divider 分割符 +
++ 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 +
-
- 文字信息
-
-
-
+
-
- 文字信息
-
+ 01 组件类型 +
-
-
- 文字信息
-
-
-
+
+ class="divider-demo__title"
+ >
+ 水平分割线
+
-
+ - Divider 分割符 -
- +
+ 带文字水平分割线
+
+
+
- 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。
-
+ 文字信息
+
-
+ - 01 组件类型 -
+ 文字信息
-
- 水平分割线
-
-
-
-
-
- 带文字水平分割线
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
- 垂直分割线
-
-
-
- 文字信息
-
-
+ 文字信息
-
-
-
- 文字信息
-
-
-
-
-
- 文字信息
-
-
+ 垂直分割线
+
+
+
+ 文字信息
+
-
+
+ 文字信息
+
- 02 组件状态 -
+
-
+
+ 文字信息
+
-
+
- 虚线样式
-
-
-
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
- Divider 分割符 -
-- 用于分割、组织、细化有一定逻辑的组织元素内容和页面结构。 -
+ 02 组件状态 +
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
+
-
- - 01 组件类型 -
-
+
-
-
-
-
- 水平分割线
+ 虚线样式
csr test src/divider/_example/index.tsx 1`] = `
/>
- 带文字水平分割线
-
- csr test src/divider/_example/index.tsx 1`] = `
csr test src/divider/_example/index.tsx 1`] = `
csr test src/divider/_example/index.tsx 1`] = `
文字信息
- 垂直分割线
-
-
-
- 文字信息
-
-
-
-
-
-
- 文字信息
-
-
-
-
-
- 文字信息
-
-
-
-
- - 02 组件状态 -
-
-
-
- 虚线样式
-
-
-
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
+
- 虚线样式
-
-
-
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
-
-
- 文字信息
-
-
+
+
`;
exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
-{
- "asFragment": [Function],
- "baseElement":
-
+ 虚线样式
- ,
- "container":
-
+
-
+
+
+
-
,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
+
- 虚线样式
-
+
-
-
+ class="t-divider__content"
+ />
+
-
+
- 文字信息
-
+ 文字信息
-
+
- 文字信息
-
+ 文字信息
-
- 文字信息
-
+ 文字信息
+
+
`;
exports[`ssr snapshot test > ssr test src/divider/_example/base.tsx 1`] = `"
+
+
+
- ,
- "container":
+
+
+
+
+
+
+
+
+
+
- ,
- "debug": [Function],
- "findAllByAltText": [Function],
- "findAllByDisplayValue": [Function],
- "findAllByLabelText": [Function],
- "findAllByPlaceholderText": [Function],
- "findAllByRole": [Function],
- "findAllByTestId": [Function],
- "findAllByText": [Function],
- "findAllByTitle": [Function],
- "findByAltText": [Function],
- "findByDisplayValue": [Function],
- "findByLabelText": [Function],
- "findByPlaceholderText": [Function],
- "findByRole": [Function],
- "findByTestId": [Function],
- "findByText": [Function],
- "findByTitle": [Function],
- "getAllByAltText": [Function],
- "getAllByDisplayValue": [Function],
- "getAllByLabelText": [Function],
- "getAllByPlaceholderText": [Function],
- "getAllByRole": [Function],
- "getAllByTestId": [Function],
- "getAllByText": [Function],
- "getAllByTitle": [Function],
- "getByAltText": [Function],
- "getByDisplayValue": [Function],
- "getByLabelText": [Function],
- "getByPlaceholderText": [Function],
- "getByRole": [Function],
- "getByTestId": [Function],
- "getByText": [Function],
- "getByTitle": [Function],
- "queryAllByAltText": [Function],
- "queryAllByDisplayValue": [Function],
- "queryAllByLabelText": [Function],
- "queryAllByPlaceholderText": [Function],
- "queryAllByRole": [Function],
- "queryAllByTestId": [Function],
- "queryAllByText": [Function],
- "queryAllByTitle": [Function],
- "queryByAltText": [Function],
- "queryByDisplayValue": [Function],
- "queryByLabelText": [Function],
- "queryByPlaceholderText": [Function],
- "queryByRole": [Function],
- "queryByTestId": [Function],
- "queryByText": [Function],
- "queryByTitle": [Function],
- "rerender": [Function],
- "unmount": [Function],
-}
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- 标题文字
-
-
-
+ class="t-badge__inner t-badge--dot t-badge--has-children t-badge--medium"
+ />
+
-
-
-
- 8
-
-
-
-
-
-
-
-
- 标题文字
-
-
+
-
-
-
- new
-
-
-
-
-
-
+ 标题文字
- 标题文字
-
-
-
+ class="t-grid-item__description"
+ />
-
-
-
- ···
-
-
-
-
-
-
-
-
- 标题文字
-
-
-
-
-
-
-
-
+
-
-
+ 8
- 标题文字
-
-
- 8
+ 标题文字
-
-
+ class="t-grid-item__description"
+ />
-
-
-
- 标题文字
-
-
-
+ new
+
- new
-
-
+ new
+
-
-
- 标题文字
-
+ 标题文字
-
+ ···
+
- ···
-
-
+ ···
+
-
-
- 标题文字
-
+ 标题文字
水平分割线
带文字水平分割线
文字信息
文字信息
文字信息
垂直分割线
文字信息
"`;
diff --git a/test/snap/csr.test.jsx b/test/snap/csr.test.jsx
index f278735e1..5436a9f4c 100644
--- a/test/snap/csr.test.jsx
+++ b/test/snap/csr.test.jsx
@@ -31,8 +31,8 @@ function runTest() {
it(`csr test ${file}`, async () => {
const demo = await import(`../../${file}`);
const RealDemoComp = demo.default ? demo.default : demo;
- const wrapper = render(文字信息
文字信息