From 9e8a0864c3dfbc35c4d23629211296144175c223 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 31 Jul 2022 20:09:13 +0800 Subject: [PATCH] chore(Space): improve demo and document (#10870) --- packages/vant/src/space/README.md | 100 +++-- packages/vant/src/space/README.zh-CN.md | 73 ++-- packages/vant/src/space/demo/index.vue | 107 ++--- .../test/__snapshots__/demo.spec.ts.snap | 370 ++++++++++++++++++ packages/vant/src/space/test/demo.spec.ts | 4 + 5 files changed, 513 insertions(+), 141 deletions(-) create mode 100644 packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/vant/src/space/test/demo.spec.ts diff --git a/packages/vant/src/space/README.md b/packages/vant/src/space/README.md index 43e72b9f8..0f3f7f81c 100644 --- a/packages/vant/src/space/README.md +++ b/packages/vant/src/space/README.md @@ -22,86 +22,84 @@ app.use(Space); ```html - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 + Button + Button + Button + Button ``` -### Vertical Arrangement +### Vertical ```html - 按钮 - 按钮 - 按钮 + Button + Button + Button ``` -### Size +### Custom Size ```html - - small - 默认 - large - - - 按钮 - 按钮 - 按钮 + + + Button + Button + Button -``` -```js -import { SpaceSize } from '../Space'; -const size = ref < SpaceSize > ''; + + + Button + Button + Button + ``` ### Alignment ```html - + start center end baseline -
- -
Space
- 按钮 -
-
标题
-
内容
-
+ + + {{ align }} +
Block
 ``` ```js -import { SpaceAlign } from '../Space'; -const align = ref < SpaceAlign > 'center'; +import { ref } from 'vue'; + +export default { + setup() { + const align = ref('center'); + return { align }; + }, +}; ``` -### Wrap +### Auto Wrap ```html - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 + Button + Button + Button + Button + Button + Button + Button + Button ``` @@ -112,10 +110,10 @@ const align = ref < SpaceAlign > 'center'; | Attribute | Description | Type | Default | | --- | --- | --- | --- | | direction | Spacing direction | _vertical \| horizontal_ | `horizontal` | +| size | Spacing size, such as `20px` `2em`. The default unit is px, supports using array to set horizontal and vertical spacing | _number \| string \| number[] \| string[]_ | `8px` | | align | Spacing alignment | _start \| end \| center \| baseline_ | - | -| size | Spacing size, For example, 20px 2em, the default unit is px, supports array form, and sets horizontal and vertical spacing | _number \| string \| number[] \| string[]_ | `8px` | -| wrap | Whether to wrap lines automatically is only applicable to horizontal arrangement | boolean | `false` | -| fill | Whether to fill the whole line | boolean | `false` | +| wrap | Whether to wrap automatically, only for horizontal alignment | _boolean_ | `false` | +| fill | Whether to render Space as a block element and fill the parent element | _boolean_ | `false` | ### Slots diff --git a/packages/vant/src/space/README.zh-CN.md b/packages/vant/src/space/README.zh-CN.md index 233f6f0d4..4315834b2 100644 --- a/packages/vant/src/space/README.zh-CN.md +++ b/packages/vant/src/space/README.zh-CN.md @@ -20,7 +20,7 @@ app.use(Space); ### 基础用法 -间距组件的基本用法。 +Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。 ```html @@ -28,13 +28,12 @@ app.use(Space); 按钮 按钮 按钮 - 按钮 ``` ### 垂直排列 -可以设置垂直方向排列的间距。 +将 `direction` 属性设置为 `vertical`，可以设置垂直方向排列的间距。 ```html @@ -44,59 +43,62 @@ app.use(Space); ``` -### 尺寸 +### 自定义间距 -通过调整 `size` 的值来控制间距的大小。 -通过 `size` 控制组件大小, small, large, 分别对应 `8px`, `16px`的间距. 默认的间距大小为 `12px`。 +通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。 ```html - - small - 默认 - large - - + + + 按钮 + 按钮 + 按钮 + + + + 按钮 按钮 按钮 ``` -```js -import { SpaceSize } from '../Space'; -const size = ref < SpaceSize > ''; -``` - ### 对齐方式 -通过调整 `align` 的值来设置对齐方式, 分别为 `start`, `center` ,`end` ,`baseline，在水平模式下默认为` center。 +通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。 ```html - + start center end baseline -
- -
Space
- 按钮 -
-
标题
-
内容
-
+ + + {{ align }} +
Block
 ``` ```js -import { SpaceAlign } from '../Space'; -const align = ref < SpaceAlign > 'center'; +import { ref } from 'vue'; + +export default { + setup() { + const align = ref('center'); + return { align }; + }, +}; ``` ### 自动换行 -在水平模式下, 通过控制`wrap`来控制是否自动换行。 +在水平模式下, 通过 `wrap` 属性来控制子元素是否自动换行。 ```html @@ -108,11 +110,6 @@ const align = ref < SpaceAlign > 'center'; 按钮 按钮 按钮 - 按钮 - 按钮 - 按钮 - 按钮 - 按钮 ``` @@ -123,10 +120,10 @@ const align = ref < SpaceAlign > 'center'; | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | direction | 间距方向 | _vertical \| horizontal_ | `horizontal` | +| size | 间距大小，如 `20px` `2em`，默认单位为 `px`，支持数组形式来分别设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` | | align | 对齐方式 | _start \| end \| center \| baseline_ | - | -| size | 间距大小，如 20px 2em，默认单位为 px，支持数组形式，设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` | -| wrap | 是否自动换行，仅适用于水平方向排列 | boolean | `false` | -| fill | 是否充满整行 | boolean | `false` | +| wrap | 是否自动换行，仅适用于水平方向排列 | _boolean_ | `false` | +| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | _boolean_ | `false` | ### Slots diff --git a/packages/vant/src/space/demo/index.vue b/packages/vant/src/space/demo/index.vue index 0af9fa88e..e46fffb8d 100644 --- a/packages/vant/src/space/demo/index.vue +++ b/packages/vant/src/space/demo/index.vue @@ -8,92 +8,95 @@ import { useTranslate } from '../../../docs/site'; const t = useTranslate({ 'zh-CN': { - basic: '基础用法', vertical: '垂直排列', - size: '尺寸', + customSize: '自定义间距', align: '对齐方式', - wrap: '换行', + wrap: '自动换行', }, 'en-US': { - basic: 'basic', - vertical: 'vertical', - size: 'size', - align: 'align', - wrap: 'wrap', + vertical: 'Vertical', + customSize: 'Custom Size', + align: 'Alignment', + wrap: 'Auto Wrap', }, }); -const size = ref('8px'); const align = ref('center'); + + diff --git a/packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 000000000..bfff15450 --- /dev/null +++ b/packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,370 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + +
+
+
+ +
+
+
+ Block +
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+`; diff --git a/packages/vant/src/space/test/demo.spec.ts b/packages/vant/src/space/test/demo.spec.ts new file mode 100644 index 000000000..c0e0c95b9 --- /dev/null +++ b/packages/vant/src/space/test/demo.spec.ts @@ -0,0 +1,4 @@ +import Demo from '../demo/index.vue'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo);