gufaUITag
Basic tag with close icon.
Usage
Import
ts
import { Atag } from "@agufaui/${framework name}";
Html
<atag /> or <Atag />
Configuration
Theme component name: atag
Showcase
- Mainly used for search options display
closeevent will emitvproperty value
Monitor< $100003 bathroomsComputer> $5000NewMemory > 128gb
Click to see code
vue
<atag v="Monitor" t="rec" c="text-white bg-black" />
<atag v="< $10000" t="rec" c="text-white bg-gradient-to-br from-blue-2 to-green-5" />
<atag v="3 bathrooms" t="rec" c="text-white bg-red-5" />
<atag
v="Computer"
t="round"
c="text-white bg-gradient-to-br from-purple-2 to-black shadow-md shadow-gray-4"
/>
<atag
v="> $5000"
t="round"
c="text-white bg-gradient-to-br from-blue-2 to-green-5 shadow-md shadow-green-3"
/>
<atag
v="New"
t="round"
c="text-white bg-gradient-to-br from-purple-2 to-red-5 shadow-md shadow-red-3"
/>
<atag
v="Memory > 128gb"
t="round"
pos="right"
c="text-white bg-gradient-to-br from-purple-2 to-amber-5 shadow-md shadow-amber-3"
/>Slot
One default slot replace tag content.
AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IATagProps } from "../../types/basic/ATag";
export const DATagDefault = {
c: "text-xs",
};
export const DATagRec = {
[CUseType]: CDefaultType,
c: "px-2 py-1",
};
export const DATagRound = {
[CUseType]: CDefaultType,
c: "rounded-md px-2 py-1",
};
export const DATag: Readonly<Record<string, IATagProps>> = {
[CDefaultType]: DATagDefault,
rec: DATagRec,
round: DATagRound,
};
Attributes (Properties)
Default Values
vue
spacex: "space-x-1.5",
closei: "i-iwwa:delete",Unique
ts
export interface IATagProps extends IProps, IPropsComposeX {
v?: string; // tag text. Not configurable
vc?: string; // css classes for text element
closei?: string; // icon for close button
closec?: string; // css classes for close button
pos?: TLRPosition; // position of text relative to close icon
}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
}Events
ts
export interface IATagEmits {
(e: "close", v: string): void; // close event, will emit v property
}