gufaUIMenu Toggle #
Menu toggle icon.
Usage #
Import #
ts
import { Amtoggle } from "@agufaui/${framework name}";
Html #
<amtoggle /> or <Amtoggle />
Configuration #
Theme component name: amtoggle
Showcase #
- Hover and click mobile menu to see different effects
Click to see code
vue
<amtoggle :open="open" @click="open = !open" />
<amtoggle
:open="open1"
i="i-icon-park-outline:menu-unfold"
closei="i-icon-park-outline:menu-fold"
@click="open1 = !open1"
/>
<amtoggle
:open="open2"
i="i-system-uicons:side-menu"
closei="i-system-uicons:menu-vertical"
@click="open2 = !open2"
/>
<amtoggle
:open="open3"
i="i-icon-park-outline:application-menu"
closei="i-healthicons:ui-menu-grid-outline"
@click="open3 = !open3"
/>
<amtoggle
:open="open4"
t=""
c="rounded-sm p-1.5 shadow-sm text-2xl text-white bg-blue-4 hover:bg-blue-5 focus:outline-none"
@click="open4 = !open4"
/>
<amtoggle
:open="open5"
v="menu"
vc="text-gray-4 text-sm ml-0.5"
i="i-icon-park-outline:menu-fold-one"
closei="i-icon-park-outline:menu-unfold-one"
@click="open5 = !open5"
/>Slot #
One default slot replace mobile icon and text.
AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAMtoggleProps } from "../../types/navigation/AMtoggle";
export const DAMtoggleDefault = {
c: "rounded-sm p-1.5 shadow-sm text-2xl text-gray-4 hover:bg-gray-1 focus:outline-none",
};
export const DAMtoggle: Readonly<Record<string, Partial<IAMtoggleProps>>> = {
[CDefaultType]: DAMtoggleDefault,
};
Attributes (Properties) #
Default Values #
vue
i: "i-tabler:menu-2",
closei: "i-material-symbols:close",Unique #
ts
export interface IAMtoggleProps extends IProps {
open: boolean; // open/close state of menu
v?: string; // menu text, not configurable
vc?: string; // css classes for menu text 'span' html element
i?: string; // menu icon
ic?: string; // css classes for icon element
closei?: string; // icon for close button
closec?: string; // css classes for close button 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
}Events #
ts
export interface IAMtoggleEmits {
(e: "click", event: MouseEvent): void; // click event
}