Componente base
O componente destinado a raiz do projeto se chama Root.
É responsável por carregar o menu superior, o menu de navegação lateral, o componente utilizado pelos composables de Toasts e os estilos necessários para os demais componentes.
Propriedades
Menu superior
A prop app-bar define as configurações para apresentação do menu superior.
Para ocultar o menu superior, basta omitir essa prop.
O conteúdo da página vai aqui...
<template>
<root :appBar @update:notifications-open="toggleNotifications">
<h2>O conteúdo da página vai aqui...</h2>
</root>
</template>
<script lang="ts" setup>
import { reactive, ref, watch } from "vue";
import { Root, type AppBarConfig } from "@nexdom/uimed-vue/components";
const today = new Date();
const appBar = reactive<AppBarConfig>({
title: "Menu superior",
help: "https://www.google.com",
notifications: [
{
title: "v1.1",
subtitle: "Nova versão disponível para instalação.",
date: new Date(today),
read: false,
},
{
title: "v1",
subtitle: "Nova versão disponível para testes.",
date: new Date(today.setDate(today.getDate() - 1)),
read: false,
},
{
title: "vBeta",
subtitle: "Nova versão disponível para testes.",
date: new Date(today.setDate(today.getDate() - 2)),
read: true,
},
{
title: "vAlpha",
subtitle: "Nova versão disponível para testes.",
date: new Date(today.setDate(today.getDate() - 3)),
read: true,
},
],
user: {
title: "Rafael Perini",
subtitle: "UIMed-Vue Co-Creator",
img: "/uimed-vue/avatar.jpg",
options: [
{
description: "Bibliotecas",
items: [
{
description: "Pkg-template",
route: "https://nexdom-healthtech.github.io/pkg-template/",
},
{
description: "Shared",
route: "https://nexdom-healthtech.github.io/shared/",
},
{
description: "UIMed-Vue",
route: "https://nexdom-healthtech.github.io/uimed-vue/",
},
],
},
{
description: "GitHub NEXDOM",
route: "https://github.com/nexdom-healthtech",
},
{ description: "Sair", action: () => window.alert("Saindo...") },
],
},
});
function toggleNotifications(open: boolean) {
if (!open) {
appBar.notifications = appBar.notifications?.map((notification) => ({
...notification,
read: true,
}));
}
}
</script>Menu de navegação
A prop navigation-menu define as configurações para apresentação do menu lateral de navegação.
Para ocultar o menu de navegação, basta omitir essa prop.
O menu também conta com um campo de busca que filtra itens e grupos em tempo real, no formato case-insensitive.
O conteúdo da página vai aqui...
<template>
<root :appBar :navigationMenu>
<h2>O conteúdo da página vai aqui...</h2>
</root>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { Root, type AppBarConfig, type NavigationMenuConfig } from "@nexdom/uimed-vue/components";
const appBar: AppBarConfig = {
title: "Menu superior",
};
const navigationMenu: NavigationMenuConfig = {
items: [
{
description: "Início",
route: "/",
},
{
description: "Documentação",
items: [
{
description: "Componentes",
route: "/components",
},
{
description: "Composables",
route: "/composables",
},
],
},
{
description: "Configurações",
action: () => window.alert("Abrindo configurações..."),
},
],
};
</script>Eventos
Notificações
O evento update:notificationsOpen é emitido sempre que o menu de notificações é aberto ou fechado.
0 interação(ões)
<template>
<root :app-bar="appBar" @update:notifications-open="onNotificationsOpen">
<h2>{{ notificationsOpenCount }} interação(ões)</h2>
</root>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Root, type AppBarConfig } from "@nexdom/uimed-vue/components";
const notificationsOpenCount = ref(0);
const appBar: AppBarConfig = {
title: "Menu superior",
notifications: [],
};
function onNotificationsOpen() {
notificationsOpenCount.value++;
}
</script>Playground
Experimente as combinações de props do componente.
O conteúdo da página vai aqui...
Ver também
Consulte a referência de API do Root para a lista completa de props, slots e eventos.