From 3ed455b3f7b3f50431a6fc48786c04f52880cac6 Mon Sep 17 00:00:00 2001 From: Zev Zhu <45655660+aibayanyu20@users.noreply.github.com> Date: Sun, 14 May 2023 17:01:26 +0800 Subject: [PATCH] docs(grid): update migrate docs && delete xxxl in grid docs (#6562) --- components/grid/demo/responsive.vue | 2 +- components/grid/index.en-US.md | 6 +++--- components/grid/index.zh-CN.md | 6 +++--- site/src/vueDocs/migration-v4.en-US.md | 1 + site/src/vueDocs/migration-v4.zh-CN.md | 4 +++- 5 files changed, 11 insertions(+), 8 deletions(-) diff --git a/components/grid/demo/responsive.vue b/components/grid/demo/responsive.vue index b3f9a35f7..ce05d8df6 100644 --- a/components/grid/demo/responsive.vue +++ b/components/grid/demo/responsive.vue @@ -8,7 +8,7 @@ title: ## zh-CN -参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设七个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl` `xxxl`。 +参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl` `xxl`。 ## en-US diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 977ec5931..4b2b64ec6 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -39,10 +39,10 @@ Our grid systems support Flex layout to allow the elements within the parent to ### Row | Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | -| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| align | Vertical alignment | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | | gutter | Spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` (supported after `1.5.0`) | number/object/array | 0 | - | -| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | | wrap | Auto wrap line | boolean | false | - | ### Col diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index fc8bd8853..7799e8eeb 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -36,10 +36,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAA ### Row | 成员 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | -| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | +| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | +| align | 垂直对齐方式 | `top` \| `middle` \| `bottom` \| `stretch` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'top' | 'middle' | 'bottom' | 'stretch'}` | `top` | object: 4.0 | | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`（`1.5.0 后支持`）。 | number \| object \| array | 0 | - | -| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | +| justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` \| `{[key in 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl']: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'}` | `start` | object: 4.0 | | wrap | 是否自动换行 | boolean | false | - | ### Col diff --git a/site/src/vueDocs/migration-v4.en-US.md b/site/src/vueDocs/migration-v4.en-US.md index f1ae7b577..a24d9a25b 100644 --- a/site/src/vueDocs/migration-v4.en-US.md +++ b/site/src/vueDocs/migration-v4.en-US.md @@ -96,6 +96,7 @@ const visible = ref(true); #### Component refactoring and removal - Remove `locale-provider` Directory. `LocaleProvider` was removed in v4, please use `ConfigProvider` instead. +- Remove the `xxxl` breakpoint property from the grid layout. `xxxl` breakpoint has been removed in v4. You can customize breakpoint values using [theme customization](/docs/vue/customize-theme) with `screen[XS|SM|MD|LG|XL|XXL]` properties. - BackTop is deprecated in `4.0.0`, and is merged into FloatButton. ## Start upgrading diff --git a/site/src/vueDocs/migration-v4.zh-CN.md b/site/src/vueDocs/migration-v4.zh-CN.md index fbadc1579..3b9c984ee 100644 --- a/site/src/vueDocs/migration-v4.zh-CN.md +++ b/site/src/vueDocs/migration-v4.zh-CN.md @@ -95,7 +95,9 @@ const visible = ref(true); #### 组件重构与移除 -- 移除 `locale-provider` 目录。`LocaleProvider` 在 v3 中已移除，请使用 `ConfigProvider` 替代。 +- 移除 `locale-provider` 目录。`LocaleProvider` 在 v4 中已移除，请使用 `ConfigProvider` 替代。 + +- 移除栅格布局中的`xxxl`断点属性。 `xxxl`属性已经在 v4 被移除，您可以使用 [主题定制](/docs/vue/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值实现。 - BackTop 组件在 `4.0.0` 中废弃，移至 FloatButton 悬浮按钮中。如需使用，可以从 FloatButton 中引入。