mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(Space): improve demo and document (#10870)
This commit is contained in:
neverland
GitHub
parent
c3a8275ebf
commit
9e8a0864c3
@ -22,86 +22,84 @@ app.use(Space);
|
|||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space>
|
<van-space>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Vertical Arrangement
|
### Vertical
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space direction="vertical" fill>
|
<van-space direction="vertical" fill>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Size
|
### Custom Size
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group v-model="size" direction="horizontal">
|
<!-- 20px -->
|
||||||
<van-radio name="small">small</van-radio>
|
<van-space :size="20">
|
||||||
<van-radio name="">默认</van-radio>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-radio name="large">large</van-radio>
|
<van-button type="primary">Button</van-button>
|
||||||
</van-radio-group>
|
<van-button type="primary">Button</van-button>
|
||||||
<van-space>
|
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
|
||||||
|
|
||||||
```js
|
<!-- 2rem -->
|
||||||
import { SpaceSize } from '../Space';
|
<van-space size="2rem">
|
||||||
const size = ref < SpaceSize > '';
|
<van-button type="primary">Button</van-button>
|
||||||
|
<van-button type="primary">Button</van-button>
|
||||||
|
<van-button type="primary">Button</van-button>
|
||||||
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Alignment
|
### Alignment
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group v-model="align" direction="horizontal">
|
<van-radio-group
|
||||||
|
v-model="align"
|
||||||
|
direction="horizontal"
|
||||||
|
style="margin-bottom: 16px"
|
||||||
|
>
|
||||||
<van-radio name="start">start</van-radio>
|
<van-radio name="start">start</van-radio>
|
||||||
<van-radio name="center">center</van-radio>
|
<van-radio name="center">center</van-radio>
|
||||||
<van-radio name="end">end</van-radio>
|
<van-radio name="end">end</van-radio>
|
||||||
<van-radio name="baseline">baseline</van-radio>
|
<van-radio name="baseline">baseline</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
<br />
|
|
||||||
<van-space :align="align" style="padding: 10px;background: #f3f2f5;">
|
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||||
<div>Space</div>
|
<van-button type="primary">{{ align }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||||
<div style="padding: 20px;border: 1px solid #eee">
|
|
||||||
<div>标题</div>
|
|
||||||
<div>内容</div>
|
|
||||||
</div>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { SpaceAlign } from '../Space';
|
import { ref } from 'vue';
|
||||||
const align = ref < SpaceAlign > 'center';
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const align = ref('center');
|
||||||
|
return { align };
|
||||||
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Wrap
|
### Auto Wrap
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space wrap>
|
<van-space wrap>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>Button</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -112,10 +110,10 @@ const align = ref < SpaceAlign > 'center';
|
|||||||
| Attribute | Description | Type | Default |
|
| Attribute | Description | Type | Default |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| direction | Spacing direction | _vertical \| horizontal_ | `horizontal` |
|
| 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_ | - |
|
| 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 automatically, only for horizontal alignment | _boolean_ | `false` |
|
||||||
| wrap | Whether to wrap lines automatically is only applicable to horizontal arrangement | boolean | `false` |
|
| fill | Whether to render Space as a block element and fill the parent element | _boolean_ | `false` |
|
||||||
| fill | Whether to fill the whole line | boolean | `false` |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|||||||
@ -20,7 +20,7 @@ app.use(Space);
|
|||||||
|
|
||||||
### 基础用法
|
### 基础用法
|
||||||
|
|
||||||
间距组件的基本用法。
|
Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space>
|
<van-space>
|
||||||
@ -28,13 +28,12 @@ app.use(Space);
|
|||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 垂直排列
|
### 垂直排列
|
||||||
|
|
||||||
可以设置垂直方向排列的间距。
|
将 `direction` 属性设置为 `vertical`，可以设置垂直方向排列的间距。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space direction="vertical" fill>
|
<van-space direction="vertical" fill>
|
||||||
@ -44,59 +43,62 @@ app.use(Space);
|
|||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
### 尺寸
|
### 自定义间距
|
||||||
|
|
||||||
通过调整 `size` 的值来控制间距的大小。
|
通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。
|
||||||
通过 `size` 控制组件大小, small, large, 分别对应 `8px`, `16px`的间距. 默认的间距大小为 `12px`。
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group v-model="size" direction="horizontal">
|
<!-- 20px -->
|
||||||
<van-radio name="small">small</van-radio>
|
<van-space :size="20">
|
||||||
<van-radio name="">默认</van-radio>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-radio name="large">large</van-radio>
|
<van-button type="primary">按钮</van-button>
|
||||||
</van-radio-group>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-space>
|
</van-space>
|
||||||
|
|
||||||
|
<!-- 2rem -->
|
||||||
|
<van-space size="2rem">
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">按钮</van-button>
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
|
||||||
import { SpaceSize } from '../Space';
|
|
||||||
const size = ref < SpaceSize > '';
|
|
||||||
```
|
|
||||||
|
|
||||||
### 对齐方式
|
### 对齐方式
|
||||||
|
|
||||||
通过调整 `align` 的值来设置对齐方式, 分别为 `start`, `center` ,`end` ,`baseline，在水平模式下默认为` center。
|
通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-radio-group v-model="align" direction="horizontal">
|
<van-radio-group
|
||||||
|
v-model="align"
|
||||||
|
direction="horizontal"
|
||||||
|
style="margin-bottom: 16px"
|
||||||
|
>
|
||||||
<van-radio name="start">start</van-radio>
|
<van-radio name="start">start</van-radio>
|
||||||
<van-radio name="center">center</van-radio>
|
<van-radio name="center">center</van-radio>
|
||||||
<van-radio name="end">end</van-radio>
|
<van-radio name="end">end</van-radio>
|
||||||
<van-radio name="baseline">baseline</van-radio>
|
<van-radio name="baseline">baseline</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
<br />
|
|
||||||
<van-space :align="align" style="padding: 10px;background: #f3f2f5;">
|
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||||
<div>Space</div>
|
<van-button type="primary">{{ align }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||||
<div style="padding: 20px;border: 1px solid #eee">
|
|
||||||
<div>标题</div>
|
|
||||||
<div>内容</div>
|
|
||||||
</div>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { SpaceAlign } from '../Space';
|
import { ref } from 'vue';
|
||||||
const align = ref < SpaceAlign > 'center';
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const align = ref('center');
|
||||||
|
return { align };
|
||||||
|
},
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### 自动换行
|
### 自动换行
|
||||||
|
|
||||||
在水平模式下, 通过控制`wrap`来控制是否自动换行。
|
在水平模式下, 通过 `wrap` 属性来控制子元素是否自动换行。
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<van-space wrap>
|
<van-space wrap>
|
||||||
@ -108,11 +110,6 @@ const align = ref < SpaceAlign > 'center';
|
|||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>按钮</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>按钮</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>按钮</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -123,10 +120,10 @@ const align = ref < SpaceAlign > 'center';
|
|||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
| direction | 间距方向 | _vertical \| horizontal_ | `horizontal` |
|
| direction | 间距方向 | _vertical \| horizontal_ | `horizontal` |
|
||||||
|
| size | 间距大小，如 `20px` `2em`，默认单位为 `px`，支持数组形式来分别设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` |
|
||||||
| align | 对齐方式 | _start \| end \| center \| baseline_ | - |
|
| align | 对齐方式 | _start \| end \| center \| baseline_ | - |
|
||||||
| size | 间距大小，如 20px 2em，默认单位为 px，支持数组形式，设置横向和纵向间距 | _number \| string \| number[] \| string[]_ | `8px` |
|
| wrap | 是否自动换行，仅适用于水平方向排列 | _boolean_ | `false` |
|
||||||
| wrap | 是否自动换行，仅适用于水平方向排列 | boolean | `false` |
|
| fill | 是否让 Space 变为一个块级元素，填充整个父元素 | _boolean_ | `false` |
|
||||||
| fill | 是否充满整行 | boolean | `false` |
|
|
||||||
|
|
||||||
### Slots
|
### Slots
|
||||||
|
|
||||||
|
|||||||
@ -8,92 +8,95 @@ import { useTranslate } from '../../../docs/site';
|
|||||||
|
|
||||||
const t = useTranslate({
|
const t = useTranslate({
|
||||||
'zh-CN': {
|
'zh-CN': {
|
||||||
basic: '基础用法',
|
|
||||||
vertical: '垂直排列',
|
vertical: '垂直排列',
|
||||||
size: '尺寸',
|
customSize: '自定义间距',
|
||||||
align: '对齐方式',
|
align: '对齐方式',
|
||||||
wrap: '换行',
|
wrap: '自动换行',
|
||||||
},
|
},
|
||||||
'en-US': {
|
'en-US': {
|
||||||
basic: 'basic',
|
vertical: 'Vertical',
|
||||||
vertical: 'vertical',
|
customSize: 'Custom Size',
|
||||||
size: 'size',
|
align: 'Alignment',
|
||||||
align: 'align',
|
wrap: 'Auto Wrap',
|
||||||
wrap: 'wrap',
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const size = ref('8px');
|
|
||||||
const align = ref('center');
|
const align = ref('center');
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<demo-block :title="t('basic')">
|
<demo-block :title="t('basicUsage')">
|
||||||
<van-space>
|
<van-space>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('vertical')">
|
<demo-block :title="t('vertical')">
|
||||||
<van-space direction="vertical" fill>
|
<van-space direction="vertical" fill>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
</van-space>
|
</van-space>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('size')">
|
<demo-block :title="t('customSize')">
|
||||||
<van-radio-group v-model="size" direction="horizontal">
|
<van-space :size="20" style="margin-bottom: 16px">
|
||||||
<van-radio name="8px">default</van-radio>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-radio name="20px">20px</van-radio>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-radio name="2rem">2rem</van-radio>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-radio name="5vw">5vw</van-radio>
|
</van-space>
|
||||||
</van-radio-group>
|
|
||||||
<br />
|
<van-space size="3rem">
|
||||||
<van-space :size="size">
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
<van-button type="primary">{{ t('button') }}</van-button>
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('align')">
|
<demo-block :title="t('align')">
|
||||||
<van-radio-group v-model="align" direction="horizontal">
|
<van-radio-group
|
||||||
|
v-model="align"
|
||||||
|
direction="horizontal"
|
||||||
|
style="margin-bottom: 16px"
|
||||||
|
>
|
||||||
<van-radio name="start">start</van-radio>
|
<van-radio name="start">start</van-radio>
|
||||||
<van-radio name="center">center</van-radio>
|
<van-radio name="center">center</van-radio>
|
||||||
<van-radio name="end">end</van-radio>
|
<van-radio name="end">end</van-radio>
|
||||||
<van-radio name="baseline">baseline</van-radio>
|
<van-radio name="baseline">baseline</van-radio>
|
||||||
</van-radio-group>
|
</van-radio-group>
|
||||||
<br />
|
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||||
<van-space :align="align" style="padding: 10px; background: #f3f2f5">
|
<van-button type="primary">{{ align }}</van-button>
|
||||||
<div>Space</div>
|
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||||
<van-button type="primary">按钮</van-button>
|
|
||||||
<div style="padding: 20px; border: 1px solid #eee">
|
|
||||||
<div>标题</div>
|
|
||||||
<div>内容</div>
|
|
||||||
</div>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
<demo-block :title="t('wrap')">
|
<demo-block :title="t('wrap')">
|
||||||
<van-space wrap>
|
<van-space wrap>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
<van-button type="primary" block>按钮</van-button>
|
|
||||||
</van-space>
|
</van-space>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.demo-space {
|
||||||
|
background: var(--van-background-color-light);
|
||||||
|
|
||||||
|
.van-doc-demo-block {
|
||||||
|
padding: 0 var(--van-padding-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
.van-doc-demo-block__title {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
370
packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap
Normal file
370
packages/vant/src/space/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
|
<div>
|
||||||
|
<div class="van-space van-space--horizontal van-space--align-center">
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-space van-space--vertical van-space--fill">
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-space van-space--horizontal van-space--align-center"
|
||||||
|
style="margin-bottom: 16px;"
|
||||||
|
>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 20px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 20px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-space van-space--horizontal van-space--align-center">
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 3rem;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 3rem;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item">
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-radio-group van-radio-group--horizontal"
|
||||||
|
role="radiogroup"
|
||||||
|
style="margin-bottom: 16px;"
|
||||||
|
>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-radio van-radio--horizontal"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-radio__icon van-radio__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<span class="van-radio__label">
|
||||||
|
start
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-radio van-radio--horizontal"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="true"
|
||||||
|
>
|
||||||
|
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<span class="van-radio__label">
|
||||||
|
center
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-radio van-radio--horizontal"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-radio__icon van-radio__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<span class="van-radio__label">
|
||||||
|
end
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div role="radio"
|
||||||
|
class="van-radio van-radio--horizontal"
|
||||||
|
tabindex="0"
|
||||||
|
aria-checked="false"
|
||||||
|
>
|
||||||
|
<div class="van-radio__icon van-radio__icon--round">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-success">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<span class="van-radio__label">
|
||||||
|
baseline
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-space van-space--horizontal van-space--align-center"
|
||||||
|
style="padding: 16px; background: rgb(243, 242, 245);"
|
||||||
|
>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
center
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item">
|
||||||
|
<div style="padding: 40px 20px; background: rgb(255, 255, 255);">
|
||||||
|
Block
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="van-space van-space--horizontal van-space--align-center van-space--wrap">
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-right: 8px; margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="van-space-item"
|
||||||
|
style="margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<button type="button"
|
||||||
|
class="van-button van-button--primary van-button--normal van-button--block"
|
||||||
|
>
|
||||||
|
<div class="van-button__content">
|
||||||
|
<span class="van-button__text">
|
||||||
|
Button
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
4
packages/vant/src/space/test/demo.spec.ts
Normal file
4
packages/vant/src/space/test/demo.spec.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
import Demo from '../demo/index.vue';
|
||||||
|
import { snapshotDemo } from '../../../test/demo';
|
||||||
|
|
||||||
|
snapshotDemo(Demo);
|
||||||
Loading…
x
Reference in New Issue
Block a user