gufaUIMenu Item #
Menu Item. It's either dropdown or link.
Child Components #
Usage #
Import #
ts
import { AmItem } from "@agufaui/${framework name}";
Html #
<amitem /> or <Amitem />
Configuration #
Theme component name: amitem
Showcase #
- Hover and click menu Item to see different effects
Click to see code
vue
<template>
<div class="flex items-start flex-wrap gap-x-3 gap-y-2 doc">
<amitem :v="dropdown" />
<amitem :v="link" />
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuItem",
};
</script>
<script setup lang="ts">
import type { TAMItem } from "@agufaui/theme";
const dropdown: TAMItem = {
name: "dropdown",
props: {
v: "Sites",
i: "i-majesticons:sitemap",
items: [
{
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",
},
},
],
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",
},
};
const link: TAMItem = {
name: "link",
props: {
href: "https://vuejs.org",
i: "i-vscode-icons:file-type-vue",
ic: "text-2xl",
c: "hover:-translate-px active:translate-px",
},
attrs: {
target: "_blank",
rel: "noreferrer noopener",
title: "vue",
},
};
</script>AgufaUI provided Theme #
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAMitemProps } from "../../types/navigation/AMitem";
export const DAMitem: Readonly<Record<string, Partial<IAMitemProps>>> = {
[CDefaultType]: {},
};
Attributes (Properties) #
Unique #
ts
export type TAMItemComponentName = "dropdown" | "link";
export type TAMItem = {
name: TAMItemComponentName; // component name
props: IAMdropdownProps | IAMlinkProps;
attrs?: Record<string, any>; // html element attributes, eg. for 'a' tag, 'target' attribute
};
export interface IAMitemProps extends IProps {
v: TAMItem; // menu item. Not configurable
}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
}