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,34 @@
|
||||
# _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'), version: '1.0.0' },
|
||||
{ name: 'header', desc: t('header'), version: '1.0.0' },
|
||||
{ name: 'section', desc: t('section'), version: '1.0.0' },
|
||||
{ name: 'avatar', desc: t('avatar'), version: '1.0.0' },
|
||||
{ name: 'title', desc: t('title'), version: '1.0.0' },
|
||||
{ name: 'paragraph', desc: t('paragraph'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Skeleton"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-skeleton avatar :paragraph="{ rows: 4 }" :classes="classes" />
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
# _semantic_element
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import type { SegmentedOptions } from 'antdv-next'
|
||||
import { computed, ref } from 'vue'
|
||||
import { SemanticPreview } from '@/components/semantic'
|
||||
import { useComponentLocale } from '@/composables/use-locale'
|
||||
import { locales } from '../locales'
|
||||
|
||||
type SkeletonElement = 'Avatar' | 'Button' | 'Input' | 'Image' | 'Node'
|
||||
const internalOptions: SegmentedOptions = ['Avatar', 'Button', 'Input', 'Image', 'Node']
|
||||
|
||||
const element = ref<SkeletonElement>('Avatar')
|
||||
|
||||
const componentMap: Record<SkeletonElement, string> = {
|
||||
Avatar: 'a-skeleton-avatar',
|
||||
Button: 'a-skeleton-button',
|
||||
Input: 'a-skeleton-input',
|
||||
Image: 'a-skeleton-image',
|
||||
Node: 'a-skeleton-node',
|
||||
}
|
||||
|
||||
const { t } = useComponentLocale(locales)
|
||||
|
||||
const semantics = computed(() => [
|
||||
{ name: 'root', desc: t('element.root'), version: '1.0.0' },
|
||||
{ name: 'content', desc: t('element.content'), version: '1.0.0' },
|
||||
])
|
||||
|
||||
const componentName = computed(() => `Skeleton.${element.value}`)
|
||||
const currentComponent = computed(() => componentMap[element.value])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
:component-name="componentName"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-flex vertical :style="{ width: 'fit-content', marginInlineEnd: 'auto' }">
|
||||
<a-segmented v-model:value="element" :options="internalOptions" />
|
||||
<a-divider title-placement="start" plain>
|
||||
{{ t('element.preview') }}
|
||||
</a-divider>
|
||||
<component :is="currentComponent" :classes="classes" />
|
||||
</a-flex>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,13 @@
|
||||
# Active Animation
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Display active animation.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-skeleton active />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,13 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Simplest Skeleton usage.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-skeleton />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,39 @@
|
||||
# Contains sub component
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Skeleton contains sub component.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const loading = ref(false)
|
||||
function showSkeleton() {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
}, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space vertical style="width: 100%" :size="16">
|
||||
<a-skeleton :loading="loading" active>
|
||||
<h4 style="margin-bottom: 16px">
|
||||
Antdv Next, a design language
|
||||
</h4>
|
||||
<p>
|
||||
We supply a series of design principles, practical patterns and high quality design
|
||||
resources (Sketch and Axure), to help people create their product prototypes beautifully
|
||||
and efficiently.
|
||||
</p>
|
||||
</a-skeleton>
|
||||
<a-button :disabled="loading" @click="showSkeleton">
|
||||
Show Skeleton
|
||||
</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,13 @@
|
||||
# Complex combination
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Complex combination with avatar and multiple paragraphs.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-skeleton avatar :paragraph="{ rows: 4 }" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,93 @@
|
||||
# Button/Avatar/Input/Image/Node
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Skeleton Button, Avatar, Input, Image and Node.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { DotChartOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
type SizeType = 'large' | 'medium' | 'small'
|
||||
type ButtonShapeType = 'circle' | 'square' | 'round' | 'default'
|
||||
type AvatarShapeType = 'circle' | 'square'
|
||||
|
||||
const active = ref(false)
|
||||
const block = ref(false)
|
||||
const size = ref<SizeType>('medium')
|
||||
const buttonShape = ref<ButtonShapeType>('default')
|
||||
const avatarShape = ref<AvatarShapeType>('circle')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="medium" vertical>
|
||||
<a-space>
|
||||
<a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block" />
|
||||
<a-skeleton-avatar :active="active" :size="size" :shape="avatarShape" />
|
||||
<a-skeleton-input :active="active" :size="size" />
|
||||
</a-space>
|
||||
<a-skeleton-button :active="active" :size="size" :shape="buttonShape" :block="block" />
|
||||
<a-skeleton-input :active="active" :size="size" :block="block" />
|
||||
<a-space>
|
||||
<a-skeleton-image :active="active" />
|
||||
<a-skeleton-node :active="active" style="width: 160px" />
|
||||
<a-skeleton-node :active="active">
|
||||
<DotChartOutlined style="font-size: 40px; color: #bfbfbf" />
|
||||
</a-skeleton-node>
|
||||
</a-space>
|
||||
<a-divider />
|
||||
<a-form layout="inline" style="margin: 16px 0">
|
||||
<a-space :size="16" wrap>
|
||||
<a-form-item label="Active">
|
||||
<a-switch v-model:value="active" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Button and Input Block">
|
||||
<a-switch v-model:value="block" />
|
||||
</a-form-item>
|
||||
<a-form-item label="Size">
|
||||
<a-radio-group v-model:value="size">
|
||||
<a-radio-button value="large">
|
||||
Large
|
||||
</a-radio-button>
|
||||
<a-radio-button value="medium">
|
||||
Medium
|
||||
</a-radio-button>
|
||||
<a-radio-button value="small">
|
||||
Small
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="Button Shape">
|
||||
<a-radio-group v-model:value="buttonShape">
|
||||
<a-radio-button value="default">
|
||||
Default
|
||||
</a-radio-button>
|
||||
<a-radio-button value="square">
|
||||
Square
|
||||
</a-radio-button>
|
||||
<a-radio-button value="round">
|
||||
Round
|
||||
</a-radio-button>
|
||||
<a-radio-button value="circle">
|
||||
Circle
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="Avatar Shape">
|
||||
<a-radio-group v-model:value="avatarShape">
|
||||
<a-radio-button value="square">
|
||||
Square
|
||||
</a-radio-button>
|
||||
<a-radio-button value="circle">
|
||||
Circle
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-space>
|
||||
</a-form>
|
||||
</a-flex>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,70 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const classes = {
|
||||
root: 'skeleton-root',
|
||||
header: 'skeleton-header',
|
||||
}
|
||||
|
||||
const styles = {
|
||||
avatar: {
|
||||
border: '1px solid #aaa',
|
||||
},
|
||||
title: {
|
||||
border: '1px solid #aaa',
|
||||
},
|
||||
}
|
||||
|
||||
function stylesFn(info: { props: { active?: boolean } }) {
|
||||
if (info.props?.active) {
|
||||
return {
|
||||
root: {
|
||||
border: '1px solid rgba(229, 243, 254, 0.3)',
|
||||
},
|
||||
title: {
|
||||
backgroundColor: 'rgba(229, 243, 254, 0.5)',
|
||||
height: '20px',
|
||||
borderRadius: '20px',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-flex gap="middle">
|
||||
<a-skeleton
|
||||
:classes="classes"
|
||||
:styles="styles"
|
||||
avatar
|
||||
:paragraph="false"
|
||||
/>
|
||||
<a-skeleton
|
||||
:classes="{ ...classes, paragraph: 'skeleton-paragraph' }"
|
||||
:styles="stylesFn"
|
||||
active
|
||||
/>
|
||||
</a-flex>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.skeleton-root {
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.skeleton-header {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeleton-paragraph > li {
|
||||
background-color: rgba(229, 243, 254, 0.5);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
title: Skeleton
|
||||
description: Provide a placeholder while you wait for content to load, or to visualize content that doesn't exist yet.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
- When a resource needs long time to load.
|
||||
- When the component contains lots of information, such as List or Card.
|
||||
- Only works when loading data for the first time.
|
||||
- Could be replaced by Spin in any situation, but can provide a better user experience.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Complex combination | demo/complex.md |
|
||||
| Active Animation | demo/active.md |
|
||||
| Button/Avatar/Input/Image/Node | demo/element.md |
|
||||
| Contains sub component | demo/children.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Skeleton
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - | × |
|
||||
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#skeletonavatarprops) | false | - | × |
|
||||
| loading | Display the skeleton when true | boolean | - | - | × |
|
||||
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#skeletonparagraphprops) | true | - | × |
|
||||
| round | Show paragraph and title radius when true | boolean | false | - | × |
|
||||
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#skeletontitleprops) | true | - | × |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - | ✓ |
|
||||
|
||||
### SkeletonAvatar
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect, only valid when used avatar independently | boolean | false | - |
|
||||
| shape | Set the shape of avatar | `circle` \| `square` | `circle` | - |
|
||||
| size | Set the size of avatar | number \| `large` \| `medium` \| `small` | `medium` | - |
|
||||
|
||||
### SkeletonTitle
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| width | Set the width of title | number \| string | - | - |
|
||||
|
||||
### SkeletonParagraph
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| rows | Set the row count of paragraph | number | - | - |
|
||||
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - | - |
|
||||
|
||||
### SkeletonAvatar
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - |
|
||||
| shape | Set the shape of avatar | `circle` \| `square` | `circle` | - |
|
||||
| size | Set the size of avatar | number \| `large` \| `medium` \| `small` | `medium` | - |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |
|
||||
|
||||
### SkeletonButton
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - |
|
||||
| block | Option to fit button width to its parent width | boolean | false | - |
|
||||
| shape | Set the shape of button | `circle` \| `round` \| `square` \| `default` | - | - |
|
||||
| size | Set the size of button | `large` \| `medium` \| `small` | `medium` | - |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |
|
||||
|
||||
### SkeletonInput
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - |
|
||||
| size | Set the size of input | `large` \| `medium` \| `small` | `medium` | - |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |
|
||||
|
||||
### SkeletonImage
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |
|
||||
|
||||
### SkeletonNode
|
||||
|
||||
#### Props
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| active | Show animation effect | boolean | false | - |
|
||||
| classes | Customize class for each semantic structure inside the component | SkeletonClassNamesType | - | - |
|
||||
| styles | Customize inline style for each semantic structure inside the component | SkeletonStylesType | - | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
|
||||
### Skeleton.Element
|
||||
|
||||
| _semantic_element | demo/_semantic_element.md |
|
||||
@@ -0,0 +1,31 @@
|
||||
# skeleton Token
|
||||
|
||||
Use these variables through `theme.components.Skeleton`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Skeleton: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `gradientFromColor` | `string` | Start color of gradient |
|
||||
| `gradientToColor` | `string` | End color of gradient |
|
||||
| `titleHeight` | `string \| number` | Height of title skeleton |
|
||||
| `blockRadius` | `number` | Border radius of skeleton |
|
||||
| `paragraphMarginTop` | `number` | Margin top of paragraph skeleton |
|
||||
| `paragraphLiHeight` | `number` | Line height of paragraph skeleton |
|
||||
Reference in new issue
Block a user