gufaUIMenu Link #
Menu link with icon and subtitle.
Usage #
Import #
ts
import { Amlink } from "@agufaui/${framework name}";
Html #
<amlink /> or <Amlink />
Configuration #
Theme component name: amlink
Showcase #
- Hover and click menu link to see different effects, it will open a new browser tab/window
Click to see code
vue
<amlink
v="Link"
target="_blank"
href="https://www.google.com"
rel="noreferrer noopener"
title="Google"
c="!text-blue hover:-translate-px active:translate-px"
/>
<amlink
v="Link"
target="_blank"
href="https://www.google.com"
rel="noreferrer noopener"
title="Google"
c="!text-blue-5 !hover:text-green-5 active:!text-purple-5 focus:!text-purple-5"
/>
<amlink
target="_blank"
href="https://github.com"
rel="noreferrer noopener"
title="github"
i="i-mdi:github"
ic="text-2xl"
c="!text-blue-5 !hover:text-green-5 active:!text-purple-5 focus:!text-purple-5"
/>
<amlink
target="_blank"
href="https://vuejs.org"
rel="noreferrer noopener"
title="vue"
i="i-vscode-icons:file-type-vue"
ic="text-2xl"
c="hover:-translate-px active:translate-px"
/>
<amlink
target="_blank"
href="https://svelte.dev/"
rel="noreferrer noopener"
title="svelte"
i="i-vscode-icons:file-type-svelte"
ic="text-2xl"
c="p-1 shadow-sm hover:shadow-red active:shadow-purple focus:shadow-purple"
/>
<amlink
v="Google"
subtitle="open google site"
target="_blank"
href="https://www.google.com"
rel="noreferrer noopener"
title="Google"
i="i-logos:google-admob"
/>
<amlink
v="Google"
subtitle="open google site"
subtitlec="text-indigo-4 hover:text-indigo-6"
target="_blank"
href="https://www.google.com"
rel="noreferrer noopener"
title="Google"
i="i-logos:google-admob"
:badges="[
{
v: 'Beta',
t: 'round',
c: 'bg-green-3',
},
]"
c="p-1 !text-green-5 shadow-sm hover:shadow-green-5 active:shadow-purple focus:shadow-green-6"
/>Slot #
Two slots. One default slot replace menu link content including icon. One named slot "badge" 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 { IAMlinkProps } from "../../types/navigation/AMlink";
export const DAMlinkDefault = {
c: "text-sm font-medium rounded-md transition text-gray-8 hover:text-gray",
badgesc: "ml-0.5 space-x-0.5",
spacex: "space-x-4",
ic: "text-lg",
subtitlec: "mt-1 text-xs text-gray-5 hover:text-gray-7",
};
export const DAMlinkSidebar = {
[CUseType]: CDefaultType,
c: "p-2 rounded-l-full hover:bg-blue-50",
};
export const DAMlinkSidebarDark = {
[CUseType]: CDefaultType,
c: "p-2 rounded-l-full hover:bg-gray-7 !text-white d@text-gray-8 d@hover:text-gray",
subtitlec: "text-gray-3 r@ hover:text-gray-4 d@text-gray-5",
};
export const DAMlink: Readonly<Record<string, Partial<IAMlinkProps>>> = {
[CDefaultType]: DAMlinkDefault,
sidebar: DAMlinkSidebar,
sidebarDark: DAMlinkSidebarDark,
};
Attributes (Properties) #
Unique #
ts
export interface IAMlinkProps extends IProps, IPropsIcon, IPropsComposeX {
href: string; // link url. Not configurable
v?: string; // link title. Not configurable
titlesc?: string; // css classes for link titles container 'span' html element
vc?: string; // css classes for title 'p' html element
badges?: IABadgeProps[]; // badges for title text. Not configurable
badgesc?: string; // css classes for badges container 'Asup' component
subtitle?: string; // subtitle. Not configurable
subtitlec?: string; // css classes for subtitle 'p' 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
}