gufaUIMenu Flyout #
Menu flyout.
Child Components #
Usage #
Import #
ts
import { Amflyout } from "@agufaui/${framework name}";
Html #
<amflyout /> or <Amflyout />
Configuration #
Theme component name: amflyout
Showcase #
- Hover and click on "Sites" menu to see flyout panel.
Click to see code
vue
<template>
<div class="flex items-start flex-wrap gap-2 h-22rem doc">
<div class="flex items-center justify-between w-14rem">
<amflyout v="Sites" :mpanel="mpanel" vc="dark:text-white dark:hover:text-gray-9" />
<amflyout
t="arrow"
v="Sites"
:mpanel="mpanelTitle"
vc="dark:text-white"
:showarrow="true"
:badges="[
{ v: 'Beta', t: 'round', c: 'bg-blue' },
{ v: 'New', t: 'round', c: 'bg-lime' },
]"
badgesc="space-x-0.5"
arrowic="ml-2"
/>
</div>
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuFlyout",
};
</script>
<script setup lang="ts">
import type { IAMpanelProps } from "@agufaui/theme";
const mpanel: IAMpanelProps = {
t: "roundFlyout",
sections: [
{
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
badges: [
{
v: "Beta",
t: "round",
c: "bg-green-3",
},
],
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
subtitle: "Github Site",
},
},
],
},
{
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
subtitle: "Github Site",
},
},
],
},
],
};
const mpanelTitle: IAMpanelProps = {
t: "roundFlyout",
sections: [
{
title: "Category1",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
badges: [
{
v: "Beta",
t: "round",
c: "bg-green-3",
},
],
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
subtitle: "Github Site",
},
},
],
},
{
title: "Category2",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebar",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
subtitle: "Github Site",
},
},
],
},
],
};
</script>AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAMflyoutProps } from "../../types/navigation/AMflyout";
export const DAMflyoutDefault = {
vc: "text-gray-9 rounded-md py-2 px-3 text-sm font-medium hover:(bg-blue-1 text-gray-9) ",
mpanelc:
"z-10 -translate-x-1 w-screen max-w-xs px-2 sm:px-0 animate-fade-in-left animate-duration-200",
};
export const DAMflyoutArrow = {
vc: "text-gray-9 py-2 pr-1 text-sm font-medium",
mpanelc:
"z-10 -translate-x-1 w-screen max-w-xs px-2 sm:px-0 animate-fade-in animate-duration-200",
c: "group",
titlesc: "group-hover:(border-b-solid border-2)",
};
export const DAMflyout: Readonly<Record<string, Partial<IAMflyoutProps>>> = {
[CDefaultType]: DAMflyoutDefault,
arrow: DAMflyoutArrow,
};
Attributes (Properties) #
Default Values #
vue
arrowi: "i-ion:arrow-down-b",Unique #
ts
export interface IAMflyoutProps extends IProps, IPropsIcon {
v: string; // menu name. Not configurable
vc?: string; // css classes for menu name 'p' html element
titlesc?: string; // css classes for titles container 'div' html element
badges?: IABadgeProps[]; // badges for title text. Not configurable
badgesc?: string; // css classes for badges container 'Asup' component
showarrow?: boolean; // if show arrow
arrowi?: string; // css arrow icon
arrowic?: string; // css classes for arrow icon 'span' html element
mpanel: IAMpanelProps; // menu panel. Not configurable
mpanelc?: string; // css classes for menu panel contaienr 'div' html 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
}