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,32 @@
|
||||
# _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: 'indicator', desc: t('indicator'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SemanticPreview
|
||||
component-name="Badge"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<a-badge :count="5" :classes="classes">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</template>
|
||||
```
|
||||
+39
@@ -0,0 +1,39 @@
|
||||
# _semantic_ribbon
|
||||
|
||||
## 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('ribbonRoot'), version: '1.0.0' },
|
||||
{ name: 'indicator', desc: t('ribbonIndicator'), version: '1.0.0' },
|
||||
{ name: 'content', desc: t('content'), version: '1.0.0' },
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; flex-direction: column; gap: 24px;">
|
||||
<SemanticPreview
|
||||
component-name="Badge"
|
||||
:semantics="semantics"
|
||||
>
|
||||
<template #default="{ classes }">
|
||||
<div style="width: 100%;">
|
||||
<a-badge-ribbon text="Hippies" color="magenta" :classes="classes">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
</div>
|
||||
</template>
|
||||
</SemanticPreview>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
# Basic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZero` to show it.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ClockCircleOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space size="middle">
|
||||
<a-badge :count="5">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="0" show-zero>
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge>
|
||||
<template #count>
|
||||
<ClockCircleOutlined style="color: #f5222d" />
|
||||
</template>
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,67 @@
|
||||
# Dynamic
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The count will be animated as it changes.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const count = ref(5)
|
||||
const show = ref(true)
|
||||
|
||||
function increase() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
function decline() {
|
||||
let newCount = count.value - 1
|
||||
if (newCount < 0) {
|
||||
newCount = 0
|
||||
}
|
||||
count.value = newCount
|
||||
}
|
||||
|
||||
function random() {
|
||||
const newCount = Math.floor(Math.random() * 100)
|
||||
count.value = newCount
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space vertical>
|
||||
<a-space size="large">
|
||||
<a-badge :count="count">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-space-compact>
|
||||
<a-button @click="decline">
|
||||
<template #icon>
|
||||
<MinusOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button @click="increase">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
<a-button @click="random">
|
||||
<template #icon>
|
||||
<QuestionOutlined />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-space-compact>
|
||||
</a-space>
|
||||
<a-space size="large">
|
||||
<a-badge :dot="show">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-switch v-model:checked="show" />
|
||||
</a-space>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,45 @@
|
||||
# Colorful Badge
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const colors = [
|
||||
'pink',
|
||||
'red',
|
||||
'yellow',
|
||||
'orange',
|
||||
'cyan',
|
||||
'green',
|
||||
'blue',
|
||||
'purple',
|
||||
'geekblue',
|
||||
'magenta',
|
||||
'volcano',
|
||||
'gold',
|
||||
'lime',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-divider orientation="left">
|
||||
Presets
|
||||
</a-divider>
|
||||
<a-space vertical>
|
||||
<a-badge v-for="color in colors" :key="color" :color="color" :text="color" />
|
||||
</a-space>
|
||||
<a-divider orientation="left">
|
||||
Custom
|
||||
</a-divider>
|
||||
<a-space vertical>
|
||||
<a-badge color="#f50" text="#f50" />
|
||||
<a-badge color="rgb(45, 183, 245)" text="rgb(45, 183, 245)" />
|
||||
<a-badge color="hsl(102, 53%, 61%)" text="hsl(102, 53%, 61%)" />
|
||||
<a-badge color="hwb(205 6% 9%)" text="hwb(205 6% 9%)" />
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,24 @@
|
||||
# Red badge
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
This will simply display a red badge, without a specific count. If count equals 0, it won't display the dot.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { NotificationOutlined } from '@antdv-next/icons'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space>
|
||||
<a-badge dot>
|
||||
<NotificationOutlined style="font-size: 16px" />
|
||||
</a-badge>
|
||||
<a-badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
# Clickable
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The badge can be wrapped with `a` tag to make it linkable.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a href="#">
|
||||
<a-badge :count="5">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,34 @@
|
||||
# Standalone
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Used in standalone when children is empty.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ClockCircleOutlined } from '@antdv-next/icons'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const show = ref(true)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space>
|
||||
<a-switch v-model:checked="show" />
|
||||
<a-badge :count="show ? 11 : 0" show-zero color="#faad14" />
|
||||
<a-badge :count="show ? 25 : 0" />
|
||||
<a-badge :count="show ? 1 : 0">
|
||||
<template #count>
|
||||
<ClockCircleOutlined style="color: #f5222d" />
|
||||
</template>
|
||||
</a-badge>
|
||||
<a-badge
|
||||
class="site-badge-count-109"
|
||||
:count="show ? 109 : 0"
|
||||
:style="{ backgroundColor: '#52c41a' }"
|
||||
/>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,18 @@
|
||||
# Offset
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-badge :count="5" :offset="[10, 10]">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,29 @@
|
||||
# Overflow Count
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
`${overflowCount}+` is displayed when count is larger than `overflowCount`. The default value of `overflowCount` is `99`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space size="large">
|
||||
<a-badge :count="99">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="100">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="99" :overflow-count="10">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="1000" :overflow-count="999">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
# Ribbon
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Use ribbon badge.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space vertical size="middle" style="width: 100%">
|
||||
<a-badge-ribbon text="Hippies">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="pink">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="red">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="cyan">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="green">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="purple">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="volcano">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon text="Hippies" color="magenta">
|
||||
<a-card title="Pushes open the window" size="small">
|
||||
and raises the spyglass.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Size
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Set size of numeral Badge.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space size="middle">
|
||||
<a-badge size="medium" :count="5">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge size="small" :count="5">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,30 @@
|
||||
# Status
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
Standalone badge with status.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space>
|
||||
<a-badge status="success" />
|
||||
<a-badge status="error" />
|
||||
<a-badge status="default" />
|
||||
<a-badge status="processing" />
|
||||
<a-badge status="warning" />
|
||||
</a-space>
|
||||
<br>
|
||||
<a-space vertical>
|
||||
<a-badge status="success" text="Success" />
|
||||
<a-badge status="error" text="Error" />
|
||||
<a-badge status="default" text="Default" />
|
||||
<a-badge status="processing" text="Processing" />
|
||||
<a-badge status="warning" text="Warning" />
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,96 @@
|
||||
# Custom semantic dom styling
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const badgeClasses = {
|
||||
indicator: 'custom-badge-indicator',
|
||||
}
|
||||
|
||||
const ribbonClasses = {
|
||||
root: 'custom-ribbon-root',
|
||||
}
|
||||
|
||||
const badgeStyles = {
|
||||
root: {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
}
|
||||
|
||||
const ribbonStyles = {
|
||||
indicator: {
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
},
|
||||
}
|
||||
|
||||
function badgeStylesFn(info: any) {
|
||||
if (info.props.size === 'default' || info.props.size === 'medium') {
|
||||
return {
|
||||
indicator: {
|
||||
fontSize: '14px',
|
||||
backgroundColor: '#696FC7',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
function ribbonStylesFn(info: any) {
|
||||
if (info.props.color === '#696FC7') {
|
||||
return {
|
||||
content: {
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
indicator: {
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
},
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space size="large" vertical>
|
||||
<a-flex gap="middle">
|
||||
<a-badge size="small" :count="5" :classes="badgeClasses" :styles="badgeStyles">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="5" :classes="badgeClasses" :styles="badgeStylesFn">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a-flex>
|
||||
<a-flex vertical gap="middle">
|
||||
<a-badge-ribbon text="Custom Ribbon" :classes="ribbonClasses" :styles="ribbonStyles">
|
||||
<a-card title="Card with custom ribbon" size="small">
|
||||
This card has a customized ribbon with semantic classNames and styles.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
<a-badge-ribbon
|
||||
text="Custom Ribbon"
|
||||
color="#696FC7"
|
||||
:classes="ribbonClasses"
|
||||
:styles="ribbonStylesFn"
|
||||
>
|
||||
<a-card title="Card with custom ribbon" size="small">
|
||||
This card has a customized ribbon with semantic classNames and styles.
|
||||
</a-card>
|
||||
</a-badge-ribbon>
|
||||
</a-flex>
|
||||
</a-space>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.custom-badge-indicator {
|
||||
font-size: 10px;
|
||||
}
|
||||
.custom-ribbon-root {
|
||||
width: 400px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
# Title
|
||||
|
||||
## Description (en-US)
|
||||
|
||||
The badge will display `title` when hovered over, instead of `count`.
|
||||
|
||||
## Source
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a-space size="large">
|
||||
<a-badge :count="5" title="Custom hover text">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
<a-badge :count="-5" title="Negative">
|
||||
<a-avatar shape="square" size="large" />
|
||||
</a-badge>
|
||||
</a-space>
|
||||
</template>
|
||||
```
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Small numerical value or status descriptor for UI elements.
|
||||
---
|
||||
|
||||
## When To Use
|
||||
Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.
|
||||
|
||||
## Demos
|
||||
|
||||
| Demo | Path |
|
||||
| --- | --- |
|
||||
| Basic | demo/basic.md |
|
||||
| Standalone | demo/no-wrapper.md |
|
||||
| Overflow Count | demo/overflow.md |
|
||||
| Red badge | demo/dot.md |
|
||||
| Dynamic | demo/change.md |
|
||||
| Clickable | demo/link.md |
|
||||
| Offset | demo/offset.md |
|
||||
| Size | demo/size.md |
|
||||
| Status | demo/status.md |
|
||||
| Colorful Badge | demo/colorful.md |
|
||||
| Ribbon | demo/ribbon.md |
|
||||
| Custom semantic dom styling | demo/style-class.md |
|
||||
| Title | demo/title.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) |
|
||||
| --- | --- | --- | --- | --- | --- |
|
||||
| count | Number to show in badge | VueNode | - | - | × |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | false | - | × |
|
||||
| overflowCount | Max count to show | number | 99 | - | × |
|
||||
| dot | Whether to display a red dot instead of `count` | boolean | false | - | × |
|
||||
| scrollNumberPrefixCls | - | string | - | - | × |
|
||||
| status | Set Badge as a status dot | PresetStatusColorType | - | - | × |
|
||||
| color | Customize Badge dot color | LiteralUnion<PresetColorKey> | - | - | × |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | VueNode | - | - | × |
|
||||
| size | If `count` is set, `size` sets the size of badge | 'default' \| 'small' | - | - | × |
|
||||
| offset | Set offset of the badge dot | [number \| string, number \| string] | - | - | × |
|
||||
| title | Text to show when hovering over the badge; set `null` or `false` to remove the native title | string \| null \| false | - | null/false: 1.4.0 | × |
|
||||
| classes | Customize class for each semantic structure inside the component. Supports object or function. | BadgeClassNamesType | - | - | ✓ |
|
||||
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | BadgeStylesType | - | - | ✓ |
|
||||
|
||||
### Slots
|
||||
|
||||
| Slot | Description | Type | Version |
|
||||
| --- | --- | --- | --- |
|
||||
| count | Number to show in badge | () => any | - |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | () => any | - |
|
||||
|
||||
## Semantic DOM
|
||||
|
||||
### Badge
|
||||
|
||||
| _semantic | demo/_semantic.md |
|
||||
|
||||
### BadgeRibbon
|
||||
|
||||
| _semantic_ribbon | demo/_semantic_ribbon.md |
|
||||
@@ -0,0 +1,34 @@
|
||||
# badge Token
|
||||
|
||||
Use these variables through `theme.components.Badge`. This document lists definitions only and does not include values.
|
||||
|
||||
```vue
|
||||
<a-config-provider
|
||||
:theme="{
|
||||
token: {
|
||||
// Global token configuration
|
||||
},
|
||||
components: {
|
||||
Badge: {
|
||||
// Token name: value
|
||||
},
|
||||
},
|
||||
}"
|
||||
>
|
||||
...
|
||||
</a-config-provider>
|
||||
```
|
||||
|
||||
## Token List
|
||||
|
||||
| Token | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `indicatorZIndex` | `string \| number` | z-index of badge |
|
||||
| `indicatorHeight` | `string \| number` | Height of badge |
|
||||
| `indicatorHeightSM` | `string \| number` | Height of small badge |
|
||||
| `dotSize` | `number` | Size of dot badge |
|
||||
| `textFontSize` | `number` | Font size of badge text |
|
||||
| `textFontSizeSM` | `number` | Font size of small badge text |
|
||||
| `textFontWeight` | `string \| number` | Font weight of badge text |
|
||||
| `statusSize` | `number` | Size of status badge |
|
||||
| `paddingInline` | `string \| number` | Inline padding of badge |
|
||||
Reference in new issue
Block a user