KGroupBadge
示例
Group Badges
engineering
design
marketing
sales5:1
Displays a group name as an auto-colored status badge with an optional ratio badge.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| group | string | null | null | Group name used to auto-determine the badge color. Falls back to "Unknown". |
| label | string | — | Optional label override. Defaults to the group value. |
| ratio | number | null | null | Optional numeric ratio displayed in a secondary badge next to the status badge. |
Emits
| Name | Parameters | Description |
|---|---|---|
| — | — | This component does not emit custom events. |
Slots
| Name | Description |
|---|---|
| — | This component does not provide slots. |
Basic Usage
vue
<script setup>
import { KGroupBadge } from '@kK-2004/ui-component'
</script>
<template>
<KGroupBadge group="engineering" :ratio="3" />
</template>