diff --git a/packages/common b/packages/common index 17b62abaed..6b6f6a5888 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 17b62abaedb8f4d2bac8e2aad53bc17bc68d5fd9 +Subproject commit 6b6f6a5888aac9889c5683736481fc1c471a8f39 diff --git a/packages/components/checkbox/Checkbox.tsx b/packages/components/checkbox/Checkbox.tsx index 23b526d21c..c0cb334413 100644 --- a/packages/components/checkbox/Checkbox.tsx +++ b/packages/components/checkbox/Checkbox.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import forwardRefWithStatics from '../_util/forwardRefWithStatics'; import Check from '../common/Check'; @@ -10,11 +10,16 @@ import type { CheckProps } from '../common/Check'; export type CheckboxProps = Omit; +const CheckboxButton = forwardRef((props, ref) => ( + (props, checkboxDefaultProps)} /> +)); +CheckboxButton.displayName = 'CheckboxButton'; + const Checkbox = forwardRefWithStatics( (props: CheckboxProps, ref: React.Ref) => ( (props, checkboxDefaultProps)} /> ), - { Group: CheckboxGroup }, + { Group: CheckboxGroup, Button: CheckboxButton }, ); Checkbox.displayName = 'Checkbox'; diff --git a/packages/components/checkbox/CheckboxGroup.tsx b/packages/components/checkbox/CheckboxGroup.tsx index 24e84c3a7f..77fcab1925 100644 --- a/packages/components/checkbox/CheckboxGroup.tsx +++ b/packages/components/checkbox/CheckboxGroup.tsx @@ -3,6 +3,7 @@ import classNames from 'classnames'; import { isNumber } from 'lodash-es'; import { CheckContext } from '../common/Check'; +import useCommonClassName from '../hooks/useCommonClassName'; import useConfig from '../hooks/useConfig'; import useControlled from '../hooks/useControlled'; import useDefaultProps from '../hooks/useDefaultProps'; @@ -47,6 +48,7 @@ const getCheckboxValue = (v: CheckboxOption) => { const CheckboxGroup = (props: CheckboxGroupProps) => { type ItemType = T[number]; const { classPrefix } = useConfig(); + const { SIZE: sizeMap } = useCommonClassName(); const { onChange, disabled, @@ -55,6 +57,10 @@ const CheckboxGroup = (props: children, max, options = [], + size, + theme, + variant, + direction, ...resetProps } = useDefaultProps>(props, checkboxGroupDefaultProps); @@ -67,7 +73,8 @@ const CheckboxGroup = (props: : React.Children.map( children, (child: ReactElement) => - (child?.type as any)?.displayName === Checkbox.displayName && child.props, + [Checkbox.displayName, Checkbox.Button.displayName].includes((child?.type as any)?.displayName) && + child.props, ) || []; const optionsWithoutCheckAll = intervalOptions.filter((t) => typeof t !== 'object' || !t.checkAll); @@ -194,23 +201,36 @@ const CheckboxGroup = (props: // options 和 children 的抉择,在未明确说明时，暂时以 options 优先 const useOptions = Array.isArray(options) && options.length !== 0; + // theme 为 button 时，使用按钮风格多选框渲染 + const Comp = theme === 'button' ? Checkbox.Button : Checkbox; + return ( -
+
{useOptions ? options.map((v: any, index) => { switch (typeof v) { case 'string': return ( - + {v} - + ); case 'number': { return ( - + {String(v)} - + ); } case 'object': { @@ -219,7 +239,7 @@ const CheckboxGroup = (props: return vs.checkAll ? ( ) : ( - { expect(container.firstChild.lastChild).toHaveClass('t-is-disabled'); }); }); + +describe('CheckboxGroup button theme', () => { + test('theme button renders checkbox-button with options', () => { + const { container } = render( + , + ); + const group = container.firstChild; + expect(group).toHaveClass('t-checkbox-group', 't-size-m', 't-checkbox-group--filled'); + expect(group.firstChild).toHaveClass('t-checkbox-button', 't-is-checked'); + expect(group.querySelector('.t-checkbox-button .t-checkbox__former')).not.toBeNull(); + expect(group.querySelector('.t-checkbox-button .t-checkbox__label')).not.toBeNull(); + }); + + test('theme button works with children', () => { + const { container } = render( + + 广州 + 深圳 + , + ); + expect(container.firstChild.firstChild).toHaveClass('t-checkbox-button', 't-is-checked'); + }); + + test('theme button works with max and children', () => { + const { container } = render( + + 广州 + 深圳 + 北京 + , + ); + fireEvent.click(container.firstChild.firstChild); + expect(container.firstChild.lastChild).toHaveClass('t-is-disabled'); + }); + + test('variant outline', () => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveClass('t-checkbox-group__outline'); + expect(container.firstChild).not.toHaveClass('t-checkbox-group--filled'); + }); + + test('variant primary-filled', () => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveClass('t-checkbox-group--filled', 't-checkbox-group--primary-filled'); + }); + + test('size', () => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveClass('t-size-s'); + }); + + test('direction vertical', () => { + const { container } = render( + , + ); + expect(container.firstChild).toHaveClass('t-checkbox-group--vertical'); + }); + + test('button theme does not affect default checkbox theme', () => { + const { container } = render(); + expect(container.firstChild).toHaveClass('t-checkbox-group'); + expect(container.firstChild).not.toHaveClass('t-size-m'); + expect(container.firstChild).not.toHaveClass('t-checkbox-group--filled'); + expect(container.firstChild.firstChild).toHaveClass('t-checkbox'); + }); + + test('button theme onChange', () => { + const fn = vi.fn(); + const { container } = render( + , + ); + fireEvent.click(container.firstChild.lastChild); + expect(fn).toBeCalledTimes(1); + }); +}); diff --git a/packages/components/checkbox/_example/button-size.tsx b/packages/components/checkbox/_example/button-size.tsx new file mode 100644 index 0000000000..aad79a4ac6 --- /dev/null +++ b/packages/components/checkbox/_example/button-size.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Checkbox, Space } from 'tdesign-react'; + +const options = [ + { value: 'view', label: '查看数据' }, + { value: 'edit', label: '编辑数据' }, + { value: 'export', label: '导出数据' }, +]; + +export default function CheckboxButtonSizeExample() { + return ( + + + 大尺寸 + + + + + 中尺寸（默认） + + + + + 小尺寸 + + + + ); +} diff --git a/packages/components/checkbox/_example/button-variant.tsx b/packages/components/checkbox/_example/button-variant.tsx new file mode 100644 index 0000000000..7b029e6a52 --- /dev/null +++ b/packages/components/checkbox/_example/button-variant.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Checkbox, Space } from 'tdesign-react'; + +const options = [ + { value: 'view', label: '查看数据' }, + { value: 'edit', label: '编辑数据' }, + { value: 'export', label: '导出数据' }, +]; + +export default function CheckboxButtonVariantExample() { + return ( + + + 描边形态 + + + + + 填充形态（默认） + + + + + 主色填充形态 + + + + + 纵向排列 + + + + ); +} diff --git a/packages/components/checkbox/_example/button.tsx b/packages/components/checkbox/_example/button.tsx new file mode 100644 index 0000000000..15534591ea --- /dev/null +++ b/packages/components/checkbox/_example/button.tsx @@ -0,0 +1,38 @@ +import React, { useState } from 'react'; +import { Checkbox, Space } from 'tdesign-react'; + +const options = [ + { value: 'view', label: '查看数据' }, + { value: 'edit', label: '编辑数据' }, + { value: 'export', label: '导出数据' }, + { value: 'approve', label: '允许审批' }, + { value: 'reject', label: '允许驳回' }, + { value: 'forward', label: '允许转发' }, + { value: 'delete', label: '删除数据', disabled: true }, +]; + +export default function CheckboxButtonExample() { + const [permissions, setPermissions] = useState(['view', 'edit']); + + return ( + + + 使用 options 渲染 +
已分配权限: {permissions.length ? permissions.join('、') : '无'}
+ theme="button" value={permissions} onChange={setPermissions} options={options} /> + + + + 使用插槽渲染 + + 北京 + 上海 + 广州 + + 深圳 + + + + + ); +} diff --git a/packages/components/checkbox/checkbox.en-US.md b/packages/components/checkbox/checkbox.en-US.md index b8aac877fa..8204e53acb 100644 --- a/packages/components/checkbox/checkbox.en-US.md +++ b/packages/components/checkbox/checkbox.en-US.md @@ -1,5 +1,23 @@ :: BASE_DOC :: +### Button-style Checkbox Groups + +Button-style checkbox groups arrange options as independent tag-like buttons horizontally or vertically, wrapping naturally when space is limited. Selected items use a filled background and work well for permission assignment, feature toggles, and other cases where users need to identify multiple selections quickly. + +{{ button }} + +### Button-style Checkbox Groups in Different Sizes + +Button-style checkbox groups are available in large, medium (default), and small sizes. + +{{ button-size }} + +### Button-style Checkbox Groups in Different Variants + +Button-style checkbox groups support outline, default-filled (default), and primary-filled variants, as well as vertical layout. + +{{ button-variant }} + ## API ### Checkbox Props @@ -27,11 +45,15 @@ name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N +direction | String | horizontal | Checkbox option arrangement。options: horizontal/vertical | N disabled | Boolean | - | \- | N max | Number | undefined | \- | N name | String | - | \- | N options | Array | - | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N readOnly | Boolean | undefined | \- | N +size | String | medium | works only when theme is button。options: small/medium/large。Typescript: `SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +theme | String | checkbox | Determine the style of checkbox when using options API。options: checkbox/button | N value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +variant | String | default-filled | works only when theme is button。options: outline/default-filled/primary-filled | N onChange | Function | | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/packages/components/checkbox/checkbox.md b/packages/components/checkbox/checkbox.md index e8a1d80f7d..55340087ce 100644 --- a/packages/components/checkbox/checkbox.md +++ b/packages/components/checkbox/checkbox.md @@ -1,5 +1,22 @@ :: BASE_DOC :: +### 按钮风格的多选框组 + +多选框组支持按钮风格，选项以独立标签式按钮横向或纵向排列，并可在空间不足时自然换行。选中项使用填充背景突出，适合权限分配、功能开关等需要快速识别多选结果的场景。 + +{{ button }} + +### 不同尺寸的按钮多选框组 + +提供大、中（默认）、小三种按钮风格的多选框组。 + +{{ button-size }} + +### 不同形态的按钮多选框组 + +提供描边、填充（默认）、主色填充三种形态，并支持纵向排列。 + +{{ button-variant }} ### 最多选中的数量 @@ -32,11 +49,15 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
-- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +direction | String | horizontal | 多选框按钮排列方式。可选项：horizontal/vertical | N disabled | Boolean | - | 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled | N max | Number | undefined | 支持最多选中的数量 | N name | String | - | 统一设置内部复选框 HTML 属性 | N options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean; name?: string; checkAll?: true }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N readOnly | Boolean | undefined | 只读状态 | N +size | String | medium | 组件尺寸，仅在 theme 为 button 生效。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N +theme | String | checkbox | 用于在使用 options 方式渲染时决定组件的风格。可选项：checkbox/button | N value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts) | N +variant | String | default-filled | 多选组件按钮形式，仅在 theme 为 button 生效。可选项：outline/default-filled/primary-filled | N onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`
值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: ChangeEvent; current: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/packages/components/checkbox/defaultProps.ts b/packages/components/checkbox/defaultProps.ts index 38f90f3812..ffa3132505 100644 --- a/packages/components/checkbox/defaultProps.ts +++ b/packages/components/checkbox/defaultProps.ts @@ -13,4 +13,11 @@ export const checkboxDefaultProps: TdCheckboxProps = { readOnly: false, }; -export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { max: undefined, defaultValue: [] }; +export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { + max: undefined, + defaultValue: [], + direction: 'horizontal', + size: 'medium', + theme: 'checkbox', + variant: 'default-filled', +}; diff --git a/packages/components/checkbox/type.ts b/packages/components/checkbox/type.ts index b7b0f6a378..558d262fb7 100644 --- a/packages/components/checkbox/type.ts +++ b/packages/components/checkbox/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, SizeEnum } from '../common'; import { MouseEvent, ChangeEvent } from 'react'; export interface TdCheckboxProps { @@ -76,6 +76,11 @@ export interface TdCheckboxProps { } export interface TdCheckboxGroupProps { + /** + * 多选框按钮排列方式 + * @default horizontal + */ + direction?: 'horizontal' | 'vertical'; /** * 是否禁用组件，默认为 false。CheckboxGroup.disabled 优先级低于 Checkbox.disabled */ @@ -102,6 +107,16 @@ export interface TdCheckboxGroupProps { * 只读状态 */ readOnly?: boolean; + /** + * 组件尺寸，仅在 theme 为 button 生效 + * @default medium + */ + size?: SizeEnum; + /** + * 用于在使用 options 方式渲染时决定组件的风格 + * @default checkbox + */ + theme?: 'checkbox' | 'button'; /** * 选中值 * @default [] @@ -112,6 +127,11 @@ export interface TdCheckboxGroupProps { * @default [] */ defaultValue?: T; + /** + * 多选组件按钮形式，仅在 theme 为 button 生效 + * @default default-filled + */ + variant?: 'outline' | 'default-filled' | 'primary-filled'; /** * 值变化时触发，`context.current` 表示当前变化的数据值，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中；`context.option` 表示当前变化的数据项 */ diff --git a/packages/components/common/Check.tsx b/packages/components/common/Check.tsx index c20ee652b3..68de10abc9 100644 --- a/packages/components/common/Check.tsx +++ b/packages/components/common/Check.tsx @@ -11,7 +11,7 @@ import type { TdCheckboxProps } from '../checkbox/type'; import type { StyledProps } from '../common'; export interface CheckProps extends TdCheckboxProps, StyledProps { - type: 'radio' | 'radio-button' | 'checkbox'; + type: 'radio' | 'radio-button' | 'checkbox' | 'checkbox-button'; allowUncheck?: boolean; title?: string; children?: React.ReactNode; @@ -55,7 +55,9 @@ const Check = forwardRef((_props, ref) => { const TOnChange: ( checked: boolean, - context: { e: ChangeEvent | MouseEvent }, + context: { + e: ChangeEvent | MouseEvent; + }, ) => void = onChange; const [internalChecked, setInternalChecked] = useControlled(props, 'checked', TOnChange); @@ -69,11 +71,14 @@ const Check = forwardRef((_props, ref) => { const readOnly = props.readOnly || props.readonly; const isDisabled = disabled || readOnly; + // checkbox-button 复用 checkbox 的内部元素类名（t-checkbox__former/input/label），仅根节点使用 t-checkbox-button + const innerType = type === 'checkbox-button' ? 'checkbox' : type; + const input = ( ((_props, ref) => { onClick={onInnerClick} > {input} - + {showLabel && ( - + {children || label} )} diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index e7669177f2..62d999a3b8 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -153756,6 +153756,1674 @@ exports[`csr snapshot test > csr test packages/components/upload/_example/single
`; +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\base.tsx 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\button.tsx 1`] = ` +
+
+
+
+
+ + 使用 options 渲染 + +
+
+
+ 已分配权限: + view、edit +
+
+
+
+ + + + + + + +
+
+
+
+
+
+
+ + 使用插槽渲染 + +
+
+
+ + + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\button-size.tsx 1`] = ` +
+
+
+
+
+ + 大尺寸 + +
+
+
+ + + +
+
+
+
+
+
+
+ + 中尺寸（默认） + +
+
+
+ + + +
+
+
+
+
+
+
+ + 小尺寸 + +
+
+
+ + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\button-variant.tsx 1`] = ` +
+
+
+
+
+ + 描边形态 + +
+
+
+ + + +
+
+
+
+
+
+
+ + 填充形态（默认） + +
+
+
+ + + +
+
+
+
+
+
+
+ + 主色填充形态 + +
+
+
+ + + +
+
+
+
+
+
+
+ + 纵向排列 + +
+
+
+ + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\controlled.tsx 1`] = ` +
+
+
+ +
+
+ +
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\group.tsx 1`] = ` +
+
+
+ +
+
+
+
+ + 写法一：使用 options + +
+
+
+ 选中值: + 广州 +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+ + 写法二：使用插槽 + +
+
+
+ 选中值: + 上海 +
+
+
+
+ + + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\link.tsx 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test packages\\components\\checkbox\\_example\\max.tsx 1`] = ` +
+
+
+
+ 最多可选: + +
+ +
+
+ +
+
+ +
+
+
+
+
+ 选中值: + 北京 +
+
+
+
+ + + + +
+
+
+
+`; + exports[`ssr snapshot test > ssr test packages/components/affix/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test packages/components/affix/_example/container.tsx 1`] = `"
"`; @@ -155033,3 +156701,19 @@ exports[`ssr snapshot test > ssr test packages/components/upload/_example/reques exports[`ssr snapshot test > ssr test packages/components/upload/_example/single-custom.tsx 1`] = `"
上传文件大小在 1M 以内
"`; exports[`ssr snapshot test > ssr test packages/components/upload/_example/single-input.tsx 1`] = `"

请选择文件
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button.tsx 1`] = `"
使用 options 渲染
已分配权限: view、edit
使用插槽渲染
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button-size.tsx 1`] = `"
大尺寸
中尺寸（默认）
小尺寸
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button-variant.tsx 1`] = `"
描边形态
填充形态（默认）
主色填充形态
纵向排列
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\controlled.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\group.tsx 1`] = `"
写法一：使用 options
选中值: 广州
写法二：使用插槽
选中值: 上海
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\link.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\max.tsx 1`] = `"
最多可选:
选中值: 北京
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index dd64f818d1..2056ec0e82 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1277,3 +1277,19 @@ exports[`ssr snapshot test > ssr test packages/components/upload/_example/reques exports[`ssr snapshot test > ssr test packages/components/upload/_example/single-custom.tsx 1`] = `"
上传文件大小在 1M 以内
"`; exports[`ssr snapshot test > ssr test packages/components/upload/_example/single-input.tsx 1`] = `"

请选择文件
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button.tsx 1`] = `"
使用 options 渲染
已分配权限: view、edit
使用插槽渲染
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button-size.tsx 1`] = `"
大尺寸
中尺寸（默认）
小尺寸
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\button-variant.tsx 1`] = `"
描边形态
填充形态（默认）
主色填充形态
纵向排列
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\controlled.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\group.tsx 1`] = `"
写法一：使用 options
选中值: 广州
写法二：使用插槽
选中值: 上海
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\link.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test packages\\components\\checkbox\\_example\\max.tsx 1`] = `"
最多可选:
选中值: 北京
"`;