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,45 @@
|
||||
# _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: 'image', desc: t('image'), version: '1.0.0' },
|
||||
{ name: 'description', desc: t('description'), version: '1.0.0' },
|
||||
{ name: 'footer', desc: t('footer'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Empty"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-empty
|
||||
:image="1"
|
||||
:styles="{ image: { height: '60px' } }"
|
||||
:classes="classes"
|
||||
>
|
||||
<template #description>
|
||||
<a-typography-text>
|
||||
Customize <a href="#API">Description</a>
|
||||
</a-typography-text>
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Create Now
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,13 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Basic empty state.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-empty />
|
||||
</template>
|
||||
```
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
# ConfigProvider
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use ConfigProvider to customize empty content.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { SmileOutlined } from '@antdv-next/icons'
|
||||
import { h, ref } from 'vue'
|
||||
|
||||
const customize = ref(true)
|
||||
const controlStyle = { width: '200px' }
|
||||
|
||||
function renderEmpty() {
|
||||
return h(
|
||||
'div',
|
||||
{ style: { textAlign: 'center' } },
|
||||
[
|
||||
h(SmileOutlined, { style: { fontSize: '20px' } }),
|
||||
h('p', 'Data Not Found'),
|
||||
],
|
||||
)
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{ title: 'Name', dataIndex: 'name', key: 'name' },
|
||||
{ title: 'Age', dataIndex: 'age', key: 'age' },
|
||||
]
|
||||
|
||||
const renderTransferItem = (item: any) => item.title
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-switch
|
||||
v-model:checked="customize"
|
||||
checked-children="customize"
|
||||
un-checked-children="default"
|
||||
/>
|
||||
<a-divider />
|
||||
<a-config-provider :render-empty="customize ? renderEmpty : undefined">
|
||||
<a-space vertical style="width: 100%">
|
||||
<h4>Select</h4>
|
||||
<a-select :style="controlStyle" />
|
||||
<h4>TreeSelect</h4>
|
||||
<a-tree-select :style="controlStyle" :tree-data="[]" />
|
||||
<h4>Cascader</h4>
|
||||
<a-cascader :style="controlStyle" :options="[]" show-search />
|
||||
<h4>Transfer</h4>
|
||||
<a-transfer :data-source="[]" :target-keys="[]" :render="renderTransferItem" />
|
||||
<h4>Table</h4>
|
||||
<a-table style="margin-top: 8px" :columns="columns" :data-source="[]" />
|
||||
</a-space>
|
||||
<!-- <template #renderEmpty> -->
|
||||
<!-- <div style="text-align: center"> -->
|
||||
<!-- <SmileOutlined style="font-size: 20px" /> -->
|
||||
<!-- <p>Data Not Found</p> -->
|
||||
<!-- </div> -->
|
||||
<!-- </template> -->
|
||||
</a-config-provider>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Customize
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Customize description and extra content.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-empty
|
||||
:styles="{ image: { height: '60px' } }"
|
||||
image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
|
||||
>
|
||||
<template #description>
|
||||
Customize <a href="#API">Description</a>
|
||||
</template>
|
||||
<a-button type="primary">
|
||||
Create Now
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,13 @@
|
||||
# No description
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Hide default description.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<a-empty :description="false" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,17 @@
|
||||
# Choose image
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Choose built-in image.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { Empty } from 'antdv-next'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,50 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Custom semantic dom styling.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const classes = {
|
||||
root: 'empty-demo-root',
|
||||
image: 'empty-demo-image',
|
||||
description: 'empty-demo-description',
|
||||
footer: 'empty-demo-footer',
|
||||
}
|
||||
|
||||
const styles = {
|
||||
root: { padding: '24px', background: '#fafafa' },
|
||||
image: { height: '60px' },
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-empty
|
||||
description="No Data"
|
||||
:classes="classes"
|
||||
:styles="styles"
|
||||
>
|
||||
<a-button type="primary">
|
||||
Create
|
||||
</a-button>
|
||||
</a-empty>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.empty-demo-root {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.empty-demo-description {
|
||||
color: #1677ff;
|
||||
}
|
||||
|
||||
.empty-demo-footer :deep(.ant-btn) {
|
||||
border-radius: 999px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Empty
|
||||
description: Empty state placeholder.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
|
||||
- When there is no data provided, display for friendly tips.
|
||||
- User tutorial to create something in a fresh new situation.
|
||||
|
||||
## Examples
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Choose image | demo/simple.md |
|
||||
| Customize | demo/customize.md |
|
||||
| ConfigProvider | demo/config-provider.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
| No description | demo/description.md |
|
||||
|
||||
## API
|
||||
|
||||
Common props ref：[Common props](../../docs/vue/common-props.md)
|
||||
|
||||
### Props
|
||||
|
||||
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | EmptyClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | EmptyStylesType | - | - | ✓ |
|
||||
| image | Customize image. Will treat as image url when string provided | VueNode | `Empty.PRESENTED_IMAGE_DEFAULT` | - | ✓ |
|
||||
| description | Customize description | VueNode | - | - | × |
|
||||
| rootClass | Root container class | string | - | - | × |
|
||||
| prefixCls | Prefix class name | string | - | - | × |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| image | Customize image. Will treat as image url when string provided | () => any | - |
|
||||
| description | Customize description | () => any | - |
|
||||
| default | Footer content | () => any | - |
|
||||
|
||||
## Built-in images
|
||||
- Empty.PRESENTED_IMAGE_SIMPLE
|
||||
|
||||
<div class="site-empty-buildIn-img site-empty-buildIn-simple"></div>
|
||||
|
||||
- Empty.PRESENTED_IMAGE_DEFAULT
|
||||
|
||||
<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
|
||||
|
||||
<style>
|
||||
.site-empty-buildIn-img {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.site-empty-buildIn-simple {
|
||||
width: 55px;
|
||||
height: 35px;
|
||||
background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
|
||||
}
|
||||
.site-empty-buildIn-default {
|
||||
width: 121px;
|
||||
height: 116px;
|
||||
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
||||
}
|
||||
</style>
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
Reference in new issue
Block a user