From 4a842f4ee1b4ccda306fe0b5009e166cde5cf1ff Mon Sep 17 00:00:00 2001 From: Lyan-u <46185702+Lyan-u@users.noreply.github.com> Date: Wed, 21 Aug 2024 16:47:33 +0800 Subject: [PATCH] =?UTF-8?q?feat(grid):=20=E7=BB=84=E4=BB=B6=E5=AF=B9?= =?UTF-8?q?=E9=BD=90=20mobile-vue=20(#448)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(grid): react 组件同步 * test(grid): add unit test * fix: update type TNode * refactor(grid): address code review feedback * test(grid): update test snapshots * test: update csr and ssr snap --------- Co-authored-by: anlyyao --- site/mobile/mobile.config.js | 2 +- src/_common | 2 +- src/grid/Grid.tsx | 36 +- src/grid/GridContext.tsx | 20 +- src/grid/GridItem.tsx | 111 +- src/grid/__tests__/index.test.tsx | 198 + src/grid/_example/badge.tsx | 48 +- src/grid/_example/base.jsx | 68 - src/grid/_example/base.tsx | 31 + src/grid/_example/border.jsx | 25 - src/grid/_example/bordered.tsx | 25 + src/grid/_example/card.tsx | 23 + src/grid/_example/desc.tsx | 22 + src/grid/_example/icon.tsx | 23 + src/grid/_example/index.tsx | 44 + src/grid/_example/layout.jsx | 23 - src/grid/_example/normal.jsx | 27 - src/grid/_example/scroll.tsx | 18 + src/grid/_example/style/index.less | 60 +- src/grid/defaultProps.ts | 4 +- src/grid/grid.en-US.md | 28 + src/grid/grid.md | 42 +- src/grid/style/index.js | 4 +- src/grid/type.ts | 24 +- test/snap/__snapshots__/csr.test.jsx.snap | 5648 ++++++++++++++++++++- test/snap/__snapshots__/ssr.test.jsx.snap | 16 +- 26 files changed, 6145 insertions(+), 427 deletions(-) create mode 100644 src/grid/__tests__/index.test.tsx delete mode 100644 src/grid/_example/base.jsx create mode 100644 src/grid/_example/base.tsx delete mode 100644 src/grid/_example/border.jsx create mode 100644 src/grid/_example/bordered.tsx create mode 100644 src/grid/_example/card.tsx create mode 100644 src/grid/_example/desc.tsx create mode 100644 src/grid/_example/icon.tsx create mode 100644 src/grid/_example/index.tsx delete mode 100644 src/grid/_example/layout.jsx delete mode 100644 src/grid/_example/normal.jsx create mode 100644 src/grid/_example/scroll.tsx create mode 100644 src/grid/grid.en-US.md diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js index ae959985..a915f7db 100644 --- a/site/mobile/mobile.config.js +++ b/site/mobile/mobile.config.js @@ -28,7 +28,7 @@ export default { { title: 'Grid 宫格', name: 'grid', - component: () => import('tdesign-mobile-react/grid/_example/base.jsx'), + component: () => import('tdesign-mobile-react/grid/_example/index.tsx'), }, { title: 'Image 图片', diff --git a/src/_common b/src/_common index ffbad373..d42b7fc2 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit ffbad3732613184a4e44c80dca8192299dc51ad9 +Subproject commit d42b7fc27b4e38a45ba28ff2ad50af060d8dd936 diff --git a/src/grid/Grid.tsx b/src/grid/Grid.tsx index 2439d30f..7842ff35 100644 --- a/src/grid/Grid.tsx +++ b/src/grid/Grid.tsx @@ -1,22 +1,41 @@ -import React, { forwardRef } from 'react'; -import { TdGridProps } from './type'; +import React, { forwardRef, useMemo } from 'react'; +import cls from 'classnames'; import useConfig from '../_util/useConfig'; +import { StyledProps } from '../common'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { TdGridProps } from './type'; import { GirdProvider } from './GridContext'; import { gridDefaultProps } from './defaultProps'; -export interface GridProps extends TdGridProps { - children: React.ReactNode; -} +export interface GridProps extends TdGridProps, StyledProps {} const Grid = forwardRef((props, ref) => { - const { children, align, border, column, gutter } = props; + const { children, align, border, column, gutter, theme, className, style } = useDefaultProps(props, gridDefaultProps); const { classPrefix } = useConfig(); const name = `${classPrefix}-grid`; + const rootStyle = useMemo(() => { + if (column === 0) return {}; + return { + padding: `${gutter}px`, + gridTemplateColumns: `repeat(${column}, 1fr)`, + gridGap: `${gutter}px`, + ...style, + }; + }, [column, gutter, style]); + return ( - -
+ +
{children}
@@ -24,6 +43,5 @@ const Grid = forwardRef((props, ref) => { }); Grid.displayName = 'Grid'; -Grid.defaultProps = gridDefaultProps; export default Grid; diff --git a/src/grid/GridContext.tsx b/src/grid/GridContext.tsx index db61613f..de149466 100644 --- a/src/grid/GridContext.tsx +++ b/src/grid/GridContext.tsx @@ -3,19 +3,23 @@ import { TdGridProps } from './type'; export const GridContext = createContext(null); -interface GridProviderProps extends TdGridProps{ +interface GridProviderProps extends TdGridProps { children: React.ReactNode; } export function GirdProvider(props: GridProviderProps) { - const { children, align, border, column, gutter } = props; + const { children, align, border, column, gutter, theme } = props; - const memoValue = useMemo(() => ({ - align, - border, - column, - gutter, - }), [align, border, column, gutter]); + const memoValue = useMemo( + () => ({ + align, + border, + column, + gutter, + theme, + }), + [align, border, column, gutter, theme], + ); return {children}; } diff --git a/src/grid/GridItem.tsx b/src/grid/GridItem.tsx index a363c89c..eaad1931 100644 --- a/src/grid/GridItem.tsx +++ b/src/grid/GridItem.tsx @@ -1,28 +1,23 @@ import React, { FC, useContext, useMemo } from 'react'; import cls from 'classnames'; -import { Badge } from 'tdesign-mobile-react'; -import { TdGridItemProps, TdGridProps } from './type'; +import isString from 'lodash/isString'; +import isObject from 'lodash/isObject'; +import isFunction from 'lodash/isFunction'; +import { Badge, Image } from 'tdesign-mobile-react'; import useConfig from '../_util/useConfig'; -import { GridContext } from './GridContext'; +import parseTNode from '../_util/parseTNode'; +import useDefaultProps from '../hooks/useDefaultProps'; +import { TdGridItemProps, TdGridProps } from './type'; +import { GridContext } from './GridContext'; import { gridItemDefaultProps } from './defaultProps'; -enum LAYOUT { - VERTICAL = 'vertical', - HORIZONTAL = 'horizontal', -} - -const LAYOUT_MAP = { - [LAYOUT.VERTICAL]: 'column', - [LAYOUT.HORIZONTAL]: 'row', -} as const; - -const getGridItemWidth = (column: number) => `${100 / column}%`; +const getGridItemWidth = (column: number) => (column > 0 ? `${100 / column}%` : 0); export interface GridItemProp extends TdGridItemProps, TdGridProps {} const GridItem: FC = (prop) => { - const { description, image, layout, text, badgeProps, ...resetProps } = prop; + const { description, image, layout, text, badge, ...resetProps } = useDefaultProps(prop, gridItemDefaultProps); const { classPrefix } = useConfig(); const { align, gutter, column, border } = useContext(GridContext); @@ -31,88 +26,56 @@ const GridItem: FC = (prop) => { const rootClass = useMemo( () => - cls(name, { + cls(name, `${name}--${layout}`, { [`${name}--bordered`]: border, - [`${classPrefix}-is-large`]: column <= 3, + [`${name}--surround`]: border && gutter, }), - [border, name, column, classPrefix], + [border, name, gutter, layout], ); - const isHorizontal = useMemo(() => layout === 'horizontal', [layout]); - const rootStyle = useMemo(() => { const percent = getGridItemWidth(column); - - if (border && typeof border !== 'boolean') { - const { color, width, style } = border; - return { - borderColor: color, - borderWidth: width, - borderStyle: style, - }; - } - - const flexDirection = isHorizontal ? LAYOUT_MAP.horizontal : LAYOUT_MAP.vertical; - const gutterSize = gutter ? `${gutter}px` : 0; - - const style = { - flexBasis: percent, - flexDirection, - paddingLeft: gutterSize, - paddingRight: gutterSize, - alignItems: 'center' as const, - justifyContent: 'center' as const, - textAlign: align, + const style: React.CSSProperties = { + textAlign: ['center', 'left'].includes(align) ? align : 'center', }; - + if (percent !== 0) { + style.flexBasis = percent; + } return style; - }, [column, border, gutter, align, isHorizontal]); + }, [column, align]); - const imgStyle = useMemo(() => { - let imgSize = 32; - if (column >= 5) { - imgSize = 28; - } else if (column <= 3) { - imgSize = 48; - } - return { - width: `${imgSize}px`, - height: `${imgSize}px`, - }; + const size = useMemo(() => { + if (column > 4 || !column) return 'small'; + return column < 4 ? 'large' : 'middle'; }, [column]); const gridItemImage = useMemo(() => { if (!image) { return null; } - - return typeof image === 'string' ? : image; - }, [image, name, imgStyle]); - - const textStyle = useMemo(() => ({ paddingLeft: isHorizontal ? '12px' : 0 }), [isHorizontal]); - - const titleStyle = useMemo( - () => ({ - paddingTop: isHorizontal ? 0 : '8px', - marginBottom: '4px', - }), - [isHorizontal], - ); + let imgProps: Record; + if (isString(image)) { + imgProps = { src: image }; + } + if (isObject(image) && !isFunction(image) && !React.isValidElement(image)) { + imgProps = image; + } + return imgProps ? : parseTNode(image); + }, [image]); return (
- {badgeProps ? {gridItemImage} : gridItemImage} -
-
- {text} -
-
{description}
+
+ {badge ? {gridItemImage} : gridItemImage} +
+
+
{text}
+
{description}
); }; GridItem.displayName = 'GridItem'; -GridItem.defaultProps = gridItemDefaultProps; export default GridItem; diff --git a/src/grid/__tests__/index.test.tsx b/src/grid/__tests__/index.test.tsx new file mode 100644 index 00000000..d4c62dfa --- /dev/null +++ b/src/grid/__tests__/index.test.tsx @@ -0,0 +1,198 @@ +import React from 'react'; +import { describe, expect, it, render } from '@test/utils'; +import { Grid, GridItem } from '../index'; +import { Image } from '../../image'; + +const prefix = 't'; +const name = `${prefix}-grid`; +const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png'; +const items = [ + { + text: '标题', + image: imgUrl, + description: '内容 description', + }, + { + text: '标题', + image: imgUrl, + description: '内容 description', + }, +]; + +describe('Grid', () => { + describe('props', () => { + it('align', () => { + const alignList = ['left', 'center', ''] as ('left' | 'center')[]; + alignList.forEach((align) => { + const { container } = render( + + + , + ); + const $gridItem = container.querySelector(`.${name}-item`) as HTMLElement; + if (align === 'left') { + expect($gridItem.style.textAlign).toBe('left'); + } else { + expect($gridItem.style.textAlign).toBe('center'); + } + }); + }); + + it('theme', () => { + const themeList: ('default' | 'card')[] = ['default', 'card']; + themeList.forEach((theme) => { + const { container } = render( + + + , + ); + if (theme === 'card') { + expect(container.querySelector(`.${name}--card`)).toBeTruthy(); + } else { + expect(container.querySelector(`.${name}--card`)).toBeFalsy(); + } + }); + }); + + it('border', () => { + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + const $gridItem = container.querySelectorAll(`.${name}-item`); + $gridItem.forEach((item) => { + expect(item.classList.contains(`${name}-item--bordered`)).toBeTruthy(); + }); + }); + + it('column', () => { + const columns = [3, 5]; + columns.forEach((column) => { + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + const $gridItem = container.querySelectorAll(`.${name}-item`); + $gridItem.forEach((item) => { + expect(item.style.flexBasis).toBe(`${100 / column}%`); + }); + }); + }); + + it('column = 0', () => { + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + expect(container.querySelector(`.${name}--auto-size`)).toBeTruthy(); + }); + + it('gutter', () => { + const gutter = 10; + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + const $grid = container.querySelector(`.${name}`); + expect($grid.style.padding).toBe(`${gutter}px`); + expect($grid.style.gridGap).toBe(`${gutter}px`); + }); + }); +}); + +describe('GridItem', () => { + describe('props', () => { + it('text', () => { + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + const $gridItem = container.querySelectorAll(`.${name}-item`); + $gridItem.forEach((item, index) => { + expect(item.querySelector(`.${name}-item__title`).textContent).toBe(items[0].text + index); + }); + }); + + it('image', () => { + const imgProps = { + src: imgUrl, + shape: 'circle', + }; + const { container } = render( + + + , + ); + const $imgContainer = container.querySelector(`.${name}-item__image`); + const $img = $imgContainer.querySelector('img'); + expect($img).toBeTruthy(); + expect($img.getAttribute('src')).toBe(imgUrl); + expect($imgContainer.querySelector('.t-image--circle')).toBeTruthy(); + }); + + it('image TNode', () => { + const { container } = render( + + } /> + , + ); + const $imgContainer = container.querySelector(`.${name}-item__image`); + const $img = $imgContainer.querySelector('img'); + expect($img).toBeTruthy(); + expect($img.getAttribute('src')).toBe(imgUrl); + }); + + it('description', () => { + const { container } = render( + + {items.map((item, index) => ( + + ))} + , + ); + const $gridItem = container.querySelectorAll(`.${name}-item`); + $gridItem.forEach((item, index) => { + expect(item.querySelector(`.${name}-item__description`).textContent).toBe(items[0].description + index); + }); + }); + + it('badge', () => { + const { container } = render( + + + , + ); + const $badge = container.querySelector('.t-badge'); + expect($badge).toBeTruthy(); + // expect($badge.querySelector('.t-badge--basic').textContent).toBe('1'); // TODO 等待 badge 更新 + }); + + it('layout', () => { + const layoutList: ('horizontal' | 'vertical')[] = ['horizontal', 'vertical']; + layoutList.forEach((layout) => { + const { container } = render( + + + , + ); + const $gridItem = container.querySelector(`.${name}-item`); + expect($gridItem.classList.contains(`${name}-item--${layout}`)).toBeTruthy(); + }); + }); + }); +}); diff --git a/src/grid/_example/badge.tsx b/src/grid/_example/badge.tsx index 363447dd..59003895 100644 --- a/src/grid/_example/badge.tsx +++ b/src/grid/_example/badge.tsx @@ -1,39 +1,19 @@ import React from 'react'; import { Grid, GridItem } from 'tdesign-mobile-react'; -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png' +import './style/index.less'; -export default function () { - return <> - - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - - +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Badge() { + return ( + <> + + + + + + + + ); } diff --git a/src/grid/_example/base.jsx b/src/grid/_example/base.jsx deleted file mode 100644 index bb8f7495..00000000 --- a/src/grid/_example/base.jsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from 'tdesign-mobile-react'; -import TDemoBlock from '../../../site/mobile/components/DemoBlock'; -import TDemoHeader from '../../../site/mobile/components/DemoHeader'; -import './style/index.less'; - -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png'; - -export default function Base() { - return ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - -
- -
- ); -} diff --git a/src/grid/_example/base.tsx b/src/grid/_example/base.tsx new file mode 100644 index 00000000..498aa7f9 --- /dev/null +++ b/src/grid/_example/base.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; + +import './style/index.less'; + +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Base() { + return ( + <> + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/grid/_example/border.jsx b/src/grid/_example/border.jsx deleted file mode 100644 index c4686ecb..00000000 --- a/src/grid/_example/border.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from 'tdesign-mobile-react'; - -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png' - -export default function () { - return <> -
- - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - -
- -} diff --git a/src/grid/_example/bordered.tsx b/src/grid/_example/bordered.tsx new file mode 100644 index 00000000..c6fdcfed --- /dev/null +++ b/src/grid/_example/bordered.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; + +import './style/index.less'; + +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Bordered() { + return ( + <> + + + + + + + + + + + + + + ); +} diff --git a/src/grid/_example/card.tsx b/src/grid/_example/card.tsx new file mode 100644 index 00000000..890f400d --- /dev/null +++ b/src/grid/_example/card.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; + +import './style/index.less'; + +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Card() { + return ( + <> + + + + + + + + + + + + ); +} diff --git a/src/grid/_example/desc.tsx b/src/grid/_example/desc.tsx new file mode 100644 index 00000000..a007e6f5 --- /dev/null +++ b/src/grid/_example/desc.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; + +import './style/index.less'; + +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Desc() { + return ( + <> + + + + + + + + + + + ); +} diff --git a/src/grid/_example/icon.tsx b/src/grid/_example/icon.tsx new file mode 100644 index 00000000..1470071d --- /dev/null +++ b/src/grid/_example/icon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; +import { Icon } from 'tdesign-icons-react'; + +import './style/index.less'; + +export default function () { + const iconNode = (iconName) => ( +
+ +
+ ); + return ( + <> + + + + + + + + ); +} diff --git a/src/grid/_example/index.tsx b/src/grid/_example/index.tsx new file mode 100644 index 00000000..376d60ab --- /dev/null +++ b/src/grid/_example/index.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import TDemoBlock from '../../../site/mobile/components/DemoBlock'; +import TDemoHeader from '../../../site/mobile/components/DemoHeader'; +import BaseDemo from './base'; +import DescDemo from './desc'; +import BorderedDemo from './bordered'; +import BadgeDemo from './badge'; +import ScrollDemo from './scroll'; +import IconDemo from './icon'; +import CardDemo from './card'; + +import './style/index.less'; + +export default function GridDemo() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/grid/_example/layout.jsx b/src/grid/_example/layout.jsx deleted file mode 100644 index 5be2062b..00000000 --- a/src/grid/_example/layout.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from 'tdesign-mobile-react'; - -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png' - -export default function () { - return <> - - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - - -} diff --git a/src/grid/_example/normal.jsx b/src/grid/_example/normal.jsx deleted file mode 100644 index 328dcdf8..00000000 --- a/src/grid/_example/normal.jsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import { Grid, GridItem } from 'tdesign-mobile-react'; - -const imgUrl = 'https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png' - -export default function () { - return <> - - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - } - text={
标题文字
} - /> - - -} diff --git a/src/grid/_example/scroll.tsx b/src/grid/_example/scroll.tsx new file mode 100644 index 00000000..65c84e43 --- /dev/null +++ b/src/grid/_example/scroll.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Grid, GridItem } from 'tdesign-mobile-react'; + +import './style/index.less'; + +const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png'; + +export default function Scroll() { + return ( + <> + + {Array.from({ length: 10 }, (_, index) => ( + + ))} + + + ); +} diff --git a/src/grid/_example/style/index.less b/src/grid/_example/style/index.less index 6d6f9758..c64f9ff7 100644 --- a/src/grid/_example/style/index.less +++ b/src/grid/_example/style/index.less @@ -1,49 +1,13 @@ -.img-2 { - width: 48px; - height: 48px; - display: block; -} - -.img-3 { - width: 48px; - height: 48px; - display: block; -} - -.img-4 { - width: 32px; - height: 32px; - display: block; -} - -.img-5 { - width: 28px; - height: 28px; - display: block; -} - -.img-vertical { - margin-bottom: 10px; -} - -.img-horizontal { - margin-right: 10px; -} - -.text-2 { - font-size: 14px; -} - -.text-3 { - font-size: 14px; -} - -.text-4 { - font-size: 12px; -} - -.tdesign-grid-5-horizontal { - margin: 16px 12px 0; - border-radius: 8px; - overflow: hidden; +.grid-demo { + margin-bottom: 16px; +} + +.icon-wrapper { + background: #eee; + border-radius: 6px; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; } diff --git a/src/grid/defaultProps.ts b/src/grid/defaultProps.ts index 6ee983f6..54bb4329 100644 --- a/src/grid/defaultProps.ts +++ b/src/grid/defaultProps.ts @@ -4,6 +4,6 @@ import { TdGridProps, TdGridItemProps } from './type'; -export const gridDefaultProps: TdGridProps = { align: 'center', border: false, column: 4 }; +export const gridDefaultProps: TdGridProps = { align: 'center', border: false, column: 4, theme: 'default' }; -export const gridItemDefaultProps: TdGridItemProps = { layout: 'vertical' }; +export const gridItemDefaultProps: TdGridItemProps = { badge: null, layout: 'vertical' }; diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md new file mode 100644 index 00000000..83b4a7a7 --- /dev/null +++ b/src/grid/grid.en-US.md @@ -0,0 +1,28 @@ +:: BASE_DOC :: + +## API + + +### Grid Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +align | String | center | options: left/center | N +border | Boolean | false | \- | N +column | Number | 4 | \- | N +gutter | Number | - | \- | N +theme | String | default | options: default/card | N + +### GridItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +badge | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/grid/type.ts) | N +description | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +layout | String | vertical | options: vertical/horizontal | N +text | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/grid/grid.md b/src/grid/grid.md index 49dabea5..fddae397 100644 --- a/src/grid/grid.md +++ b/src/grid/grid.md @@ -1,47 +1,27 @@ ---- -title: Grid 宫格 -description: 横向分割的点击单元，用作一组次级功能的入口。 -spline: base -isComponent: true -toc: false ---- - -## 基础用法 - -::: demo _example/normal grid -::: - - -### 边框 - -::: demo _example/border grid -::: - -### 内容布局 -::: demo _example/layout grid -::: - +:: BASE_DOC :: ## API + ### Grid Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N align | String | center | 内容对齐方式。可选项：left/center | N -border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' }` | N -column | Number | 4 | 每一行的列数量 | N +border | Boolean | false | 是否显示边框 | N +column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N gutter | Number | - | 间隔大小 | N +theme | String | default | 宫格的风格。可选项：default/card | N ### GridItem Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N -badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/grid/type.ts) | N -description | TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N -image | TNode | - | 图片，可以是图片地址，也可以自定义图片节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +badge | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/grid/type.ts) | N +description | TNode | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +image | TNode | - | 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N -text | TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +text | TNode | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N diff --git a/src/grid/style/index.js b/src/grid/style/index.js index 6d358f7a..3955c268 100644 --- a/src/grid/style/index.js +++ b/src/grid/style/index.js @@ -1,2 +1,2 @@ -import '../../_common/style/mobile/components/grid/_index.less'; -import '../../_common/style/mobile/components/grid-item/_index.less'; +import '../../_common/style/mobile/components/grid/v2/_index.less'; +import '../../_common/style/mobile/components/grid-item/v2/_index.less'; diff --git a/src/grid/type.ts b/src/grid/type.ts index 07a42432..27523ce2 100644 --- a/src/grid/type.ts +++ b/src/grid/type.ts @@ -14,18 +14,12 @@ export interface TdGridProps { */ align?: 'left' | 'center'; /** - * 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式 + * 是否显示边框 * @default false */ - border?: - | boolean - | { - color?: string; - width?: string; - style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset'; - }; + border?: boolean; /** - * 每一行的列数量 + * 每一行的列数量；为 0 时等于固定大小 * @default 4 */ column?: number; @@ -33,19 +27,25 @@ export interface TdGridProps { * 间隔大小 */ gutter?: number; + /** + * 宫格的风格 + * @default default + */ + theme?: 'default' | 'card'; } export interface TdGridItemProps { /** - * 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字 + * 透传至 Badge 属性 + * @default null */ - badgeProps?: BadgeProps; + badge?: BadgeProps; /** * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 */ description?: TNode; /** - * 图片，可以是图片地址，也可以自定义图片节点 + * 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件 */ image?: TNode; /** diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index a55457a8..bb69d648 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -3727,147 +3727,5659 @@ exports[`csr snapshot test > csr test src/divider/_example/theme.tsx 1`] = ` exports[`csr snapshot test > csr test src/grid/_example/badge.tsx 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 8 +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+ 13 +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 标题五字内 +
+
+
+
+
+
+
+
+ NEW +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ 标题五字内 +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/base.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多四个字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多五个字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/bordered.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/card.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/desc.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/icon.tsx 1`] = ` +
+
+
+
+
+ + + +
+
+
+
+ 分享 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 收藏 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 保存 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 编辑 +
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/index.tsx 1`] = ` +
+
+
+

+ Grid 宫格 +

+

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

+
+
+
+

+ 01 组件类型 +

+

+ 基础宫格 +

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

+ 带描述宫格 +

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

+ 带边框宫格 +

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

+ 带徽标宫格 +

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

+ 可滑动宫格 +

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

+ 02 组件样式 +

+

+ 可传图标的宫格 +

+
+
+
+
+
+
+ + + +
+
+
+
+ 分享 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 收藏 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 保存 +
+
+
+
+
+
+
+ + + +
+
+
+
+ 编辑 +
+
+
+
+
+
+
+
+
+

+ 卡片宫格 +

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 最多六个文字 +
+
+ 描述最多六字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+ 描述文字 +
+
+
+
+
+
+
+
+`; + +exports[`csr snapshot test > csr test src/grid/_example/scroll.tsx 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
- +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字 +
+
+
+
- 标题文字 +
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字
- 8 +
+
+
+
+
+
+
+
+
+
- +
+
+ 标题文字 +
+
+
+
- 标题文字 +
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字
+
+
+
+
+
+
+
+
+
+
+ +
+
+
- new + 标题文字
-
+
+
- 标题文字 +
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字
+
+
+
+
+
+
+
+
+
+
+ +
+
+
- ··· + 标题文字
-
+
+
- 标题文字 +
+
+
+
+
+
+
+ +
+
+
+
+ 标题文字
@@ -15170,7 +20682,21 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `" ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
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`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/bordered.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/card.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

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

01 组件类型

基础宫格

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

带描述宫格

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

带边框宫格

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

带徽标宫格

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

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

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

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 4b4b4d03..18d3c698 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -40,7 +40,21 @@ exports[`ssr snapshot test > ssr test src/divider/_example/index.tsx 1`] = `" ssr test src/divider/_example/theme.tsx 1`] = `"
虚线样式
"`; -exports[`ssr snapshot test > ssr test src/grid/_example/badge.tsx 1`] = `"
标题文字
8
标题文字
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`] = `"
标题文字
标题文字
标题文字
标题文字
最多四个字
标题文字
标题文字
标题文字
最多五个字
标题文字
标题文字
最多六个文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/bordered.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/card.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/desc.tsx 1`] = `"
标题文字
描述文字
标题文字
描述文字
最多六个文字
描述最多六字
标题文字
描述文字
标题文字
描述文字
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/icon.tsx 1`] = `"
分享
收藏
保存
编辑
"`; + +exports[`ssr snapshot test > ssr test src/grid/_example/index.tsx 1`] = `"

Grid 宫格

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

01 组件类型

基础宫格

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

带描述宫格

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

带边框宫格

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

带徽标宫格

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

可滑动宫格

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

02 组件样式

可传图标的宫格

分享
收藏
保存
编辑

卡片宫格

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

How do you feel today?


What is your favourite food?


How much icons does TDesign Icon includes?

"`;