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,56 @@
|
||||
# align
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set align.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const justifyOptions = [
|
||||
'flex-start',
|
||||
'center',
|
||||
'flex-end',
|
||||
'space-between',
|
||||
'space-around',
|
||||
'space-evenly',
|
||||
]
|
||||
|
||||
const alignOptions = ['flex-start', 'center', 'flex-end']
|
||||
const justify = ref(justifyOptions[0])
|
||||
const alignItems = ref(alignOptions[0])
|
||||
const boxStyle: CSSProperties = {
|
||||
width: '100%',
|
||||
height: '120px',
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #40a9ff',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle" align="start" vertical>
|
||||
<p>Select justify :</p>
|
||||
<a-segmented v-model:value="justify" :options="justifyOptions" />
|
||||
<p>Select align :</p>
|
||||
<a-segmented v-model:value="alignItems" :options="alignOptions" />
|
||||
<a-flex :style="{ ...boxStyle }" :justify="justify" :align="alignItems">
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
<a-button type="primary">
|
||||
Primary
|
||||
</a-button>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,40 @@
|
||||
# basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The basic usage.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref('horizontal')
|
||||
const baseStyle: CSSProperties = {
|
||||
width: '25%',
|
||||
height: '54px',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle" vertical>
|
||||
<a-radio-group v-model:value="value">
|
||||
<a-radio value="horizontal">
|
||||
horizontal
|
||||
</a-radio>
|
||||
<a-radio value="vertical">
|
||||
vertical
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
<a-flex :vertical="value === 'vertical'">
|
||||
<div
|
||||
v-for="(item, index) in new Array(4)"
|
||||
:key="item"
|
||||
:style="{ ...baseStyle, background: `${index % 2 ? '#1677ff' : '#1677ffbf'}` }"
|
||||
/>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
# combination
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Nesting can achieve more complex layouts.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { CSSProperties } from 'vue'
|
||||
|
||||
const cardStyle: CSSProperties = {
|
||||
width: '620px',
|
||||
}
|
||||
const imgStyle: CSSProperties = {
|
||||
display: 'block',
|
||||
width: '273px',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-card :style="cardStyle" :styles="{ body: { padding: 0, overflow: 'hidden' } }">
|
||||
<a-flex justify="space-between">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
|
||||
:style="imgStyle"
|
||||
>
|
||||
<a-flex vertical align="flex-end" justify="space-between" :style="{ padding: '32px' }">
|
||||
<a-typography>
|
||||
<a-typography-title :level="3">
|
||||
“antd is an enterprise-class UI design language and Vue UI library.”
|
||||
</a-typography-title>
|
||||
</a-typography>
|
||||
<a-button type="primary" href="https://antdv.com" target="_blank">
|
||||
Get Start
|
||||
</a-button>
|
||||
</a-flex>
|
||||
</a-flex>
|
||||
</a-card>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,53 @@
|
||||
# gap
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set the `gap` between elements, which has three preset sizes: `small`, `middle`, `large`, You can also customize the gap size.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
type SizeType = 'small' | 'middle' | 'large' | undefined
|
||||
|
||||
const gapSize = ref<SizeType | 'customize'>('small')
|
||||
|
||||
const customGapSize = ref<number>(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle" vertical>
|
||||
<a-radio-group v-model:value="gapSize">
|
||||
<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>
|
||||
<template v-if="gapSize === 'customize'">
|
||||
<a-slider v-model:value="customGapSize" />
|
||||
</template>
|
||||
<a-flex :gap="gapSize !== 'customize' ? gapSize : customGapSize">
|
||||
<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-flex>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# wrap
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Auto wrap line.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-flex wrap="wrap" gap="small">
|
||||
<a-button v-for="item in new Array(24)" :key="item" type="primary">
|
||||
Button
|
||||
</a-button>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Empty
|
||||
description: Empty state placeholder.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
- Good for setting spacing between elements.
|
||||
- Suitable for setting various horizontal and vertical alignments.
|
||||
|
||||
### Difference with Space 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.
|
||||
|
||||
## Examples
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| basic | demo/basic.md |
|
||||
| align | demo/align.md |
|
||||
| gap | demo/gap.md |
|
||||
| wrap | demo/wrap.md |
|
||||
| combination | demo/combination.md |
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| vertical | Is direction of the flex vertical, use `flex-direction: column` | boolean | `false` | - | ✓ |
|
||||
| wrap | Set whether the element is displayed in a single line or in multiple lines | boolean \| CSSProperties['flexWrap'] | nowrap | boolean: 5.17.0 | × |
|
||||
| justify | Sets the alignment of elements in the direction of the main axis | CSSProperties['justifyContent'] | normal | - | × |
|
||||
| align | Sets the alignment of elements in the direction of the cross axis | CSSProperties['alignItems'] | normal | - | × |
|
||||
| flex | flex CSS shorthand properties | CSSProperties['flex'] | normal | - | × |
|
||||
| gap | Sets the gap between grids | CSSProperties['gap'] \| SizeType | - | - | × |
|
||||
| component | custom element type | any | `div` | - | × |
|
||||
Reference in new issue
Block a user