gufaUIBadge
Basic badge with icon.
Usage
Import
ts
import { Abadge } from "@agufaui/${framework name}";
Html
<abadge /> or <Abadge />
Configuration
Theme component name: abadge
Showcase
githubvuesveltegithubvuesvelte
Click to see code
vue
<abadge v="github" t="rec" c="text-white bg-black" />
<abadge v="vue" t="rec" c="text-white bg-gradient-to-br from-blue-2 to-green-5" />
<abadge v="svelte" t="rec" c="text-white bg-red-5" />
<abadge
v="github"
t="round"
c="text-white bg-gradient-to-br from-purple-2 to-black shadow-md shadow-gray-4"
/>
<abadge
v="vue"
t="round"
c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3"
/>
<abadge
v="svelte"
t="round"
c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
/>
<abadge i="i-mdi:github" t="icon" />
<abadge i="i-vscode-icons:file-type-vue" t="icon" />
<abadge i="i-vscode-icons:file-type-svelte" t="icon" />
<abadge i="i-ri:github-line" t="circle" c="text-white bg-black" />
<abadge i="i-uim:vuejs" t="circle" c="text-white bg-gradient-to-br from-blue-2 to-green-5" />
<abadge i="i-teenyicons:svelte-outline" t="circle" c="text-white bg-red-5" />
<abutton v="Button" t="focus" c="bg-green-6 hover:bg-green-7 focus:ring-green-5 space-x-1">
<span class="text-white">Button</span>
<abadge v="4" vc="bg-white px-0.8 rounded-sm shadow-md" c="flex" />
</abutton>Slot
One default slot replace badge content including icon.
AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IABadgeProps } from "../../types/basic/ABadge";
export const DABadgeDefault = {
c: "text-xs",
};
export const DABadgeRec = {
[CUseType]: CDefaultType,
c: "px-2 py-0.5",
};
export const DABadgeRound = {
[CUseType]: CDefaultType,
c: "rounded-full px-2 py-0.5",
};
export const DABadgeIcon = {
c: "text-xl",
};
export const DABadgeCircle = {
[CUseType]: CDefaultType,
c: "rounded-1/2 aspect-square h-6",
};
export const DABadgeLabel = {
c: "text-base",
};
export const DABadgePre = {
c: "rounded-l-lg text-gray-9 text-lg bg-gray-2 px-2 h-10 shadow-md",
};
export const DABadgePost = {
c: "rounded-r-lg text-gray-9 text-lg bg-gray-2 px-2 h-10 shadow-md",
};
export const DABadge: Readonly<Record<string, IABadgeProps>> = {
[CDefaultType]: DABadgeDefault,
rec: DABadgeRec,
round: DABadgeRound,
icon: DABadgeIcon,
circle: DABadgeCircle,
label: DABadgeLabel,
pre: DABadgePre,
post: DABadgePost,
};
Attributes (Properties)
Default Values
vue
spacex: "space-x-1.5",Unique
ts
export interface IABadgeProps extends IProps, IPropsComposeX, IPropsIcon {
v?: string; // badge text. Not configurable
vc?: string; // css classes for text element
}Inherit from IProps
ts
export interface IProps {
t?: string; // user defined or AgufaUI provided component type. Not configurable
c?: string; // css classes for component root html element
}Inherit from IPropsComposeX
ts
export interface IPropsComposeX {
spacex?: string; // space between elements in x-axis eg. space-x-1.5
}Inherit from IPropsIcon
ts
export type TLRPosition = "left" | "right";
export interface IPropsIcon {
i?: string; // icon eg. i-eos-icons:loading
ipos?: TLRPosition; // icon position
ic?: string; // css classes for icon element
}