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,65 @@
|
||||
# _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: 'rail', desc: t('rail') },
|
||||
{ name: 'content', desc: t('content') },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Divider"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
|
||||
ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider :classes="classes" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
|
||||
ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider :classes="classes">
|
||||
Solid
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
|
||||
ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="left" variant="dotted" :classes="classes">
|
||||
Dotted
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi
|
||||
ista probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="right" variant="dashed" :classes="classes">
|
||||
Dashed
|
||||
</a-divider>
|
||||
These
|
||||
<a-divider orientation="vertical" :classes="classes" />
|
||||
are
|
||||
<a-divider orientation="vertical" :classes="classes" />
|
||||
vertical
|
||||
<a-divider orientation="vertical" :classes="classes" />
|
||||
Dividers
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
# Style Customization
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize the style of the divider.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-divider :style="{ borderWidth: '2px', borderColor: '#7cb305' }" />
|
||||
<a-divider :style="{ borderColor: '#7cb305' }" dashed />
|
||||
<a-divider :style="{ borderColor: '#7cb305' }" dashed>
|
||||
Text
|
||||
</a-divider>
|
||||
<a-divider type="vertical" :style="{ height: '60px', borderColor: '#7cb305' }" />
|
||||
<a-divider type="vertical" :style="{ height: '60px', borderColor: '#7cb305' }" dashed />
|
||||
|
||||
<div :style="{ display: 'flex', flexDirection: 'column', height: '50px', boxShadow: '0 0 1px red' }">
|
||||
<a-divider :style="{ background: 'rgba(0,255,0,0.05)' }" title-placement="left">
|
||||
Text
|
||||
</a-divider>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,26 @@
|
||||
# Horizontal
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Divider is horizontal by default. You can add text within Divider.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider dashed />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,37 @@
|
||||
# Text without heading style
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
You can use `plain` prop to set a lighter style of text.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider plain>
|
||||
Text
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="left" plain>
|
||||
Left Text
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="right" plain>
|
||||
Right Text
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
# Set the spacing size of the divider
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Control the size of divider by `size`, only works for horizontal layout.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider size="small" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider size="middle" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider size="large" />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { DividerProps } from 'antdv-next'
|
||||
|
||||
const classesObject: DividerProps['classes'] = {
|
||||
root: 'demo-divider-root',
|
||||
content: 'demo-divider-content',
|
||||
rail: 'demo-divider-rail',
|
||||
}
|
||||
|
||||
const classesFn: DividerProps['classes'] = (info) => {
|
||||
if (info?.props?.titlePlacement === 'start') {
|
||||
return {
|
||||
root: 'demo-divider-root--start',
|
||||
}
|
||||
}
|
||||
return {
|
||||
root: 'demo-divider-root--default',
|
||||
}
|
||||
}
|
||||
|
||||
const stylesObject: DividerProps['styles'] = {
|
||||
root: { borderWidth: '2px', borderStyle: 'dashed' },
|
||||
content: { fontStyle: 'italic' },
|
||||
rail: { opacity: 0.85 },
|
||||
}
|
||||
|
||||
const stylesFn: DividerProps['styles'] = (info) => {
|
||||
if (info?.props?.size === 'small') {
|
||||
return {
|
||||
root: { opacity: 0.6, cursor: 'default' },
|
||||
}
|
||||
}
|
||||
return {
|
||||
root: { backgroundColor: '#fafafa', borderColor: '#d9d9d9' },
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<a-divider :classes="classesObject">
|
||||
classes Object
|
||||
</a-divider>
|
||||
<a-divider title-placement="start" :classes="classesFn">
|
||||
classes Function
|
||||
</a-divider>
|
||||
<a-divider :styles="stylesObject">
|
||||
styles Object
|
||||
</a-divider>
|
||||
<a-divider size="small" :styles="stylesFn">
|
||||
styles Function
|
||||
</a-divider>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,37 @@
|
||||
# Variant
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
You can use `variant` to set the style of Divider, options are `solid`, `dashed` and `dotted`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider style="border-color:#7cb305">
|
||||
Solid
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider variant="dotted" style="border-color:#7cb305">
|
||||
Dotted
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider variant="dashed" style="border-color:#7cb305" dashed>
|
||||
Dashed
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# Vertical
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use `orientation="vertical"` make it vertical.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
Text
|
||||
<a-divider orientation="vertical" />
|
||||
<a href="#">Link</a>
|
||||
<a-divider orientation="vertical" />
|
||||
<a href="#">Link</a>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,49 @@
|
||||
# Divider with title
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Divider with inner text, use `title-placement` to align it.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider>Text</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="left">
|
||||
Left Text
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="right">
|
||||
Right Text
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="left" :styles="{ content: { margin: '0px' } }">
|
||||
Left Text margin with 0
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
<a-divider title-placement="right" :styles="{ content: { margin: '0 50px' } }">
|
||||
Right Text margin with 50px
|
||||
</a-divider>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
|
||||
probare, quae sunt a te dicta? Refert tamen, quo modo.
|
||||
</p>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Divider
|
||||
description: A divider line separates different content.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
- Divide sections of an article.
|
||||
- Divide inline text and links such as the operation column of table.
|
||||
|
||||
## Examples
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Horizontal | demo/horizontal.md |
|
||||
| Divider with title | demo/with-text.md |
|
||||
| Vertical | demo/vertical.md |
|
||||
| Text without heading style | demo/plain.md |
|
||||
| Variant | demo/variant.md |
|
||||
| Set the spacing size of the divider | demo/size.md |
|
||||
| Style Customization | demo/customize-style.md |
|
||||
| Custom semantic dom styling | demo/style-calss.md |
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
| Property | Description | Type | Default | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dashed | Whether line is dashed | boolean | false | × |
|
||||
| orientation | Whether line is horizontal or vertical | `horizontal` \| `vertical` | `horizontal` | × |
|
||||
| plain | Divider text show as plain style | boolean | true | × |
|
||||
| size | The size of divider. Only valid for horizontal layout | `small` \| `middle` \| `large` | - | × |
|
||||
| titlePlacement | The position of title inside divider | `start` \| `end` \| `center` | `center` | × |
|
||||
| variant | Whether line is dashed, dotted or solid | `dashed` \| `dotted` \| `solid` | `solid` | × |
|
||||
| vertical | Orientation, Simultaneously configure with `orientation` and prioritize `orientation` | boolean | false | × |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
@@ -0,0 +1,28 @@
|
||||
# divider Token
|
||||
|
||||
Use these variables through `theme.components.Divider`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Divider: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `textPaddingInline` | `CSSProperties` | Horizontal padding of text |
|
||||
| `orientationMargin` | `number \| undefined` | Distance between text and edge, which should be a number between 0 and 1. |
|
||||
| `verticalMarginInline` | `CSSProperties` | Horizontal margin of vertical Divider |
|
||||
Reference in new issue
Block a user