gufaUIRadio
Basic radio.
Usage
Import
ts
import { Aradio } from "@agufaui/${framework name}";
Html
<aradio /> or <Aradio />
Configuration
Theme component name: aradio
Showcase
Click to see code
vue
<aradio :v="selected" label="country" :options="options" @select="assign(selected, $event)">
</aradio>
<aradio
:v="selected1"
label="country"
t="green"
:options="options"
@select="assign(selected1, $event)"
>
</aradio>
<aradio :v="selected2" label="disabled" :options="options" :disabled="true"> </aradio>AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IARadioProps } from "../../types/basic/ARadio";
export const DARadioDefault = {
labelc: "font-medium text-lg text-gray-6",
fieldsetc: "mt-2",
optionc: "p-2 hover:bg-blue-50",
selectedc: "bg-blue-50",
vc: "focus:ring-blue-5 accent-blue-6 h-4 w-4 outline-gray-3 m-0",
displayc: "ml-3 font-medium text-sm text-gray-9",
};
export const DARadioGreen = {
[CUseType]: CDefaultType,
optionc: "r@ hover:bg-green-50",
selectedc: "r@ bg-green-50",
vc: "r@ focus:ring-green-5 r@ accent-green-6",
};
export const DARadio: Readonly<Record<string, Partial<IARadioProps>>> = {
[CDefaultType]: DARadioDefault,
green: DARadioGreen,
};
Attributes (Properties)
Default Values
vue
Unique
ts
export type TRadioOption = {
id: string | number;
name: string;
};
export interface IARadioProps extends IProps, IPropsForm {
label?: string; // label. Not configurable
labelc?: string; // css classes for label html element
options: TRadioOption[]; //options. Not configurable
v: TRadioOption; // selected option. Not configurable
vc?: string; // css classes for options
id?: string; // radio group id
displayc?: string; // css classes for display label
optionc?: string; // css classes for option container 'div' html element
fieldsetc?: string; // css classes for fieldset
selectedc?: string; // css classes for 'div' html element when selected
}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 IPropsForm
ts
export interface IPropsForm {
disabled?: boolean; // disabled
}Events
ts
export interface IARadioEmits {
(e: "select", option: TRadioOption): void; // select event
}