mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +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
|
||||
<van-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">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
### Vertical Arrangement
|
||||
### Vertical
|
||||
|
||||
```html
|
||||
<van-space direction="vertical" fill>
|
||||
<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>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
### Size
|
||||
### Custom Size
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="size" direction="horizontal">
|
||||
<van-radio name="small">small</van-radio>
|
||||
<van-radio name="">默认</van-radio>
|
||||
<van-radio name="large">large</van-radio>
|
||||
</van-radio-group>
|
||||
<van-space>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<!-- 20px -->
|
||||
<van-space :size="20">
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { SpaceSize } from '../Space';
|
||||
const size = ref < SpaceSize > '';
|
||||
<!-- 2rem -->
|
||||
<van-space size="2rem">
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
<van-button type="primary">Button</van-button>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
### Alignment
|
||||
|
||||
```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="center">center</van-radio>
|
||||
<van-radio name="end">end</van-radio>
|
||||
<van-radio name="baseline">baseline</van-radio>
|
||||
</van-radio-group>
|
||||
<br />
|
||||
<van-space :align="align" style="padding: 10px;background: #f3f2f5;">
|
||||
<div>Space</div>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<div style="padding: 20px;border: 1px solid #eee">
|
||||
<div>标题</div>
|
||||
<div>内容</div>
|
||||
</div>
|
||||
|
||||
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||
<van-button type="primary">{{ align }}</van-button>
|
||||
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
```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
|
||||
<van-space wrap>
|
||||
<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-button type="primary" block>按钮</van-button>
|
||||
<van-button type="primary" block>按钮</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
<van-button type="primary" block>Button</van-button>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ app.use(Space);
|
||||
|
||||
### 基础用法
|
||||
|
||||
间距组件的基本用法。
|
||||
Space 组件会在各个子组件之间设置一定的间距，默认间距为 `8px`。
|
||||
|
||||
```html
|
||||
<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-space>
|
||||
```
|
||||
|
||||
### 垂直排列
|
||||
|
||||
可以设置垂直方向排列的间距。
|
||||
将 `direction` 属性设置为 `vertical`，可以设置垂直方向排列的间距。
|
||||
|
||||
```html
|
||||
<van-space direction="vertical" fill>
|
||||
@ -44,59 +43,62 @@ app.use(Space);
|
||||
</van-space>
|
||||
```
|
||||
|
||||
### 尺寸
|
||||
### 自定义间距
|
||||
|
||||
通过调整 `size` 的值来控制间距的大小。
|
||||
通过 `size` 控制组件大小, small, large, 分别对应 `8px`, `16px`的间距. 默认的间距大小为 `12px`。
|
||||
通过调整 `size` 的值来控制间距的大小。传入 `number` 类型时，会默认使用 `px` 单位；也可以传入 `string` 类型，比如 `2rem` 或 `5vw` 等带有单位的值。
|
||||
|
||||
```html
|
||||
<van-radio-group v-model="size" direction="horizontal">
|
||||
<van-radio name="small">small</van-radio>
|
||||
<van-radio name="">默认</van-radio>
|
||||
<van-radio name="large">large</van-radio>
|
||||
</van-radio-group>
|
||||
<van-space>
|
||||
<!-- 20px -->
|
||||
<van-space :size="20">
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
</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-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { SpaceSize } from '../Space';
|
||||
const size = ref < SpaceSize > '';
|
||||
```
|
||||
|
||||
### 对齐方式
|
||||
|
||||
通过调整 `align` 的值来设置对齐方式, 分别为 `start`, `center` ,`end` ,`baseline，在水平模式下默认为` center。
|
||||
通过调整 `align` 的值来设置子元素的对齐方式, 可选值为 `start`, `center` ,`end` ,`baseline`，在水平模式下的默认值为 `center`。
|
||||
|
||||
```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="center">center</van-radio>
|
||||
<van-radio name="end">end</van-radio>
|
||||
<van-radio name="baseline">baseline</van-radio>
|
||||
</van-radio-group>
|
||||
<br />
|
||||
<van-space :align="align" style="padding: 10px;background: #f3f2f5;">
|
||||
<div>Space</div>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<div style="padding: 20px;border: 1px solid #eee">
|
||||
<div>标题</div>
|
||||
<div>内容</div>
|
||||
</div>
|
||||
|
||||
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||
<van-button type="primary">{{ align }}</van-button>
|
||||
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||
</van-space>
|
||||
```
|
||||
|
||||
```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
|
||||
<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-space>
|
||||
```
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('basic')">
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-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">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
</van-space>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('vertical')">
|
||||
<van-space direction="vertical" fill>
|
||||
<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>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
</van-space>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('size')">
|
||||
<van-radio-group v-model="size" direction="horizontal">
|
||||
<van-radio name="8px">default</van-radio>
|
||||
<van-radio name="20px">20px</van-radio>
|
||||
<van-radio name="2rem">2rem</van-radio>
|
||||
<van-radio name="5vw">5vw</van-radio>
|
||||
</van-radio-group>
|
||||
<br />
|
||||
<van-space :size="size">
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<demo-block :title="t('customSize')">
|
||||
<van-space :size="20" style="margin-bottom: 16px">
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
</van-space>
|
||||
|
||||
<van-space size="3rem">
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
<van-button type="primary">{{ t('button') }}</van-button>
|
||||
</van-space>
|
||||
</demo-block>
|
||||
|
||||
<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="center">center</van-radio>
|
||||
<van-radio name="end">end</van-radio>
|
||||
<van-radio name="baseline">baseline</van-radio>
|
||||
</van-radio-group>
|
||||
<br />
|
||||
<van-space :align="align" style="padding: 10px; background: #f3f2f5">
|
||||
<div>Space</div>
|
||||
<van-button type="primary">按钮</van-button>
|
||||
<div style="padding: 20px; border: 1px solid #eee">
|
||||
<div>标题</div>
|
||||
<div>内容</div>
|
||||
</div>
|
||||
<van-space :align="align" style="padding: 16px; background: #f3f2f5">
|
||||
<van-button type="primary">{{ align }}</van-button>
|
||||
<div style="padding: 40px 20px; background: #fff">Block</div>
|
||||
</van-space>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('wrap')">
|
||||
<van-space wrap>
|
||||
<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-button type="primary" block>按钮</van-button>
|
||||
<van-button type="primary" block>按钮</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
<van-button type="primary" block>{{ t('button') }}</van-button>
|
||||
</van-space>
|
||||
</demo-block>
|
||||
</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