gufaUIToggle
Toggle button.
Child Components
Usage
Import
ts
import { Atoggle } from "@agufaui/${framework name}";
Html
<atoggle /> or <Atoggle />
Configuration
Theme component name: atoggle
Showcase
left label
right label
right label with icon
disabled label
Click to see code
vue
<atoggle :v="on" :label="label" @click="on = !on" />
<atoggle
:v="on1"
:label="label1"
lpos="right"
buttonon="bg-green-6"
buttonoff="bg-green-1"
buttononfocus="focus:ring-green-5"
@click="on1 = !on1"
/>
<atoggle :v="on2" :label="label2" lpos="right" @click="on2 = !on2" />
<atoggle :v="on3" :label="label3" :disabled="true" @click="on = !on" />Slot
One default slot replace label.
AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAToggleProps } from "../../types/basic/AToggle";
export const DAToggleDefault = {
c: "focus:outline-none",
labelc: "font-medium text-gray-9",
};
export const DAToggle: Readonly<Record<string, Partial<IAToggleProps>>> = {
[CDefaultType]: DAToggleDefault,
};
Attributes (Properties)
Default Values
vue
spacex: "space-x-1.5",
buttonon: "bg-blue-6",
buttononfocus: "focus:ring-blue-5",
buttonoff: "bg-gray-2",Unique
ts
export interface IAToggleProps extends IProps, IPropsComposeX, IPropsForm {
v: boolean; // on/off state of toggle
label?: IABadgeProps; // label, not configurable
labelc?: string; // label css
lpos?: TLRPosition; // label position
id?: string; // button id, not configurable
buttonon?: string; // css when toggle is on
buttonoff?: string; // css when toggle is off
buttononfocus?: string; // css focus when toggle is on
buttonc?: string; // button css
circlec?: string; // button circle css
}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 IPropsComposeX
ts
export interface IPropsForm {
disabled?: boolean; // disabled
}Events
ts
export interface IAToggleEmits {
(e: "click", event: MouseEvent): void; // click event
}