gufaUIAlert
Basic alert
Usage
Import
ts
import { Aalert } from "@agufaui/${framework name}";
Html
<aalert /> or <Aalert />
Configuration
Theme component name: aalert
Showcase
- Self-closable
- 2nd example is wrapped in
divbecause thedivcontainer of these examples is styled "flex flex-col", which makes direct children full width. - The last "Password doesn't meet requirements" example is using slot
- This component can be used for "Accept Cookie" alert (Cookie Consent Notification) by using slot
Info
Info
Info
Alert
Alert
Alert
Success
Warning
Info
Info
Alert
Password doesn't meet requirements
- Minimum 8 characters
- At least 1 special character
- At least 1 uppercase character
- At least 1 number
Click to see code
vue
<aalert v="Info" :show="true" vc="dark:text-white" />
<div>
<aalert v="Info" :show="true" ipos="right" display="inline-flex" vc="dark:text-white" />
</div>
<aalert v="Info" :show="true" ipos="right" vc="dark:text-white" />
<aalert
:v="text"
:show="true"
ic="text-red-6 dark:text-red-5"
vc="text-red-6 dark:text-red-5"
/>
<aalert
:v="text"
:show="true"
ic="text-red-6 dark:text-red-5"
vc="text-red-6 dark:text-red-5"
c="border border-red p-4"
/>
<aalert :v="text" :show="true" t="red" />
<aalert v="Success" :show="true" t="green" />
<aalert v="Warning" :show="true" t="yellow" />
<aalert v="Info" :show="true" t="gray" />
<aalert v="Info" :show="true" t="blue" />
<aalert :v="text" :show="true" t="red" :closable="true" />
<aalert :show="true" t="red" :closable="true" spacex="space-x-2">
<template #default>
<span> Password doesn't meet requirements </span>
<ul>
<li>Minimum 8 characters</li>
<li>At least 1 special character</li>
<li>At least 1 uppercase character</li>
<li>At least 1 number</li>
</ul>
</template>
</aalert>Slot
One default slot for message span html element
AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IAAlertProps } from "../../types/basic/AAlert";
export const DAAlertDefault = {
i: "i-heroicons-solid:information-circle",
ic: "text-blue-6 mt-0.4",
vc: "text-gray-6 text-sm font-medium max-w-sm",
};
export const DAAlertClclass = "text-xs text-gray-4 hover:text-gray-6 mt-1";
export const DAAlertRed = {
i: "i-majesticons:exclamation-circle",
c: "rounded-md bg-red-50 p-4",
ic: "text-red-4 mt-0.4",
vc: "text-red-6 text-sm font-medium w-full",
spacex: "space-x-1.5",
closec: DAAlertClclass,
};
export const DAAlertGreen = {
i: "i-material-symbols:check-circle",
c: "rounded-md bg-green-50 p-4",
ic: "text-green-4 mt-0.4",
vc: "text-green-6 text-sm font-medium w-full",
spacex: "space-x-1.5",
closec: DAAlertClclass,
};
export const DAAlertYellow = {
i: "i-ic:outline-warning",
c: "rounded-md bg-yellow-50 p-4",
ic: "text-yellow-4 mt-0.4",
vc: "text-yellow-6 text-sm font-medium w-full",
spacex: "space-x-1.5",
closec: DAAlertClclass,
};
export const DAAlertGray = {
i: "i-heroicons-solid:information-circle",
c: "rounded-md bg-gray-50 p-4",
ic: "text-blue-4 mt-0.4",
vc: "text-gray-6 text-sm font-medium w-full",
spacex: "space-x-1.5",
closec: DAAlertClclass,
};
export const DAAlertBlue = {
i: "i-heroicons-solid:information-circle",
c: "rounded-md bg-blue-50 p-4",
ic: "text-blue-4 mt-0.4",
vc: "text-gray-6 text-sm font-medium w-full",
spacex: "space-x-1.5",
closec: DAAlertClclass,
};
export const DAAlert: Readonly<Record<string, IAAlertProps>> = {
[CDefaultType]: DAAlertDefault,
red: DAAlertRed,
green: DAAlertGreen,
yellow: DAAlertYellow,
gray: DAAlertGray,
blue: DAAlertBlue,
};
Attributes (Properties)
Default Values
vue
display: "flex",
spacex: "space-x-1.2",
closei: "i-iwwa:delete",Unique
ts
export interface IAAlertProps extends IProps, IPropsComposeX, IPropsIcon {
show?: boolean; // show alert
display?: TDisplay; // display class for container 'div' html element
v?: string; // message. Not configurable
vc?: string; // css classes for message 'span' html element
closable?: boolean; // is component closable
closei?: string; // icon for close button
closec?: string; // css classes for close button
}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 IPropsComposeX
ts
export interface IPropsComposeX {
spacex?: string; // space between elements in x-axis eg. space-x-1.5
}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
}Events
ts
export interface IAAlertEmits {
(e: "close"): void; // close event
}