gufaUIMenu Dropdown #
Menu dropdown.
Child Components #
Usage #
Import #
ts
import { Amdropdown } from "@agufaui/${framework name}";
Html #
<amdropdown /> or <Amdropdown />
Configuration #
Theme component name: amdropdown
Showcase #
- Hover and click on "Sites" menu to see dropdown panel.
Click to see code
vue
<template>
<div class="flex items-start flex-wrap gap-4 lg:h-24rem h-30rem doc">
<amdropdown
v="Sites"
i="i-majesticons:sitemap"
:items="items"
:badges="[
{ v: 'Beta', t: 'round', c: 'bg-blue' },
{ v: 'New', t: 'round', c: 'bg-lime' },
]"
c="w-12em"
titlesc="hover:text-gray-5 dark:text-white dark:hover:text-gray-3"
/>
<amdropdown
v="Sites"
i="i-majesticons:sitemap"
t="elevation"
:items="elevationItems"
c="w-12em"
titlesc="hover:text-gray-5 dark:text-white dark:hover:text-gray-3"
linksc="dark:bg-white"
/>
<amdropdown
v="Expanded Sites"
i="i-majesticons:sitemap"
:expand="true"
:items="expandItems"
c="w-12em"
titlesc="dark:text-white"
/>
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuDropdown",
};
</script>
<script setup lang="ts">
import type { TAMItem } from "@agufaui/theme";
const items: TAMItem[] = [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-white",
href: "https://google.com",
badges: [{ v: "Alpha", t: "round", c: "bg-red" }],
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-white",
href: "https://github.com",
},
},
{
name: "dropdown",
props: {
v: "Other Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:text-white dark:hover:text-gray-3",
items: [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-white",
href: "https://google.com",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-white",
href: "https://github.com",
},
},
],
},
},
{
name: "dropdown",
props: {
v: "Expanded Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:text-white",
expand: true,
items: [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-white",
href: "https://google.com",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-white",
href: "https://github.com",
},
},
],
},
},
];
const elevationItems: TAMItem[] = [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
{
name: "dropdown",
props: {
v: "Other Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:text-gray-8 dark:hover:text-gray-5",
t: "elevation",
items: [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
},
{
name: "dropdown",
props: {
v: "Expanded Sites",
i: "i-majesticons:sitemap",
titlesc: "dark:text-gray-8",
t: "elevation",
expand: true,
items: [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-gray-9",
href: "https://google.com",
i: "i-logos:google-icon",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-gray-9",
href: "https://github.com",
i: "i-logos:github-icon",
},
},
],
},
},
];
const expandItems: TAMItem[] = [
{
name: "link",
props: {
v: "Google",
vc: "dark:text-white",
href: "https://google.com",
},
},
{
name: "link",
props: {
v: "Github",
vc: "dark:text-white",
href: "https://github.com",
},
},
];
</script>Slot #
One default slot for badge, superscript or subscript of title text.
AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType, CUseType } from "@agufaui/config";
import type { IAMdropdownProps } from "../../types/navigation/AMdropdown";
export const DAMdropdownDefault = {
titlesc: "text-sm font-medium group",
badgesc: "ml-0.5 space-x-0.5",
ic: "mr-4 text-lg",
arrowic: "text-lg",
linksc: "mt-3 grid gap-4 ml-8.5",
};
export const DAMdropdownSidebar = {
[CUseType]: CDefaultType,
titlesc: "p-2 rounded-l-full hover:bg-blue-50",
linksc: "d@mt-3 my-2 r@ gap-2",
};
export const DAMdropdownSidebarDark = {
[CUseType]: CDefaultType,
titlesc: "p-2 text-white rounded-l-full hover:bg-gray-7",
linksc: "d@mt-3 my-2 r@ gap-2",
};
export const DAMdropdownElevation = {
titlesc: "text-sm font-medium group",
badgesc: "ml-0.5 space-x-0.5",
ic: "mr-4 text-lg",
arrowic: "text-lg",
linksc: "mt-1 grid gap-4 p-4 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5",
};
export const DAMdropdown: Readonly<Record<string, Partial<IAMdropdownProps>>> = {
[CDefaultType]: DAMdropdownDefault,
sidebar: DAMdropdownSidebar,
sidebarDark: DAMdropdownSidebarDark,
elevation: DAMdropdownElevation,
};
Attributes (Properties) #
Default Values #
vue
arrowi: "i-ion:arrow-down-b",Unique #
ts
export interface IAMdropdownProps extends IProps, IPropsIcon {
v: string; // menu name. Not configurable
items: TAMItem[]; // links array. Not configurable
expand?: boolean; // if expand initially
titlesc?: string; // css classes for titles container 'div' html element
vc?: string; // css classes for menu name 'p' html element
badges?: IABadgeProps[]; // badges for title text. Not configurable
badgesc?: string; // css classes for badges container 'Asup' component
arrowi?: string; // css arrow icon
arrowic?: string; // css classes for arrow icon 'span' html element
linksc?: string; // css classes for links container '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
}Inherit from IPropsIcon #
ts
export type TLRPosition = "left" | "right";
export interface IPropsIcon {
i?: string; // icon eg. i-eos-icons:loading
ipos?: TLRPosition; // icon position
ic?: string; // css classes for icon element
}