feat(checkbox): support title API

Tencent · Nov 15, 2024 · 0376e74 · 0376e74
1 parent 2c28a90
commit 0376e74
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 1 deletion.
diff --git a/src/checkbox/checkbox.en-US.md b/src/checkbox/checkbox.en-US.md
@@ -16,6 +16,7 @@ indeterminate | Boolean | false | \- | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | \- | N
 readonly | Boolean | false | \- | N
+title | String | - | html attribute | N
 value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on click | N

diff --git a/src/checkbox/checkbox.md b/src/checkbox/checkbox.md
@@ -21,6 +21,7 @@ indeterminate | Boolean | false | 是否为半选 | N
 label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | HTML 元素原生属性 | N
 readonly | Boolean | false | 只读状态 | N
+title | String | - | HTML 原生属性 | N
 value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>值变化时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N

diff --git a/src/checkbox/type.ts b/src/checkbox/type.ts
@@ -50,6 +50,11 @@ export interface TdCheckboxProps {
    * @default false
    */
   readonly?: boolean;
+  /**
+   * HTML 原生属性
+   * @default ''
+   */
+  title?: string;
   /**
    * 多选框的值
    */

diff --git a/src/common/Check.tsx b/src/common/Check.tsx
@@ -46,6 +46,7 @@ const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
     style,
     readonly,
     onClick,
+    title,
     ...htmlProps
   } = props;
 
@@ -74,6 +75,7 @@ const Check = forwardRef<HTMLLabelElement, CheckProps>((_props, ref) => {
       checked={internalChecked}
       disabled={disabled}
       name={name}
+      title={title}
       tabIndex={-1}
       value={isBoolean(value) ? Number(value) : value}
       data-value={typeof value === 'string' ? `'${value}'` : value}

diff --git a/src/table/_example/select-multiple.tsx b/src/table/_example/select-multiple.tsx
@@ -19,7 +19,7 @@ const columns: TableProps['columns'] = [
 
     // 禁用行选中方式二：使用 checkProps 禁用行（示例代码有效，勿删）
     // 这种方式禁用行选中，行文本不会变灰
-    checkProps: ({ rowIndex }) => ({ disabled: rowIndex % 2 !== 0 }),
+    checkProps: ({ rowIndex }) => ({ disabled: rowIndex % 2 !== 0, title: rowIndex % 2 !== 0 ? '不可选' : null }),
     width: 50,
   },
   { colKey: 'applicant', title: '申请人', width: '100' },