gufaUILabel
Basic label
Child Components
Usage
Import
ts
import { Alabel } from "@agufaui/${framework name}";
Html
<alabel /> or <Alabel />
Configuration
Theme component name: alabel
Showcase
*
*
*
Click to see code
vue
<alabel v="Username" vc="dark:text-white" />
<alabel v="Username" required vc="dark:text-white" />
<alabel v="Username" required error vc="dark:text-white" />
<alabel v="Username" required error vc="dark:text-white" :tooltip="{ v: 'user name' }" />AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IALabelProps } from "../../types/basic/ALabel";
export const DALabelDefault = {
cc: "pr-2",
vc: "text-sm bg-white px-2 text-gray-7",
requiredc: "text-blue-4",
requiredec: "text-red-4",
};
export const DALabel: Readonly<Record<string, Partial<IALabelProps>>> = {
[CDefaultType]: DALabelDefault,
};
Attributes (Properties)
Default Values
vue
Unique
ts
export interface IALabelProps extends IProps {
v: string; // message. Not configurable
vc?: string; // css classes for message 'span' html element
id?: string; // control id label is for
right?: boolean; // horizontally align position to the right
required?: boolean; // if it's required
requiredc?: string; // css classes for required sign '*'
requiredec?: string; // css classes for required sign '*' when there is error
error?: boolean; // if there is error
tooltip?: IATooltipProps; // tooltip
}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
}