diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index 0bf8a3ea..ae959985 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -3,7 +3,7 @@ export default { { title: 'Button 按钮', name: 'button', - component: () => import('tdesign-mobile-react/button/_example/index.jsx'), + component: () => import('tdesign-mobile-react/button/_example/index.tsx'), }, { title: 'Divider 分割符', diff --git a/src/_common b/src/_common index 762c4d5d..ffbad373 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 762c4d5d576db1262a4c26d03b133077422749ca +Subproject commit ffbad3732613184a4e44c80dca8192299dc51ad9 diff --git a/src/button/Button.tsx b/src/button/Button.tsx index d3e602ca..eaa346a8 100644 --- a/src/button/Button.tsx +++ b/src/button/Button.tsx @@ -2,13 +2,16 @@ import React, { forwardRef } from 'react'; import classnames from 'classnames'; import { LoadingIcon } from 'tdesign-icons-react'; import useConfig from '../_util/useConfig'; +import parseTNode from '../_util/parseTNode'; import { TdButtonProps } from './type'; import noop from '../_util/noop'; import { buttonDefaultProps } from './defaultProps'; -export interface ButtonProps extends TdButtonProps, Omit, 'content'> {} +export interface ButtonProps + extends TdButtonProps, + Omit, 'content' | 'children'> {} -const Button = forwardRef((props: ButtonProps, ref: React.Ref) => { +const Button = forwardRef((props, ref) => { const { className = '', style, @@ -18,6 +21,7 @@ const Button = forwardRef((props: ButtonProps, ref: React.Ref disabled, ghost, icon = null, + suffix = null, loading, shape, size, @@ -25,32 +29,39 @@ const Button = forwardRef((props: ButtonProps, ref: React.Ref type, variant, onClick = noop, + loadingProps = {}, } = props; const { classPrefix } = useConfig(); + const childNode = content || children; + return ( ); }); diff --git a/src/button/__tests__/__snapshots__/button.test.tsx.snap b/src/button/__tests__/__snapshots__/button.test.tsx.snap index 9634eee3..86900363 100644 --- a/src/button/__tests__/__snapshots__/button.test.tsx.snap +++ b/src/button/__tests__/__snapshots__/button.test.tsx.snap @@ -2,7 +2,7 @@ exports[`Button 组件测试 > content 1`] = ` 按钮组件 diff --git a/src/button/_example/base.jsx b/src/button/_example/base.jsx deleted file mode 100644 index c06a4d0e..00000000 --- a/src/button/_example/base.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; -import { Button } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; - -export default function () { - return ( - <> -
- - - - - - -
- -
- -
-
- -
-
- -
-
- - -
- -
-
- - -
-
- - -
-
- -
-
- - -
-
- - ); -} diff --git a/src/button/_example/base.tsx b/src/button/_example/base.tsx new file mode 100644 index 00000000..0043c8e5 --- /dev/null +++ b/src/button/_example/base.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( + <> +
+ + + +
+
+ + + +
+ + ); +} diff --git a/src/button/_example/block.tsx b/src/button/_example/block.tsx new file mode 100644 index 00000000..b424ea55 --- /dev/null +++ b/src/button/_example/block.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ +
+ ); +} diff --git a/src/button/_example/ghost.tsx b/src/button/_example/ghost.tsx new file mode 100644 index 00000000..ad5fdf11 --- /dev/null +++ b/src/button/_example/ghost.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ + + +
+ ); +} diff --git a/src/button/_example/group.tsx b/src/button/_example/group.tsx new file mode 100644 index 00000000..438e2653 --- /dev/null +++ b/src/button/_example/group.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ + +
+ ); +} diff --git a/src/button/_example/icon.tsx b/src/button/_example/icon.tsx new file mode 100644 index 00000000..1870e626 --- /dev/null +++ b/src/button/_example/icon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +export default function () { + return ( +
+ + +
+ ); +} diff --git a/src/button/_example/index.jsx b/src/button/_example/index.jsx deleted file mode 100644 index 740c7bea..00000000 --- a/src/button/_example/index.jsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import './style/index.less'; -import BaseButtonDemo from './base'; -import SizeButtonDemo from './size'; -import StatusButtonDemo from './status'; - -export default function Base() { - return ( -
- - - - - - - - - - -
- -
- -
- ); -} diff --git a/src/button/_example/index.tsx b/src/button/_example/index.tsx new file mode 100644 index 00000000..acd99688 --- /dev/null +++ b/src/button/_example/index.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import './style/index.less'; +import BaseDemo from './base'; +import IconDemo from './icon'; +import GhostDemo from './ghost'; +import GroupDemo from './group'; +import BlockDemo from './block'; +import SizeDemo from './size'; +import StatusDemo from './status'; +import ShapeDemo from './shape'; +import ThemeDemo from './theme'; + +export default function Base() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/button/_example/shape.tsx b/src/button/_example/shape.tsx new file mode 100644 index 00000000..56b47cde --- /dev/null +++ b/src/button/_example/shape.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +export default function () { + return ( + <> +
+ + + + +
+ + + ); +} diff --git a/src/button/_example/size.jsx b/src/button/_example/size.jsx deleted file mode 100644 index fd2cc89a..00000000 --- a/src/button/_example/size.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import { Button } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; - -export default function () { - return ( - <> -
- - - -
-
- - - -
-
- - - -
-
- - - -
- - ); -} diff --git a/src/button/_example/size.tsx b/src/button/_example/size.tsx new file mode 100644 index 00000000..96ac27e2 --- /dev/null +++ b/src/button/_example/size.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+ + + + +
+ ); +} diff --git a/src/button/_example/status.jsx b/src/button/_example/status.jsx deleted file mode 100644 index c33ab15a..00000000 --- a/src/button/_example/status.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { Button } from 'tdesign-mobile-react'; -import { Icon } from 'tdesign-icons-react'; -import { useSetState } from 'ahooks'; - -export default function () { - const [disabled] = useSetState(true); - - return ( - <> -
- - - - - - -
- -
- -
-
- -
-
- -
-
- - -
- -
-
- - -
-
- - -
-
- -
-
- - -
-
- - ); -} diff --git a/src/button/_example/status.tsx b/src/button/_example/status.tsx new file mode 100644 index 00000000..0161863f --- /dev/null +++ b/src/button/_example/status.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( + <> +
+ + + +
+
+ + + +
+ + ); +} diff --git a/src/button/_example/style/index.less b/src/button/_example/style/index.less index 32e3ef03..101185da 100644 --- a/src/button/_example/style/index.less +++ b/src/button/_example/style/index.less @@ -1,47 +1,73 @@ -.button-demo { - padding: 0 16px; +.tdesign-mobile-demo { + background-color: #ffffff; + padding-bottom: 28px; + box-sizing: border-box; - .t-button { - margin-bottom: 16px; - } + &-block { + .row { + display: flex; + padding: 0 16px; + } -} + .row + .row { + margin-top: 16px; + } -.margin-button { - .t-button { - margin-bottom: 16px; - } -} + .t-button + .t-button { + margin-left: 16px; + } -.margin-right { - .t-button:not(:last-child) { - margin-right: 16px; - } -} + .rectangle-button { + border-radius: 0; + } -.no-border-radius { - .t-button { - border-radius: 0; - } -} + .section { + &-shape, + &-size { + display: flex; + justify-content: space-between; -.no-border { - .t-button { - border: 0 ; - } -} + .t-button + .t-button { + margin-left: 0; + } + } -.flex { - display: flex; -} + &-shape { + margin: 0 0 16px 0; + } -.align-center { - flex-direction: row; - align-items: center; -} + &-group { + margin: 0; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px; + + .t-button + .t-button { + margin-left: 0; + } + } -.align-bottom { - display: flex; - flex-direction: row; - align-items: flex-end; + &-ghost { + padding: 16px; + background-color: #181818; + } + + &-theme { + position: relative; + width: 100%; + overflow-y: auto; + + & > .row { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + width: max-content; + } + + .t-button + .t-button { + margin-left: 0; + } + } + } + } } diff --git a/src/button/_example/test.jsx b/src/button/_example/test.tsx similarity index 100% rename from src/button/_example/test.jsx rename to src/button/_example/test.tsx diff --git a/src/button/_example/theme.tsx b/src/button/_example/theme.tsx new file mode 100644 index 00000000..4f76a5a8 --- /dev/null +++ b/src/button/_example/theme.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { Button } from 'tdesign-mobile-react'; + +export default function () { + return ( +
+
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+
+ ); +} diff --git a/src/button/button.md b/src/button/button.md index fb210bf0..1695c142 100644 --- a/src/button/button.md +++ b/src/button/button.md @@ -8,15 +8,122 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N block | Boolean | false | 是否为块级元素 | 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 +children | TNode | - | 按钮内容，同 content。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N disabled | Boolean | false | 是否禁用按钮 | N ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N -icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +icon | TElement | - | 按钮内部图标，可完全自定义。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N loading | Boolean | false | 是否显示为加载状态 | N +loadingProps | Object | - | 透传 Loading 组件全部属性。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/button/type.ts) | N shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | 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/danger | N +size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large | N +suffix | TElement | - | 右侧内容，可用于定义右侧图标。TS 类型：`TElement`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +theme | String | default | 组件风格，依次为默认色、品牌色、危险色、淡雅主色。可选项：default/primary/danger/light | N type | String | button | 按钮类型。可选项：submit/reset/button | N -variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/text | N +variant | String | base | 按钮形式，基础、线框、虚线、文字。可选项：base/outline/dashed/text | N onClick | Function | | TS 类型：`(e: MouseEvent) => void`
点击时触发 | N + +### CSS Variables + +组件提供了下列 CSS 变量，可用于自定义样式。 +名称 | 默认值 | 描述 +-- | -- | -- +--td-button-border-radius | @radius-default | - +--td-button-border-width | 2px | - +--td-button-danger-active-bg-color | @error-color-7 | - +--td-button-danger-active-border-color | @error-color-7 | - +--td-button-danger-bg-color | @error-color | - +--td-button-danger-border-color | @error-color | - +--td-button-danger-color | @font-white-1 | - +--td-button-danger-dashed-border-color | @button-danger-dashed-color | - +--td-button-danger-dashed-color | @error-color | - +--td-button-danger-dashed-disabled-color | @button-danger-disabled-color | - +--td-button-danger-disabled-bg | @error-color-3 | - +--td-button-danger-disabled-border-color | @error-color-3 | - +--td-button-danger-disabled-color | @font-white-1 | - +--td-button-danger-outline-active-bg-color | @bg-color-container-active | - +--td-button-danger-outline-active-border-color | @error-color-7 | - +--td-button-danger-outline-border-color | @button-danger-outline-color | - +--td-button-danger-outline-color | @error-color | - +--td-button-danger-outline-disabled-color | @error-color-3 | - +--td-button-danger-text-active-bg-color | @bg-color-container-active | - +--td-button-danger-text-color | @error-color | - +--td-button-danger-text-disabled-color | @button-danger-disabled-color | - +--td-button-default-active-bg-color | @bg-color-component-active | - +--td-button-default-active-border-color | @bg-color-component-active | - +--td-button-default-bg-color | @bg-color-component | - +--td-button-default-border-color | @bg-color-component | - +--td-button-default-color | @font-gray-1 | - +--td-button-default-disabled-bg | @bg-color-component-disabled | - +--td-button-default-disabled-border-color | @bg-color-component-disabled | - +--td-button-default-disabled-color | @font-gray-4 | - +--td-button-default-outline-active-bg-color | @bg-color-container-active | - +--td-button-default-outline-active-border-color | @component-border | - +--td-button-default-outline-border-color | @component-border | - +--td-button-default-outline-color | @font-gray-1 | - +--td-button-default-outline-disabled-color | @component-border | - +--td-button-default-text-active-bg-color | @bg-color-container-active | - +--td-button-extra-small-font-size | @font-size-base | - +--td-button-extra-small-height | 28px | - +--td-button-extra-small-icon-font-size | 18px | - +--td-button-extra-small-padding-horizontal | 8px | - +--td-button-font-weight | 600 | - +--td-button-ghost-border-color | @button-ghost-color | - +--td-button-ghost-color | @bg-color-container | - +--td-button-ghost-danger-border-color | @error-color | - +--td-button-ghost-danger-color | @error-color | - +--td-button-ghost-danger-hover-color | @error-color-active | - +--td-button-ghost-disabled-color | rgba(255, 255, 255, .35) | - +--td-button-ghost-hover-color | @font-white-2 | - +--td-button-ghost-primary-border-color | @brand-color | - +--td-button-ghost-primary-color | @brand-color | - +--td-button-ghost-primary-hover-color | @brand-color-active | - +--td-button-icon-border-radius | 4px | - +--td-button-icon-spacer | @spacer | - +--td-button-large-font-size | @font-size-m | - +--td-button-large-height | 48px | - +--td-button-large-icon-font-size | 24px | - +--td-button-large-padding-horizontal | 20px | - +--td-button-light-active-bg-color | @brand-color-light-active | - +--td-button-light-active-border-color | @brand-color-light-active | - +--td-button-light-bg-color | @brand-color-light | - +--td-button-light-border-color | @brand-color-light | - +--td-button-light-color | @brand-color | - +--td-button-light-disabled-bg | @brand-color-light | - +--td-button-light-disabled-border-color | @brand-color-light | - +--td-button-light-disabled-color | @brand-color-disabled | - +--td-button-light-outline-active-bg-color | @brand-color-light-active | - +--td-button-light-outline-active-border-color | @brand-color-active | - +--td-button-light-outline-bg-color | @brand-color-light | - +--td-button-light-outline-border-color | @button-light-outline-color | - +--td-button-light-outline-color | @brand-color | - +--td-button-light-outline-disabled-color | @brand-color-disabled | - +--td-button-light-text-active-bg-color | @bg-color-container-active | - +--td-button-light-text-color | @brand-color | - +--td-button-medium-font-size | @font-size-m | - +--td-button-medium-height | 40px | - +--td-button-medium-icon-font-size | 20px | - +--td-button-medium-padding-horizontal | 16px | - +--td-button-primary-active-bg-color | @brand-color-active | - +--td-button-primary-active-border-color | @brand-color-active | - +--td-button-primary-bg-color | @brand-color | - +--td-button-primary-border-color | @brand-color | - +--td-button-primary-color | @font-white-1 | - +--td-button-primary-dashed-border-color | @button-primary-dashed-color | - +--td-button-primary-dashed-color | @brand-color | - +--td-button-primary-dashed-disabled-color | @brand-color-disabled | - +--td-button-primary-disabled-bg | @brand-color-disabled | - +--td-button-primary-disabled-border-color | @brand-color-disabled | - +--td-button-primary-disabled-color | @font-white-1 | - +--td-button-primary-outline-active-bg-color | @bg-color-container-active | - +--td-button-primary-outline-active-border-color | @brand-color-active | - +--td-button-primary-outline-border-color | @button-primary-outline-color | - +--td-button-primary-outline-color | @brand-color | - +--td-button-primary-outline-disabled-color | @brand-color-disabled | - +--td-button-primary-text-active-bg-color | @bg-color-container-active | - +--td-button-primary-text-color | @brand-color | - +--td-button-primary-text-disabled-color | @brand-color-disabled | - +--td-button-small-font-size | @font-size-base | - +--td-button-small-height | 32px | - +--td-button-small-icon-font-size | 18px | - +--td-button-small-padding-horizontal | 12px | - \ No newline at end of file diff --git a/src/button/style/index.js b/src/button/style/index.js index 039702ee..6fbb8ed2 100644 --- a/src/button/style/index.js +++ b/src/button/style/index.js @@ -1 +1 @@ -import '../../_common/style/mobile/components/button/_index.less'; +import '../../_common/style/mobile/components/button/v2/_index.less'; diff --git a/src/button/type.ts b/src/button/type.ts index ccfdc317..dfef8265 100644 --- a/src/button/type.ts +++ b/src/button/type.ts @@ -4,6 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ +import { LoadingProps } from '../loading'; import { TNode, TElement, SizeEnum } from '../common'; import { MouseEvent } from 'react'; @@ -35,11 +36,19 @@ export interface TdButtonProps { * 按钮内部图标，可完全自定义 */ icon?: TElement; + /** + * 右侧内容，可用于定义右侧图标 + */ + suffix?: TElement; /** * 是否显示为加载状态 * @default false */ loading?: boolean; + /** + * 透传 Loading 组件全部属性 + */ + loadingProps?: LoadingProps; /** * 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形 * @default rectangle @@ -49,12 +58,12 @@ export interface TdButtonProps { * 组件尺寸 * @default medium */ - size?: SizeEnum; + size?: 'extra-small' | 'small' | 'medium' | 'large'; /** * 组件风格，依次为品牌色、危险色 * @default default */ - theme?: 'default' | 'primary' | 'danger'; + theme?: 'default' | 'primary' | 'danger' | 'light'; /** * 按钮类型 * @default button @@ -64,7 +73,7 @@ export interface TdButtonProps { * 按钮形式，基础、线框、文字 * @default base */ - variant?: 'base' | 'outline' | 'text'; + variant?: 'base' | 'outline' | 'dashed' | 'text'; /** * 点击时触发 */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index b12e9098..a55457a8 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -6,22 +6,22 @@ exports[`csr snapshot test > csr test src/back-top/_example/base.tsx 1`] = ` class="button-group" > + + + +
+ + + +
+ +`; + +exports[`csr snapshot test > csr test src/button/_example/block.tsx 1`] = ` +
+
+ +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/ghost.tsx 1`] = ` +
+
+ + + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/group.tsx 1`] = ` +
+
+ + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/icon.tsx 1`] = ` +
+
+ + + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/index.tsx 1`] = ` +
+
+
+

+ Button 按钮 +

+

+ 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。 +

+
+
+
+

+ 01 组件类型 +

+

+ 基础按钮 +

+
+
+
+ + + +
+
+ + + +
+
+
+
+
+

+ 图标按钮 +

+
+
+
+ + + +
+
+
+
+
+

+ 幽灵按钮 +

+
+
+
+ + + +
+
+
+
+
+

+ 组合按钮 +

+
+
+
+ + +
+
+
+
+
+

+ 通栏按钮 +

+
+
+
+ +
+
+
+
+
+

+ 02 组件状态 +

+

+ 按钮禁用态 +

+
+
+
+ + + +
+
+ + + +
+
+
+
+
+

+ 03 组件样式 +

+

+ 按钮尺寸 +

+
+
+
+ + + + +
+
+
+
+
+

+ 按钮形状 +

+
+
+
+ + + + +
+ +
+
+
+
+

+ 按钮主题 +

+
+
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/shape.tsx 1`] = ` +
+
+ + + + +
+ +
+`; + +exports[`csr snapshot test > csr test src/button/_example/size.tsx 1`] = ` +
+
+ + + + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/status.tsx 1`] = ` +
+
+ + + +
+
+ + + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/test.tsx 1`] = ` +
+
+ + +
+
+ + +
+
+`; + +exports[`csr snapshot test > csr test src/button/_example/theme.tsx 1`] = ` +
+
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+
+`; + exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = `
csr test src/input/_example/suffix.tsx 1`] = ` class="t-input__wrap--suffix" >
"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; + +exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `"

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

"`; + +exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/status.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; @@ -13713,7 +15216,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `" ssr test src/input/_example/status.tsx 1`] = `"
标签文字
辅助说明
不可编辑
"`; -exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; @@ -13745,7 +15248,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `" ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; @@ -13753,17 +15256,17 @@ exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `" ssr test src/loading/_example/vert.tsx 1`] = `"
加载中
加载中...
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

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

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

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

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; @@ -13771,17 +15274,17 @@ exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; -exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

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

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; @@ -13805,13 +15308,13 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

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

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index bc40f347..4b4b4d03 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1,8 +1,30 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; +exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部

形状

"`; + +exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/block.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/ghost.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/group.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/icon.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/index.tsx 1`] = `"

Button 按钮

按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。

01 组件类型

基础按钮

图标按钮

幽灵按钮

组合按钮

通栏按钮

02 组件状态

按钮禁用态

03 组件样式

按钮尺寸

按钮形状

按钮主题

"`; + +exports[`ssr snapshot test > ssr test src/button/_example/shape.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/size.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/status.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"
"`; + +exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"

Cell 单元格

一行内容/功能的垂直排列方式。一行项目左侧为主要内容展示区域，右侧可增加更多操作内容

01 类型

单行单元格

单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题

02

多行单元格

单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行高度不定，长文本自动换行，该选项的描述是一段很长的内容
一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容
多行带头像
一段很长很长的内容文字
多行带图片
一段很长很长的内容文字

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; @@ -64,7 +86,7 @@ exports[`ssr snapshot test > ssr test src/input/_example/special.tsx 1`] = `" ssr test src/input/_example/status.tsx 1`] = `"
标签文字
辅助说明
不可编辑
"`; -exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; +exports[`ssr snapshot test > ssr test src/input/_example/suffix.tsx 1`] = `"
标签文字
标签文字
标签文字
"`; exports[`ssr snapshot test > ssr test src/link/_example/base.tsx 1`] = `"
跳转链接跳转链接
"`; @@ -96,7 +118,7 @@ exports[`ssr snapshot test > ssr test src/loading/_example/index.tsx 1`] = `" ssr test src/loading/_example/pure-text.tsx 1`] = `"
加载中...
"`; -exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; +exports[`ssr snapshot test > ssr test src/loading/_example/service.tsx 1`] = `"
Loading 挂载容器
"`; exports[`ssr snapshot test > ssr test src/loading/_example/size.tsx 1`] = `"
大尺寸
加载中...
中尺寸
加载中...
小尺寸
加载中...
"`; @@ -104,17 +126,17 @@ exports[`ssr snapshot test > ssr test src/loading/_example/speed.tsx 1`] = `" ssr test src/loading/_example/vert.tsx 1`] = `"
加载中
加载中...
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

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

Overlay 遮罩层

通过遮罩层，可以强调部分内容

01 组件

基础遮罩层

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/popup/_example/index.tsx 1`] = `"

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

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

Popup 弹窗层

由其他控件触发，屏幕滑出或弹出一块自定义内容区域

01 组件类型

基础弹出层

01 组件示例

应用示例

"`; -exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/popup/_example/with-title.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/progress/_example/base.tsx 1`] = `"
80%
80%
30%
"`; @@ -122,17 +144,17 @@ exports[`ssr snapshot test > ssr test src/progress/_example/circle.tsx 1`] = `"< exports[`ssr snapshot test > ssr test src/progress/_example/custom.tsx 1`] = `"
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/index.tsx 1`] = `"

Progress 进度条

展示操作的当前进度

01 类型

基础进度条

80%
80%
30%

过渡样式

88%

自定义颜色/圆角

88%
88%

02 组件状态

线性进度条

80%

百分比内显进度条

80%
88%
88%
88%

环形进度条

80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/line.tsx 1`] = `"
80%
"`; exports[`ssr snapshot test > ssr test src/progress/_example/plump.tsx 1`] = `"
80%
88%
88%
88%
"`; -exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; +exports[`ssr snapshot test > ssr test src/progress/_example/transition.tsx 1`] = `"
88%
"`; exports[`ssr snapshot test > ssr test src/result/_example/custom.tsx 1`] = `"
自定义结果
描述文字
"`; -exports[`ssr snapshot test > ssr test src/result/_example/index.tsx 1`] = `"

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

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

Result 结果

结果反馈

01类型

不同结果反馈

成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字

自定义结果

自定义结果
描述文字

页面位置展示

"`; exports[`ssr snapshot test > ssr test src/result/_example/theme.tsx 1`] = `"
成功状态
描述文字
失败状态
描述文字
警示状态
描述文字
默认状态
描述文字
"`; @@ -156,13 +178,13 @@ exports[`ssr snapshot test > ssr test src/skeleton/_example/image-group.tsx 1`] exports[`ssr snapshot test > ssr test src/skeleton/_example/theme.tsx 1`] = `"
头像骨架屏
图片骨架屏
文本骨架屏
段落骨架屏
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/base.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/container.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/index.tsx 1`] = `"

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

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

Sticky 吸顶

用于常驻页面顶部的信息，操作展示

基础吸顶

吸顶距离

指定容器

"`; -exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/sticky/_example/offset.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tag/_example/checkable.tsx 1`] = `"
可选中的标签
light
未选中态已选中态
dark
未选中态已选中态
outline
未选中态已选中态
light-outline
未选中态已选中态
"`;