gufaUIMenu Panel #
Menu panel.
Usage #
Import #
ts
import { Ampanel } from "@agufaui/${framework name}";
Html #
<ampanel /> or <Ampanel />
Configuration #
Theme component name: ampanel
Showcase #
Click to see code
vue
<template>
<div class="flex items-start flex-wrap gap-4 doc">
<ampanel :sections="sections" c="w-14rem" />
<ampanel :sections="titlesSections" c="w-14rem" />
<ampanel :sections="titlesSections" t="noDivide" c="w-14rem" />
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuPanel",
};
</script>
<script setup lang="ts">
import type { TAMSection } from "@agufaui/theme";
const sections: TAMSection[] = [
{
items: [
{
name: "dropdown",
props: {
t: "sidebar",
v: "Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:hover:text-gray-9",
items: [
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
},
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
],
},
{
items: [
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
];
const titlesSections: TAMSection[] = [
{
title: "Category1",
items: [
{
name: "dropdown",
props: {
t: "sidebar",
v: "Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:hover:text-gray-9",
items: [
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
},
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
],
},
{
title: "Category2",
items: [
{
name: "link",
props: {
v: "Google",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
c: "dark:hover:text-gray-9",
t: "sidebar",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
];
</script>AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IAMpanelProps } from "../../types/navigation/AMpanel";
export const DAMpanelDefault = {
c: "overflow-hidden relative px-4 divide-y-1 divide-gray-6",
sectionc: "py-4",
titlec: "text-lg font-bold pl-2 pb-2",
};
export const DAMpanelRound = {
[CUseType]: CDefaultType,
c: "rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
};
export const DAMpanelFlyout = {
[CUseType]: CDefaultType,
c: "bg-white",
};
export const DAMpanelRoundFlyout = {
[CUseType]: "round",
c: "bg-white",
};
export const DAMpanelDark = {
c: "overflow-hidden relative px-4 divide-y-1 divide-gray-4",
sectionc: "py-4",
titlec: "text-lg font-bold pl-2 pb-2 text-white",
};
export const DAMpanelNoDivide = {
c: "overflow-hidden relative px-4",
sectionc: "py-2",
titlec: "text-lg font-bold pl-2 pb-2",
};
export const DAMpanel: Readonly<Record<string, Partial<IAMpanelProps>>> = {
[CDefaultType]: DAMpanelDefault,
flyout: DAMpanelFlyout,
round: DAMpanelRound,
roundFlyout: DAMpanelRoundFlyout,
dark: DAMpanelDark,
noDivide: DAMpanelNoDivide,
};
Attributes (Properties) #
Unique #
ts
export type TAMSection = {
title?: string;
items: TAMItem[];
};
export interface IAMpanelProps extends IProps {
sections: TAMSection[]; // links sections array. Not configurable
sectionc?: string; // css classes for 'div' html element that contains a section
titlec?: string; // css classes for 'p' html element that contains title
}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
}