20260720172840
This commit is contained in:
oneao committed
1 parent
cda7f16d3a
commit
94207c77ff
3117 files changed
+201407
-1236
No files matched your search
@@ -0,0 +1,42 @@
|
||||
# _semantic
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('root') },
|
||||
{ name: 'item', desc: t('item') },
|
||||
{ name: 'separator', desc: t('separator') },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Space"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-space :classes="classes">
|
||||
<template #separator>
|
||||
<a-divider vertical />
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button>Default</a-button>
|
||||
<a-button type="dashed">
|
||||
Dashed
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
# Align
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set alignment.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex flex-wrap items-start">
|
||||
<div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
|
||||
<a-space align="center">
|
||||
center
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
|
||||
<a-space align="start">
|
||||
start
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
|
||||
<a-space align="end">
|
||||
end
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="flex-none my-2 mx-1 p-1 border border-solid border-[#40a9ff]">
|
||||
<a-space align="baseline">
|
||||
baseline
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<span class="inline-block pt-8 px-2 pb-4 bg-[rgba(150,150,150,0.2)]">Block</span>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,36 @@
|
||||
# Basic Usage
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Horizontal spacing between adjacent components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { UploadOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space>
|
||||
Space
|
||||
<a-button type="primary">
|
||||
Button
|
||||
</a-button>
|
||||
<a-upload>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<UploadOutlined />
|
||||
</template>
|
||||
Click to Upload
|
||||
</a-button>
|
||||
</a-upload>
|
||||
|
||||
<a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No">
|
||||
<a-button>
|
||||
Confirm
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
# Vertical Compact Mode
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Vertical compact button group.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space>
|
||||
<a-space-compact orientation="vertical">
|
||||
<a-button>Button 1</a-button>
|
||||
<a-button>Button 2</a-button>
|
||||
<a-button>Button 3</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact orientation="vertical">
|
||||
<a-button type="dashed">
|
||||
Button 1
|
||||
</a-button>
|
||||
<a-button type="dashed">
|
||||
Button 2
|
||||
</a-button>
|
||||
<a-button type="dashed">
|
||||
Button 3
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact orientation="vertical">
|
||||
<a-button type="primary">
|
||||
Button 1
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 2
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 3
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
+183
@@ -0,0 +1,183 @@
|
||||
# Button Compact Mode
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Compact button group.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
CommentOutlined,
|
||||
DownloadOutlined,
|
||||
EllipsisOutlined,
|
||||
HeartOutlined,
|
||||
LinkOutlined,
|
||||
MailOutlined,
|
||||
MobileOutlined,
|
||||
ShareAltOutlined,
|
||||
StarOutlined,
|
||||
WarningOutlined,
|
||||
} from '@antdv-next/icons'
|
||||
import { h } from 'vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space-compact block>
|
||||
<a-tooltip title="Link">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<LinkOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="Comment">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<CommentOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="Star">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<StarOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="Heart">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<HeartOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="Share">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<ShareAltOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="Download">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<DownloadOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-dropdown
|
||||
placement="bottomRight" :menu="{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
label: 'Report',
|
||||
icon: () => h(WarningOutlined),
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: 'Mail',
|
||||
icon: () => h(MailOutlined),
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: 'Mobile',
|
||||
icon: () => h(MobileOutlined),
|
||||
},
|
||||
],
|
||||
onClick: () => console.log('click dropdown'),
|
||||
}
|
||||
" :trigger="['click']"
|
||||
>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-space-compact>
|
||||
|
||||
<br>
|
||||
|
||||
<a-space-compact block>
|
||||
<a-button type="primary">
|
||||
Button 1
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 2
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 3
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 4
|
||||
</a-button>
|
||||
<a-tooltip title="Tooltip">
|
||||
<a-button type="primary" disabled>
|
||||
<DownloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip type="primary" title="Tooltip">
|
||||
<a-button>
|
||||
<DownloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space-compact>
|
||||
|
||||
<br>
|
||||
|
||||
<a-space-compact block>
|
||||
<a-button type="primary">
|
||||
Button 1
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 2
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Button 3
|
||||
</a-button>
|
||||
<a-tooltip title="Tooltip">
|
||||
<a-button type="primary" disabled>
|
||||
<DownloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip type="primary" title="Tooltip">
|
||||
<a-button>
|
||||
<DownloadOutlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-button type="primary">
|
||||
Button 4
|
||||
</a-button>
|
||||
|
||||
<a-dropdown
|
||||
placement="bottomRight" :menu="{
|
||||
items: [
|
||||
{
|
||||
key: '1',
|
||||
label: '1st item',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
label: '2nd item',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
label: '3rd item',
|
||||
},
|
||||
],
|
||||
onClick: () => console.log('click dropdown'),
|
||||
}
|
||||
" :trigger="['click']"
|
||||
>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<EllipsisOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-dropdown>
|
||||
</a-space-compact>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,276 @@
|
||||
# Compact Mode for form component
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Compact layout component, suitable for combining input boxes, selectors and other components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { CopyOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const zhejiangJiangsuOptions = [
|
||||
{ label: 'Zhejiang', value: 'Zhejiang' },
|
||||
{ label: 'Jiangsu', value: 'Jiangsu' },
|
||||
]
|
||||
|
||||
const option12Options = [
|
||||
{ label: 'Option1', value: 'Option1' },
|
||||
{ label: 'Option2', value: 'Option2' },
|
||||
]
|
||||
|
||||
const option11Options = [
|
||||
{ label: 'Option1-1', value: 'Option1-1' },
|
||||
{ label: 'Option1-2', value: 'Option1-2' },
|
||||
]
|
||||
|
||||
const option22Options = [
|
||||
{ label: 'Option2-1', value: 'Option2-1' },
|
||||
{ label: 'Option2-2', value: 'Option2-2' },
|
||||
]
|
||||
|
||||
const betweenExceptOptions = [
|
||||
{ label: 'Between', value: '1' },
|
||||
{ label: 'Except', value: '2' },
|
||||
]
|
||||
|
||||
const signOptions = [
|
||||
{ label: 'Sign Up', value: 'Sign Up' },
|
||||
{ label: 'Sign In', value: 'Sign In' },
|
||||
]
|
||||
|
||||
const emailOptions = [{ value: 'text 1' }, { value: 'text 2' }]
|
||||
|
||||
const addressOptions = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
children: [
|
||||
{
|
||||
value: 'hangzhou',
|
||||
label: 'Hangzhou',
|
||||
children: [
|
||||
{
|
||||
value: 'xihu',
|
||||
label: 'West Lake',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
children: [
|
||||
{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
children: [
|
||||
{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const treeData = [
|
||||
{
|
||||
value: 'parent 1',
|
||||
title: 'parent 1',
|
||||
children: [
|
||||
{
|
||||
value: 'parent 1-0',
|
||||
title: 'parent 1-0',
|
||||
children: [
|
||||
{ value: 'leaf1', title: 'leaf1' },
|
||||
{ value: 'leaf2', title: 'leaf2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'parent 1-1',
|
||||
title: 'parent 1-1',
|
||||
children: [
|
||||
{ value: 'leaf3', title: 'leaf3' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const value = ref('leaf1')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space orientation="vertical">
|
||||
<a-space-compact block>
|
||||
<a-input style="width: 20%" default-value="0571" />
|
||||
<a-input style="width: 30%" default-value="26888888" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block size="small">
|
||||
<a-input style="width: calc(100% - 200px)" default-value="https://ant.design" />
|
||||
<a-button type="primary">
|
||||
Submit
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input style="width: calc(100% - 200px)" default-value="https://ant.design" />
|
||||
<a-button type="primary">
|
||||
Submit
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input
|
||||
style="width: calc(100% - 200px)"
|
||||
default-value="git@github.com:ant-design/ant-design.git"
|
||||
/>
|
||||
<a-tooltip title="copy git url">
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<CopyOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
allow-clear
|
||||
default-value="Zhejiang"
|
||||
:options="zhejiangJiangsuOptions"
|
||||
/>
|
||||
<a-input style="width: 50%" default-value="Xihu District, Hangzhou" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
allow-clear
|
||||
mode="multiple"
|
||||
default-value="Zhejiang"
|
||||
style="width: 50%"
|
||||
:options="zhejiangJiangsuOptions"
|
||||
/>
|
||||
<a-input style="width: 50%" default-value="Xihu District, Hangzhou" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input-search style="width: 30%" default-value="0571" />
|
||||
<a-input-search allow-clear style="width: 50%" default-value="26888888" />
|
||||
<a-input-search style="width: 20%" default-value="+1" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
default-value="Option1"
|
||||
:options="option12Options"
|
||||
/>
|
||||
<a-input style="width: 50%" default-value="input content" />
|
||||
<a-input-number :default-value="12" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input style="width: 50%" default-value="input content" />
|
||||
<a-date-picker style="width: 50%" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-range-picker style="width: 70%" />
|
||||
<a-input style="width: 30%" default-value="input content" />
|
||||
<a-button type="primary">
|
||||
查询
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-input style="width: 30%" default-value="input content" />
|
||||
<a-range-picker style="width: 70%" />
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
default-value="Option1-1"
|
||||
:options="option11Options"
|
||||
/>
|
||||
<a-select
|
||||
default-value="Option2-2"
|
||||
:options="option22Options"
|
||||
/>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
default-value="1"
|
||||
:options="betweenExceptOptions"
|
||||
/>
|
||||
<a-input style="width: 100px; text-align: center" placeholder="Minimum" />
|
||||
<a-input
|
||||
class="site-input-split"
|
||||
style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none"
|
||||
placeholder="~"
|
||||
disabled
|
||||
/>
|
||||
<a-input
|
||||
class="site-input-right"
|
||||
style="width: 100px; text-align: center"
|
||||
placeholder="Maximum"
|
||||
/>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-select
|
||||
default-value="Sign Up"
|
||||
style="width: 30%"
|
||||
:options="signOptions"
|
||||
/>
|
||||
<a-auto-complete
|
||||
style="width: 70%"
|
||||
placeholder="Email"
|
||||
:options="emailOptions"
|
||||
/>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-time-picker style="width: 70%" />
|
||||
<a-cascader
|
||||
style="width: 70%"
|
||||
:options="addressOptions"
|
||||
placeholder="Select Address"
|
||||
/>
|
||||
</a-space-compact>
|
||||
<a-space-compact block>
|
||||
<a-time-range-picker />
|
||||
<a-tree-select
|
||||
v-model:value="value"
|
||||
show-search
|
||||
style="width: 60%"
|
||||
:styles="{ popup: { root: { maxHeight: '400px', overflow: 'auto' } } }"
|
||||
placeholder="Please select"
|
||||
allow-clear
|
||||
tree-default-expand-all
|
||||
:tree-data="treeData"
|
||||
>
|
||||
<template #title="{ value: val, title }">
|
||||
<b v-if="val === 'leaf3'" style="color: #08c">{{ title }}</b>
|
||||
<template v-else>
|
||||
{{ title }}
|
||||
</template>
|
||||
</template>
|
||||
</a-tree-select>
|
||||
<a-button type="primary">
|
||||
Submit
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
<a-space-compact>
|
||||
<a-input placeholder="input here" />
|
||||
<a-space-addon>$</a-space-addon>
|
||||
<a-input-number placeholder="another input" style="width: 100%" />
|
||||
<a-input-number placeholder="another input" style="width: 100%" />
|
||||
<a-space-addon>$</a-space-addon>
|
||||
</a-space-compact>
|
||||
<a-space-compact>
|
||||
<a-input placeholder="input here" />
|
||||
<a-color-picker />
|
||||
</a-space-compact>
|
||||
<a-space-compact>
|
||||
<a-button type="primary">
|
||||
Button
|
||||
</a-button>
|
||||
<a-input placeholder="input here" />
|
||||
<a-space-addon>$</a-space-addon>
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,27 @@
|
||||
# Separator
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Separator between adjacent components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space>
|
||||
<template #separator>
|
||||
<a-divider type="vertical" />
|
||||
</template>
|
||||
|
||||
<a-typography-link>
|
||||
Link
|
||||
</a-typography-link>
|
||||
<a-typography-link>
|
||||
Link
|
||||
</a-typography-link>
|
||||
<a-typography-link>
|
||||
Link
|
||||
</a-typography-link>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,55 @@
|
||||
# Space Size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize space size.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { SizeType } from 'antdv-next'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const size = ref<SizeType | 'customize'>('small')
|
||||
const customizeSize = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-radio-group v-model:value="size">
|
||||
<a-radio value="small">
|
||||
Small
|
||||
</a-radio>
|
||||
<a-radio value="middle">
|
||||
Middle
|
||||
</a-radio>
|
||||
<a-radio value="large">
|
||||
Large
|
||||
</a-radio>
|
||||
<a-radio value="customize">
|
||||
Customize
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<template v-if="size === 'customize'">
|
||||
<a-slider v-model:value="customizeSize" />
|
||||
<br>
|
||||
</template>
|
||||
|
||||
<a-space :size="size === 'customize' ? customizeSize : size">
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button>Default</a-button>
|
||||
<a-button type="dashed">
|
||||
Dashed
|
||||
</a-button>
|
||||
<a-button type="link">
|
||||
Link
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,73 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize semantic structure styles and class names. Supports both object and function forms.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { SpaceProps } from 'antdv-next'
|
||||
|
||||
const classNamesObject: SpaceProps['classes'] = {
|
||||
root: 'demo-space-root',
|
||||
item: 'demo-space-item',
|
||||
separator: 'demo-space-separator',
|
||||
}
|
||||
|
||||
const classNamesFn: SpaceProps['classes'] = (info) => {
|
||||
if (info.props.orientation === 'vertical') {
|
||||
return {
|
||||
root: 'demo-space-root--vertical',
|
||||
} satisfies SpaceProps['classes']
|
||||
}
|
||||
else {
|
||||
return {
|
||||
root: 'demo-space-root--horizontal',
|
||||
} satisfies SpaceProps['classes']
|
||||
}
|
||||
}
|
||||
|
||||
const stylesObject: SpaceProps['styles'] = {
|
||||
root: { borderWidth: '2px', borderStyle: 'dashed', padding: '8px', marginBottom: '10px' },
|
||||
item: { backgroundColor: '#f0f0f0', padding: '4px' },
|
||||
separator: { color: 'red', fontWeight: 'bold' },
|
||||
}
|
||||
|
||||
const stylesFn: SpaceProps['styles'] = (info) => {
|
||||
if (info.props.size === 'large') {
|
||||
return {
|
||||
root: {
|
||||
backgroundColor: '#e6f7ff',
|
||||
borderColor: '#1890ff',
|
||||
padding: '8px',
|
||||
},
|
||||
} satisfies SpaceProps['styles']
|
||||
}
|
||||
else {
|
||||
return {
|
||||
root: {
|
||||
backgroundColor: '#fff7e6',
|
||||
borderColor: '#fa8c16',
|
||||
},
|
||||
} satisfies SpaceProps['styles']
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-space :styles="stylesObject" :classes="classNamesObject" separator="•">
|
||||
<a-button>Styled Button 1</a-button>
|
||||
<a-button>Styled Button 2</a-button>
|
||||
<a-button>Styled Button 3</a-button>
|
||||
</a-space>
|
||||
<a-space size="large" :styles="stylesFn" :classes="classNamesFn">
|
||||
<a-button>Large Space Button 1</a-button>
|
||||
<a-button>Large Space Button 2</a-button>
|
||||
<a-button>Large Space Button 3</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,26 @@
|
||||
# Vertical Space
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Vertical spacing between adjacent components.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space orientation="vertical" size="middle" style="display: flex;">
|
||||
<a-card title="Card" size="small">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
<a-card title="Card" size="small">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
<a-card title="Card" size="small">
|
||||
<p>Card content</p>
|
||||
<p>Card content</p>
|
||||
</a-card>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# Wrap
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Auto wrap.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-space :size="[8, 16]" wrap>
|
||||
<a-button v-for="item in 20" :key="item">
|
||||
Button
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Space
|
||||
description: Set components spacing.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
- Avoid components clinging together and set a unified space.
|
||||
- Use Space.Compact when child form components are compactly connected and the border is collapsed.
|
||||
|
||||
### Difference with Flex component
|
||||
|
||||
- Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
|
||||
- Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic Usage | demo/basic.md |
|
||||
| Vertical Space | demo/vertical.md |
|
||||
| Space Size | demo/size.md |
|
||||
| Align | demo/align.md |
|
||||
| Wrap | demo/wrap.md |
|
||||
| Separator | demo/separator.md |
|
||||
| Compact Mode for form component | demo/compact.md |
|
||||
| Button Compact Mode | demo/compact-buttons.md |
|
||||
| Vertical Compact Mode | demo/compact-button-vertical.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Space
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| align | Align items | `start` \| `end` \| `center` \| `baseline` | - | 4.2.0 | × |
|
||||
| orientation | The space direction | `vertical` \| `horizontal` | `horizontal` | - | × |
|
||||
| separator | Set separator | VueNode | - | - | × |
|
||||
| size | The space size | [Size](#size) \| [[Size](#size), [Size](#size)] | `small` | 4.1.0 \| Array: 4.9.0 | ✓ |
|
||||
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - | × |
|
||||
| wrap | Auto wrap line, when `horizontal` effective | boolean | false | 4.9.0 | × |
|
||||
|
||||
#### Slots
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| separator | Set separator | () => VueNode | - |
|
||||
|
||||
### Size
|
||||
|
||||
`'small' | 'middle' | 'large' | number`
|
||||
|
||||
### SpaceCompact
|
||||
|
||||
Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are:
|
||||
|
||||
- Button
|
||||
- AutoComplete
|
||||
- Cascader
|
||||
- DatePicker
|
||||
- Input/Input.Search
|
||||
- InputNumber
|
||||
- Select
|
||||
- TimePicker
|
||||
- TreeSelect
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| block | Option to fit width to its parent's width | boolean | false | 4.24.0 |
|
||||
| orientation | Set direction of layout | `vertical` \| `horizontal` | `horizontal` | - |
|
||||
| size | Set child component size | `large` \| `middle` \| `small` | `middle` | 4.24.0 |
|
||||
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,27 @@
|
||||
# space Token
|
||||
|
||||
Use these variables through `theme.components.Space`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Space: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `addonPaddingInline` | `string \| number \| undefined` | Inline padding for Space.Addon cells.<br />ant-design 6.4.0 PR #56915. |
|
||||
| `addonPaddingBlock` | `string \| number \| undefined` | Block padding for Space.Addon cells.<br />ant-design 6.4.0 PR #56915. |
|
||||
Reference in new issue
Block a user