test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 19:28:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [space] (#10685)

Browse Source 
* docs(components): [space]
* Adjust API style
* export SpaceInstance

* Update docs/en-US/component/space.md

Co-authored-by: qiang <qw13131wang@gmail.com>

* Update docs/en-US/component/space.md

Co-authored-by: qiang <qw13131wang@gmail.com>

Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
Xc 2022-11-22 21:39:34 +08:00 committed by GitHub
parent 4d021bde98
commit c6d8589492
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
docs/en-US/component/space.md
View File

@ -119,22 +119,24 @@ space/fill-ratio
:::
## Space Attributes
## API
| Name | Description | Type | Available value | Default |
| ---------- | ------------------------------- | ---------------------------------- | --------------------------------------------------------------------------- | ---------- |
| alignment | Controls the alignment of items | string | [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | 'center' |
| class | Classname | string / Array / Object | - | - |
| direction | Placement direction | string | vertical/horizontal | horizontal |
| prefixCls | Prefix for space-items | string | el-space | - |
| style | Extra style rules | string / Array / Object | - | - |
| spacer | Spacer | string / number / VNode | - | - |
| size | Spacing size | string / number / [number, number] | - | 'small' |
| wrap | Auto wrapping | boolean | true / false | false |
| fill | Whether to fill the container | boolean | true / false | false |
| fill-ratio | Ratio of fill | number | - | 100 |
### Attributes
## Space Slot
| Name | Description | Type | Default |
| ---------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| alignment | Controls the alignment of items | ^[string]`'center' \| 'normal' \| 'stretch' \| ...` [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | center |
| class | Classname | ^[string] / ^[object] / ^[array] | - |
| direction | Placement direction | ^[string]`'vertical' \| 'horizontal'` | horizontal |
| prefixCls | Prefix for space-items | ^[string] | - |
| style | Extra style rules | ^[string] / ^[object]`CSSProperties \| CSSProperties[] \| string[]` | - |
| spacer | Spacer | ^[string] / ^[number] / ^[VNode] | - |
| size | Spacing size | ^[string]`'default' \| 'small' \| 'large'` / ^[number] / ^[array]`[number, number]` | small |
| wrap | Auto wrapping | ^[boolean] | false |
| fill | Whether to fill the container | ^[boolean] | false |
| fill-ratio | Ratio of fill | ^[number] | 100 |
### Slots
| name | description |
| ------- | ------------------ |

45
packages/components/space/src/space.ts
View File

@ -30,12 +30,17 @@ import type { Arrayable } from '@element-plus/utils'
import type { AlignItemsProperty } from 'csstype'
export const spaceProps = buildProps({
/**
* @description Placement direction
*/
direction: {
type: String,
values: ['horizontal', 'vertical'],
default: 'horizontal',
},
/**
* @description Classname
*/
class: {
type: definePropType<Arrayable<Record<string, boolean> | string>>([
String,
@ -44,36 +49,52 @@ export const spaceProps = buildProps({
]),
default: '',
},
/**
* @description Extra style rules
*/
style: {
type: definePropType<StyleValue>([String, Array, Object]),
default: '',
},
/**
* @description Controls the alignment of items
*/
alignment: {
type: definePropType<AlignItemsProperty>(String),
default: 'center',
},
/**
* @description Prefix for space-items
*/
prefixCls: {
type: String,
},
/**
* @description Spacer
*/
spacer: {
type: definePropType<VNodeChild>([Object, String, Number, Array]),
default: null,
validator: (val: unknown) => isVNode(val) || isNumber(val) || isString(val),
},
/**
* @description Auto wrapping
*/
wrap: Boolean,
/**
* @description Whether to fill the container
*/
fill: Boolean,
/**
* @description Ratio of fill
*/
fillRatio: {
type: Number,
default: 100,
},
/**
* @description Spacing size
*/
size: {
type: [String, Array, Number],
values: componentSizes,
@ -87,7 +108,7 @@ export const spaceProps = buildProps({
} as const)
export type SpaceProps = ExtractPropTypes<typeof spaceProps>
export default defineComponent({
const Space = defineComponent({
name: 'ElSpace',
props: spaceProps,
@ -223,3 +244,7 @@ export default defineComponent({
}
},
})
export type SpaceInstance = InstanceType<typeof Space>
export default Space