gufaUIDrawer
Basic Drawer.
Usage
Import
ts
import { Adrawer } from "@agufaui/${framework name}";
Html
<adrawer /> or <Adrawer />
Configuration
Theme component name: adrawer
Showcase
Click to see code
vue
<template>
<div class="flex space-x-4 w-full doc">
<abutton
v="Show Top"
c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
@click="showPos('top')"
/>
<abutton
v="Show Bottom"
c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
@click="showPos('bottom')"
/>
<abutton
v="Show Left"
c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
@click="showPos('left')"
/>
<abutton
v="Show Right"
c="text-white bg-blue-5 hover:(bg-blue-6 -translate-px shadow-md shadow-blue) active:translate-px focus:(ring-offset-none ring-none)"
@click="showPos('right')"
/>
<adrawer :show="show" :pos="pos" @close="show = false">
<nav class="flex flex-col flex-1 overflow-y-auto h-full bg-gray-8 min-w-14rem">
<ampanel v-bind="mpanel" />
</nav>
</adrawer>
</div>
</template>
<script lang="ts">
export default {
name: "DocMenuMobileSidebar",
};
</script>
<script setup lang="ts">
import { TPos, IAMpanelProps } from "@agufaui/theme";
const close = () => {
console.log("close");
};
let show = ref(false);
let pos = ref<TPos>("left");
const showPos = (p: string) => {
show.value = true;
pos.value = p as TPos;
};
const mpanel: IAMpanelProps = {
t: "dark",
sections: [
{
items: [
{
name: "dropdown",
props: {
v: "Sites",
i: "i-majesticons:sitemap",
t: "sidebarDark",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebarDark",
href: "https://github.com",
i: "i-logos:github-icon",
ic: "bg-gray-2 rounded-lg",
},
},
],
},
},
{
name: "dropdown",
props: {
v: "Another Sites",
i: "i-dashicons:admin-site",
t: "sidebarDark",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
{
name: "link",
props: {
v: "Github",
t: "sidebarDark",
href: "https://github.com",
i: "i-logos:github-icon",
ic: "bg-gray-2 rounded-lg",
},
},
],
},
},
],
},
{
title: "Links",
items: [
{
name: "link",
props: {
v: "Google",
t: "sidebarDark",
href: "https://google.com",
i: "i-logos:google-icon",
subtitle: "Google Site",
},
},
],
},
],
};
</script>Slot
One default slot for content.
AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IADrawerProps } from "../../types/basic/ADrawer";
export const DADrawerDefault = {
overlayc: "bg-gray-6 opacity-75",
closec:
"mt-2 mr-0.5 h-10 aspect-square rounded-full focus:(outline-none ring-2 ring-inset ring-white)",
closeic: "text-white text-xl",
};
export const DADrawer: Readonly<Record<string, IADrawerProps>> = {
[CDefaultType]: DADrawerDefault,
};
Attributes (Properties)
Default Values
vue
closei: "i-ph:x-bold",
pos: "left",Unique
ts
export type TPos = "top" | "bottom" | "left" | "right";
export interface IADrawerProps extends IProps {
show?: boolean; // show drawer
pos?: TPos; // display class for container 'div' html element
permanent?: boolean; // is component closable, default is closable
overlayc?: string; // css classes for background overlay 'div' html element
closec?: string; // css classes for close button 'button' html element
closei?: string; // css close button icon
closeic?: string; // css classes for close button icon 'span' html element
sidebarc?: string; // css classes for sidebar 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
}Events
ts
export interface IADrawerEmits {
(e: "close"): void; // close event
}