diff --git a/src/_common b/src/_common index 7337bf69e..e8935e057 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 7337bf69e1a3ab011891a3722ae83b7c6c39611c +Subproject commit e8935e05712a52a0ac37e0a65fc793b3491cb781 diff --git a/src/avatar/__tests__/avatar.test.tsx b/src/avatar/__tests__/avatar.test.tsx index 669d25371..d6fb98f3a 100644 --- a/src/avatar/__tests__/avatar.test.tsx +++ b/src/avatar/__tests__/avatar.test.tsx @@ -43,7 +43,7 @@ describe('Avatar', () => { const count = 8; const { container } = render(} />); expect(container.querySelector('.t-badge--basic')).toBeTruthy(); - expect(container.querySelector('.t-badge--basic').innerHTML.trim()).toBe(`${count}`); + expect(container.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe(`${count}`); }); it(': size', () => { diff --git a/src/badge/Badge.tsx b/src/badge/Badge.tsx index 7732675a0..1a5b21a9c 100644 --- a/src/badge/Badge.tsx +++ b/src/badge/Badge.tsx @@ -11,14 +11,12 @@ import { usePrefixClass } from '../hooks/useClass'; export interface BadgeProps extends TdBadgeProps, StyledProps {} -const hasUnit = (unit: string) => - unit.indexOf('px') > 0 || - unit.indexOf('rpx') > 0 || - unit.indexOf('em') > 0 || - unit.indexOf('rem') > 0 || - unit.indexOf('%') > 0 || - unit.indexOf('vh') > 0 || - unit.indexOf('vm') > 0; +const hasUnit = (value: string): boolean => /px|rpx|em|rem|%|vh|vw/.test(value); + +const addUnit = (value: string | number): string => { + const strValue = value.toString(); + return hasUnit(strValue) ? strValue : `${value}px`; +}; const Badge = forwardRef((originProps, ref) => { const props = useDefaultProps(originProps, badgeDefaultProps); @@ -27,22 +25,38 @@ const Badge = forwardRef((originProps, ref) => { const { classPrefix } = useConfig(); const badgeClass = usePrefixClass('badge'); + const childNode = content || children; + // 徽标自定义样式 const badgeInnerStyles = useMemo(() => { - const mergedStyle: React.CSSProperties = {}; - if (color) mergedStyle.backgroundColor = color; - if (offset && Array.isArray(offset)) { - const [right = 0, top = 0]: Array = offset; - mergedStyle.right = hasUnit(right.toString()) ? right : `${right}px`; - mergedStyle.top = hasUnit(top.toString()) ? top : `${top}px`; + const styles: React.CSSProperties = {}; + if (color) styles.backgroundColor = color; + const [xOffset = 0, yOffset = 0]: Array = offset || []; + + if (xOffset) { + styles.left = `calc(100% + ${addUnit(xOffset)})`; + } + + if (yOffset) { + styles.top = addUnit(yOffset); } - return mergedStyle; + + return styles; }, [color, offset]); + // 是否使用外层类名 + const useOuterClass = useMemo(() => { + const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left']; + if (content || !target.includes(shape)) { + return false; + } + return !parseTNode(childNode); + }, [content, shape, childNode]); + // 徽标外层样式类 const badgeClasses = classNames(className, { [`${badgeClass}`]: true, - [`${badgeClass}__ribbon-outer`]: shape === 'ribbon', + [`${badgeClass}__${shape}-outer`]: useOuterClass, }); // 徽标内层样式类 @@ -78,8 +92,6 @@ const Badge = forwardRef((originProps, ref) => { return parseTNode(count); }, [dot, count, maxCount, showZero]); - const childNode = content || children; - const readerContent = () => { if (typeof content === 'string') { return {content}; @@ -91,7 +103,7 @@ const Badge = forwardRef((originProps, ref) => { if (!isShowBadge) return null; return (
- {readerCount} +
{readerCount}
); }; diff --git a/src/badge/__tests__/index.test.tsx b/src/badge/__tests__/index.test.tsx index 57bde69f3..40c717e51 100644 --- a/src/badge/__tests__/index.test.tsx +++ b/src/badge/__tests__/index.test.tsx @@ -53,11 +53,11 @@ describe('Badge', () => { it(':count', () => { const { container } = render(); - expect(container.querySelector('.t-badge--basic').innerHTML.trim()).toBe('99'); + expect(container.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('99'); const { container: container2 } = render( 33} />); - expect(container2.querySelector('.t-badge--basic').innerHTML.trim()).toBe('33'); + expect(container2.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('33'); const { container: container3 } = render(); - expect(container3.querySelector('.t-badge--basic')).toBe(null); + expect(container3.querySelector('.t-badge--basic > .t-badge__count')).toBe(null); }); it(':dot', () => { @@ -67,21 +67,19 @@ describe('Badge', () => { it(':maxCount', () => { const { container } = render(); - expect(container.querySelector('.t-badge--basic').innerHTML.trim()).toBe('99+'); + expect(container.querySelector('.t-badge--basic > .t-badge__count').innerHTML.trim()).toBe('99+'); }); it(':offset', () => { const { container } = render(); expect(container.querySelector('.t-badge--basic').getAttribute('style')) - .contain('right: 10px;') + .contain('left: calc(100% + 10px);') .contain('top: 10px;'); const { container: container1 } = render(); - expect(container1.querySelector('.t-badge--basic').getAttribute('style')) - .contain('right: 0px;') - .contain('top: 0px;'); + expect(container1.querySelector('.t-badge--basic').getAttribute('style')).toBe(null); const { container: container2 } = render(); expect(container2.querySelector('.t-badge--basic').getAttribute('style')) - .contain('right: 10em;') + .contain('left: calc(100% + 10em);') .contain('top: 10rem;'); }); diff --git a/src/badge/_example/base.tsx b/src/badge/_example/base.tsx index c15ee298f..e5e782e73 100644 --- a/src/badge/_example/base.tsx +++ b/src/badge/_example/base.tsx @@ -18,8 +18,8 @@ export default function BaseBadge() {
数字徽标
- - + + diff --git a/src/badge/_example/size.tsx b/src/badge/_example/size.tsx index 16373bf0a..a58ae0dcc 100644 --- a/src/badge/_example/size.tsx +++ b/src/badge/_example/size.tsx @@ -10,7 +10,7 @@ export default function SizeBadge() { } size="large" badgeProps={{ count: 8, size: 'large', offset: [7, 7] }} />
-
Middle
+
Medium
} badgeProps={{ count: 8, offset: [5, 5] }} />
diff --git a/src/badge/_example/theme.tsx b/src/badge/_example/theme.tsx index 3b2161e59..b04332006 100644 --- a/src/badge/_example/theme.tsx +++ b/src/badge/_example/theme.tsx @@ -7,14 +7,14 @@ export default function ThemeBadge() { <>
圆形徽标
- +
方形徽标
- +
@@ -29,7 +29,18 @@ export default function ThemeBadge() {
角标
- }> + }> + }> + +
+ 三角角标 +
+ }> + } + > ); } diff --git a/src/badge/badge.en-US.md b/src/badge/badge.en-US.md index 1c31465f8..8243f4718 100644 --- a/src/badge/badge.en-US.md +++ b/src/badge/badge.en-US.md @@ -2,21 +2,20 @@ ## API - ### Badge Props name | type | default | description | required -- | -- | -- | -- | -- className | String | - | className of component | N -style | Object | - | CSS(Cascading Style Sheets),Typescript:`React.CSSProperties` | N -children | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +style | Object | - | CSS(Cascading Style Sheets),Typescript: `React.CSSProperties` | N +children | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N color | String | - | \- | N -content | TNode | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -count | TNode | 0 | Typescript:`string \| number \| 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 +count | TNode | 0 | Typescript: `string \| number \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N dot | Boolean | false | \- | N maxCount | Number | 99 | \- | N -offset | Array | - | Typescript:`Array` | N -shape | String | circle | options: circle/square/bubble/ribbon | N +offset | Array | - | Typescript: `Array` | N +shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N showZero | Boolean | false | \- | N size | String | medium | options: medium/large | N @@ -31,9 +30,10 @@ Name | Default Value | Description --td-badge-bg-color | @error-color | - --td-badge-border-radius | 2px | - --td-badge-bubble-border-radius | 10px 10px 10px 1px | - +--td-badge-content-text-color | @text-color-primary | - --td-badge-dot-size | 8px | - --td-badge-font | @font-mark-extraSmall | - --td-badge-large-font | @font-mark-small | - --td-badge-large-height | 20px | - --td-badge-large-padding | 5px | - ---td-badge-text-color | @font-white-1 | - +--td-badge-text-color | @text-color-anti | - diff --git a/src/badge/badge.md b/src/badge/badge.md index 7022eccea..1e729ea0d 100644 --- a/src/badge/badge.md +++ b/src/badge/badge.md @@ -15,7 +15,7 @@ count | TNode | 0 | 徽标右上角内容。可以是数字,也可以是文字 dot | Boolean | false | 是否为红点 | N maxCount | Number | 99 | 封顶的数字值 | N offset | Array | - | 设置状态点的位置偏移,示例:[-10, 20] 或 ['10em', '8rem']。TS 类型:`Array` | N -shape | String | circle | 形状。可选项:circle/square/bubble/ribbon | N +shape | String | circle | 徽标形状,其中 ribbon 和 ribbon-right 等效。可选项:circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N showZero | Boolean | false | 当数值为 0 时,是否展示徽标 | N size | String | medium | 尺寸。可选项:medium/large | N @@ -30,9 +30,10 @@ size | String | medium | 尺寸。可选项:medium/large | N --td-badge-bg-color | @error-color | - --td-badge-border-radius | 2px | - --td-badge-bubble-border-radius | 10px 10px 10px 1px | - +--td-badge-content-text-color | @text-color-primary | - --td-badge-dot-size | 8px | - --td-badge-font | @font-mark-extraSmall | - --td-badge-large-font | @font-mark-small | - --td-badge-large-height | 20px | - --td-badge-large-padding | 5px | - ---td-badge-text-color | @font-white-1 | - +--td-badge-text-color | @text-color-anti | - diff --git a/src/badge/type.ts b/src/badge/type.ts index 1b787c7a0..c6efa5873 100644 --- a/src/badge/type.ts +++ b/src/badge/type.ts @@ -40,10 +40,18 @@ export interface TdBadgeProps { */ offset?: Array; /** - * 形状 + * 徽标形状,其中 ribbon 和 ribbon-right 等效 * @default circle */ - shape?: 'circle' | 'square' | 'bubble' | 'ribbon'; + shape?: + | 'circle' + | 'square' + | 'bubble' + | 'ribbon' + | 'ribbon-right' + | 'ribbon-left' + | 'triangle-right' + | 'triangle-left'; /** * 当数值为 0 时,是否展示徽标 * @default false diff --git a/src/tabs/_example/badge.tsx b/src/tabs/_example/badge.tsx index 8f7a86728..2258138ce 100644 --- a/src/tabs/_example/badge.tsx +++ b/src/tabs/_example/badge.tsx @@ -4,8 +4,8 @@ import { Tabs, TabPanel } from 'tdesign-mobile-react'; export default () => (
- - + +
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 6ef3d3795..4e691d0c8 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -1573,7 +1573,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/grid.tsx 1`] = `
+ > +
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
+ > +
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
+ > +
+
csr test src/action-sheet/_example/grid.tsx 1`] = `
- 99 +
+ 99 +
@@ -3252,7 +3268,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
+ > +
+
@@ -3282,9 +3302,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
- 8 +
+ 8 +
@@ -3315,9 +3339,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
- 99 +
+ 99 +
@@ -3348,9 +3376,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
- 99+ +
+ 99+ +
@@ -4481,7 +4513,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/index.tsx 1`] =
+ > +
+
csr test src/action-sheet/_example/index.tsx 1`] =
+ > +
+
csr test src/action-sheet/_example/index.tsx 1`] =
+ > +
+
csr test src/action-sheet/_example/index.tsx 1`] =
- 99 +
+ 99 +
@@ -6892,7 +6940,11 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
+ > +
+
@@ -6922,9 +6974,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
- 8 +
+ 8 +
@@ -6955,9 +7011,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
- 99 +
+ 99 +
@@ -6988,9 +7048,13 @@ exports[`csr snapshot test > csr test src/action-sheet/_example/list.tsx 1`] = `
- 99+ +
+ 99+ +
@@ -7676,8 +7740,12 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
+ style="left: calc(100% + 4px); top: 4px;" + > +
+
@@ -7701,9 +7769,13 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
- 8 +
+ 8 +
@@ -7772,9 +7844,13 @@ exports[`csr snapshot test > csr test src/avatar/_example/badge-avatar.tsx 1`] =
- 12 +
+ 12 +
@@ -8846,8 +8922,12 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
+ style="left: calc(100% + 4px); top: 4px;" + > +
+
@@ -8871,9 +8951,13 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -8942,9 +9026,13 @@ exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
- 12 +
+ 12 +
@@ -10866,7 +10954,11 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
+ > +
+
csr test src/badge/_example/base.tsx 1`] = `
+ style="left: calc(100% + 1px); top: -1px;" + > +
+
csr test src/badge/_example/base.tsx 1`] = `
+ style="left: calc(100% + 1px); top: 1px;" + > +
+
csr test src/badge/_example/base.tsx 1`] = `
- 8 +
+ 8 +
csr test src/badge/_example/base.tsx 1`] = `
- 2 +
+ 2 +
csr test src/badge/_example/base.tsx 1`] = `
- 8 +
+ 8 +
@@ -11110,9 +11222,13 @@ exports[`csr snapshot test > csr test src/badge/_example/base.tsx 1`] = `
- NEW +
+ NEW +
@@ -11175,7 +11291,11 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
+ > +
+
csr test src/badge/_example/index.tsx 1`] = `
+ style="left: calc(100% + 1px); top: -1px;" + > +
+
csr test src/badge/_example/index.tsx 1`] = `
+ style="left: calc(100% + 1px); top: 1px;" + > +
+
csr test src/badge/_example/index.tsx 1`] = `
- 8 +
+ 8 +
csr test src/badge/_example/index.tsx 1`] = `
- 2 +
+ 2 +
csr test src/badge/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -11419,9 +11559,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- NEW +
+ NEW +
@@ -11498,9 +11642,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- 2 +
+ 2 +
@@ -11560,9 +11708,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- 2 +
+ 2 +
@@ -11614,7 +11766,11 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- 领积分 +
+ 领积分 +
@@ -11626,6 +11782,42 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
+
+
+
+
+
csr test src/badge/_example/index.tsx 1`] = ` />
- New +
+ NEW +
+
+
+
+
+
+ 三角角标 +
+
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
+
+
+
+
+
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
@@ -11746,9 +12019,13 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -11757,7 +12034,7 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
- Middle + Medium
csr test src/badge/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -11914,9 +12195,13 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
- 8 +
+ 8 +
@@ -11925,7 +12210,7 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
- Middle + Medium
csr test src/badge/_example/size.tsx 1`] = `
- 8 +
+ 8 +
@@ -12063,9 +12352,13 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
- 2 +
+ 2 +
@@ -12125,9 +12418,13 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
- 2 +
+ 2 +
@@ -12179,7 +12476,11 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
- 领积分 +
+ 领积分 +
@@ -12191,6 +12492,42 @@ exports[`csr snapshot test > csr test src/badge/_example/theme.tsx 1`] = `
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
+
+
+
+
+
csr test src/badge/_example/theme.tsx 1`] = ` />
- New +
+ NEW +
+
+
+
+
+
+ 三角角标 +
+
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
+
+
+
+
+
+
+
+
+ 单行标题 +
+
+
+
+
+
+
+ NEW +
@@ -29449,7 +29867,11 @@ exports[`csr snapshot test > csr test src/cell/_example/index.tsx 1`] = `
- 16 +
+ 16 +
@@ -29834,7 +30256,11 @@ exports[`csr snapshot test > csr test src/cell/_example/index.tsx 1`] = `
- 16 +
+ 16 +
@@ -30703,7 +31129,11 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = `
- 16 +
+ 16 +
@@ -31250,7 +31680,11 @@ exports[`csr snapshot test > csr test src/cell/_example/single.tsx 1`] = `
- 16 +
+ 16 +
@@ -56096,7 +56530,11 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
+ > +
+
csr test src/grid/_example/badge.tsx 1`] = `
- 8 +
+ 8 +
@@ -56231,7 +56673,11 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
- 13 +
+ 13 +
@@ -56299,7 +56745,11 @@ exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
- NEW +
+ NEW +
@@ -59926,7 +60376,11 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
+ > +
+
csr test src/grid/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -60061,7 +60519,11 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
- 13 +
+ 13 +
@@ -60129,7 +60591,11 @@ exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = `
- NEW +
+ NEW +
@@ -93146,7 +93612,11 @@ exports[`csr snapshot test > csr test src/side-bar/_example/base.tsx 1`] = `
+ > +
+
csr test src/side-bar/_example/base.tsx 1`] = `
- 6 +
+ 6 +
@@ -94246,7 +94720,11 @@ exports[`csr snapshot test > csr test src/side-bar/_example/custom.tsx 1`] = `
+ > +
+
csr test src/side-bar/_example/custom.tsx 1`] = `
- 6 +
+ 6 +
@@ -95474,7 +95956,11 @@ exports[`csr snapshot test > csr test src/side-bar/_example/switch.tsx 1`] = `
+ > +
+
csr test src/side-bar/_example/switch.tsx 1`] = `
- 6 +
+ 6 +
@@ -97729,7 +98219,11 @@ exports[`csr snapshot test > csr test src/side-bar/_example/with-icon.tsx 1`] =
+ > +
+
csr test src/side-bar/_example/with-icon.tsx 1`] =
- 6 +
+ 6 +
@@ -113168,9 +113666,12 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] =
- 16 +
+ 16 +
@@ -113262,8 +113763,11 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] =
+ > +
+
csr test src/tab-bar/_example/badge-props.tsx 1`] =
- New +
+ New +
@@ -113396,9 +113903,12 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/badge-props.tsx 1`] =
- ··· +
+ ··· +
@@ -114736,9 +115246,12 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
- 16 +
+ 16 +
@@ -114830,8 +115343,11 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
+ > +
+
csr test src/tab-bar/_example/mobile.tsx 1`] = `
- New +
+ New +
@@ -114964,9 +115483,12 @@ exports[`csr snapshot test > csr test src/tab-bar/_example/mobile.tsx 1`] = `
- ··· +
+ ··· +
@@ -121600,8 +122122,12 @@ exports[`csr snapshot test > csr test src/tabs/_example/badge.tsx 1`] = `
+ style="top: 1px;" + > +
+
csr test src/tabs/_example/badge.tsx 1`] = `
- 8 +
+ 8 +
@@ -123338,8 +123868,12 @@ exports[`csr snapshot test > csr test src/tabs/_example/index.tsx 1`] = `
+ style="top: 1px;" + > +
+
csr test src/tabs/_example/index.tsx 1`] = `
- 8 +
+ 8 +
@@ -132462,19 +133000,19 @@ exports[`csr snapshot test > csr test src/upload/_example/status.tsx 1`] = ` exports[`ssr snapshot test > ssr test src/action-sheet/_example/align.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `"

ActionSheet 动作面板

从底部弹出的模态框,提供和当前场景相关的操作动作,也支持提供信息输入和描述。

01 类型

列表型

宫格型

02 组件状态

列表型选项状态

03 组件样式

列表型对齐方式

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

ActionSheet 动作面板

从底部弹出的模态框,提供和当前场景相关的操作动作,也支持提供信息输入和描述。

01 类型

列表型

宫格型

02 组件状态

列表型选项状态

03 组件样式

列表型对齐方式

"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `"
A
8
12
"`; +exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `"
A
8
12
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/character-avatar.tsx 1`] = `"
A
A
"`; @@ -132484,7 +133022,7 @@ exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = exports[`ssr snapshot test > ssr test src/avatar/_example/image-avatar.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"

Avatar 头像

用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。

01 头像类型

图片头像

字符头像

A
A

图标头像

徽标头像

A
8
12

02 特殊类型

纯展示的头像组

+5

带操作的头像组

03 组件尺寸

组件尺寸

实例图片
A
实例图片
A
实例图片
A
"`; +exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"

Avatar 头像

用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。

01 头像类型

图片头像

字符头像

A
A

图标头像

徽标头像

A
8
12

02 特殊类型

纯展示的头像组

+5

带操作的头像组

03 组件尺寸

组件尺寸

实例图片
A
实例图片
A
实例图片
A
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `"
实例图片
A
实例图片
A
实例图片
A
"`; @@ -132492,13 +133030,13 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

用于当页面过长往下滑动时,帮助用户快速回到页面顶部。

组件类型

圆形返回顶部
半圆形返回顶部
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户,该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户,该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
NEW
单行标题
NEW
三角角标
单行标题
NEW
单行标题
NEW

03 组件尺寸

Large
8
Medium
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Medium
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
NEW
单行标题
NEW
三角角标
单行标题
NEW
单行标题
NEW
"`; exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; @@ -132556,11 +133094,11 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/index.tsx 1`] = `"

Cell 单元格

用于各个类别行的信息展示。

01 类型

单行单元格

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

02

多行单元格

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

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/index.tsx 1`] = `"

Cell 单元格

用于各个类别行的信息展示。

01 类型

单行单元格

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

02

多行单元格

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

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
多行高度不定,长文本自动换行,该选项的描述是一段很长的内容
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
多行高度不定,长文本自动换行,该选项的描述是一段很长的内容
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
"`; @@ -132714,7 +133252,7 @@ exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"
ssr test src/form/_example/vertical.tsx 1`] = `"
请输入用户名
保密
0/50
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; @@ -132726,7 +133264,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `" ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏0
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局,将页面或特定区域切分成若干等大的区块,形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字

02 组件样式

可传图标的宫格

分享
收藏0
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局,将页面或特定区域切分成若干等大的区块,形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字

02 组件样式

可传图标的宫格

分享
收藏0
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; @@ -133018,15 +133556,15 @@ exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
ssr test src/search/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `"

SideBar 侧边栏

用于信息分类后的展示切换或锚点,位于页面左侧。

01 组件类型

侧边导航用法

带图标侧边导航

02 组件样式

侧边导航样式

"`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; @@ -133134,13 +133672,13 @@ exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `"
ssr test src/switch/_example/status.tsx 1`] = `"
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换,位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换,位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; @@ -133162,7 +133700,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

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

Tabs 选项卡

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

01 组件类型

均分选项卡

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

等距选项卡

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

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

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

选项卡样式

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

Tabs 选项卡

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

01 组件类型

均分选项卡

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

等距选项卡

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

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

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

选项卡样式

选项
选项
选项
选项
选项
选项
选项
选项
"`; exports[`ssr snapshot test > ssr test src/tabs/_example/isometric.tsx 1`] = `"
选项
选项
选项
选项
选项
选项
选项
选项
选项
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 1edcc5536..4006829e3 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -2,19 +2,19 @@ exports[`ssr snapshot test > ssr test src/action-sheet/_example/align.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/action-sheet/_example/grid-multiple.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/index.tsx 1`] = `"

ActionSheet 动作面板

从底部弹出的模态框,提供和当前场景相关的操作动作,也支持提供信息输入和描述。

01 类型

列表型

宫格型

02 组件状态

列表型选项状态

03 组件样式

列表型对齐方式

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

ActionSheet 动作面板

从底部弹出的模态框,提供和当前场景相关的操作动作,也支持提供信息输入和描述。

01 类型

列表型

宫格型

02 组件状态

列表型选项状态

03 组件样式

列表型对齐方式

"`; -exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/action-sheet/_example/list.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/action-sheet/_example/status.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `"
A
8
12
"`; +exports[`ssr snapshot test > ssr test src/avatar/_example/badge-avatar.tsx 1`] = `"
A
8
12
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/character-avatar.tsx 1`] = `"
A
A
"`; @@ -24,7 +24,7 @@ exports[`ssr snapshot test > ssr test src/avatar/_example/icon-avatar.tsx 1`] = exports[`ssr snapshot test > ssr test src/avatar/_example/image-avatar.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"

Avatar 头像

用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。

01 头像类型

图片头像

字符头像

A
A

图标头像

徽标头像

A
8
12

02 特殊类型

纯展示的头像组

+5

带操作的头像组

03 组件尺寸

组件尺寸

实例图片
A
实例图片
A
实例图片
A
"`; +exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"

Avatar 头像

用于展示用户头像信息,除了纯展示也可点击进入个人详情等操作。

01 头像类型

图片头像

字符头像

A
A

图标头像

徽标头像

A
8
12

02 特殊类型

纯展示的头像组

+5

带操作的头像组

03 组件尺寸

组件尺寸

实例图片
A
实例图片
A
实例图片
A
"`; exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `"
实例图片
A
实例图片
A
实例图片
A
"`; @@ -32,13 +32,13 @@ exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `" ssr test src/back-top/_example/index.tsx 1`] = `"

BackTop 返回顶部

用于当页面过长往下滑动时,帮助用户快速回到页面顶部。

组件类型

圆形返回顶部
半圆形返回顶部
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"
红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户,该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New

03 组件尺寸

Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"

Badge 徽标

用于告知用户,该区域的状态变化或者待处理任务的数量。

01 组件类型

红点徽标
消息
数字徽标
消息
8
2
8
自定义徽标
NEW

02 组件样式

圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
NEW
单行标题
NEW
三角角标
单行标题
NEW
单行标题
NEW

03 组件尺寸

Large
8
Medium
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Middle
8
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"
Large
8
Medium
8
"`; -exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
New
"`; +exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"
圆形徽标
2
方形徽标
2
气泡徽标
领积分
角标
单行标题
NEW
单行标题
NEW
三角角标
单行标题
NEW
单行标题
NEW
"`; exports[`ssr snapshot test > ssr test src/button/_example/base.tsx 1`] = `"
"`; @@ -96,11 +96,11 @@ exports[`ssr snapshot test > ssr test src/cascader/_example/with-value.tsx 1`] = exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"
单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/index.tsx 1`] = `"

Cell 单元格

用于各个类别行的信息展示。

01 类型

单行单元格

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

02

多行单元格

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

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/index.tsx 1`] = `"

Cell 单元格

用于各个类别行的信息展示。

01 类型

单行单元格

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

02

多行单元格

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

03 组件样式

卡片单元格

单行标题
单行标题
单行标题
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
多行高度不定,长文本自动换行,该选项的描述是一段很长的内容
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"
单行标题
一段很长很长的内容文字
单行标题 *
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
16
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
辅助信息
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
多行高度不定,长文本自动换行,该选项的描述是一段很长的内容
一段很长很长的内容文字,长文本自动换行,该选项的描述是一段很长的内容
单行标题
一段很长很长的内容文字
单行标题
一段很长很长的内容文字
"`; -exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; +exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"
单行标题
单行标题 *
单行标题
16
单行标题
单行标题
辅助信息
单行标题
"`; exports[`ssr snapshot test > ssr test src/checkbox/_example/all.tsx 1`] = `"
全选
多选
多选
多选
单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息单选描述信息
"`; @@ -254,7 +254,7 @@ exports[`ssr snapshot test > ssr test src/form/_example/index.tsx 1`] = `"
ssr test src/form/_example/vertical.tsx 1`] = `"
请输入用户名
保密
0/50
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
13
标题五字内
NEW
标题五字内
"`; exports[`ssr snapshot test > ssr test src/grid/_example/base.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; @@ -266,7 +266,7 @@ exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `" ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏0
保存
编辑
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局,将页面或特定区域切分成若干等大的区块,形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字

02 组件样式

可传图标的宫格

分享
收藏0
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

用于功能入口布局,将页面或特定区域切分成若干等大的区块,形成若干功能入口。

01 组件类型

基础宫格

标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字

带描述宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带边框宫格

标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字

带徽标宫格

标题文字
8
标题文字
13
标题五字内
NEW
标题五字内

可滑动宫格

标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字

02 组件样式

可传图标的宫格

分享
收藏0
保存
编辑

卡片宫格

标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; exports[`ssr snapshot test > ssr test src/grid/_example/scroll.tsx 1`] = `"
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
"`; @@ -558,15 +558,15 @@ exports[`ssr snapshot test > ssr test src/search/_example/other.tsx 1`] = `"
ssr test src/search/_example/shape.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/base.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/custom.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/side-bar/_example/index.tsx 1`] = `"

SideBar 侧边栏

用于信息分类后的展示切换或锚点,位于页面左侧。

01 组件类型

侧边导航用法

带图标侧边导航

02 组件样式

侧边导航样式

"`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/switch.tsx 1`] = `""`; -exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`; +exports[`ssr snapshot test > ssr test src/side-bar/_example/with-icon.tsx 1`] = `""`; exports[`ssr snapshot test > ssr test src/skeleton/_example/animation.tsx 1`] = `"
渐变加载效果
闪烁加载效果
"`; @@ -674,13 +674,13 @@ exports[`ssr snapshot test > ssr test src/switch/_example/size.tsx 1`] = `"
ssr test src/switch/_example/status.tsx 1`] = `"
加载状态
开关开启禁用
禁用状态
禁用状态
禁用状态
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/badge-props.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/base.tsx 1`] = `"
"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/custom.tsx 1`] = `"
"`; -exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换,位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; +exports[`ssr snapshot test > ssr test src/tab-bar/_example/mobile.tsx 1`] = `"

TabBar 底部标签栏

用于在不同功能模块之间进行快速切换,位于页面底部。

01 组件类型

纯文本标签栏

图标加文字标签栏

纯图标标签栏

双层级纯文本标签栏

01 组件类型

弱选中标签栏

悬浮胶囊标签栏

03 自定义

自定义样式

"`; exports[`ssr snapshot test > ssr test src/tab-bar/_example/pure-icon.tsx 1`] = `"
"`; @@ -702,7 +702,7 @@ exports[`ssr snapshot test > ssr test src/table/_example/scroll.tsx 1`] = `"
ssr test src/table/_example/stripe.tsx 1`] = `"
标题
标题
标题
标题
标题
标题
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容
"`; -exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; +exports[`ssr snapshot test > ssr test src/tabs/_example/badge.tsx 1`] = `"
选项
选项
8
选项
"`; exports[`ssr snapshot test > ssr test src/tabs/_example/content.tsx 1`] = `"
选项
选项
上限六个文字

内容区1

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

Tabs 选项卡

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

01 组件类型

均分选项卡

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

等距选项卡

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

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

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

选项卡样式

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

Tabs 选项卡

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

01 组件类型

均分选项卡

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

等距选项卡

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

带图标选项卡

选项
选项
选项

带徽标选项卡

选项
选项
8
选项

带内容区选项卡

选项
选项
上限六个文字

内容区1

02 组件状态

选项卡状态

选中
默认
禁用

03 组件样式

选项卡尺寸

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

选项卡样式

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