AppBar

AppBars são componentes de navegação horizontal para produtos Sysvale e Cidade saudável.

---

Uso

<CdsAppBar
	:csBrand="true"
	:sysvaleBrand="false"
	:appSwitcher="true"
	:help="true"
	:settings="true"
	userName="Rafael Dias"
	userDescription="Administrador"
	@settings-click="logClick"
	@help-click="logClick"
	@avatar-click="logClick"
	@app-switcher-click="logClick"
>
	<template #app-info>
		<div class="app-switcher">
			<CdsIcon
				height="24"
				width="24"
				light
				name="calendar-outline"
			/>
			<p class="app-name">
				Central de marcação
			</p>
		</div>
	</template>
	<template #dropdown-content>
			Conteúdo do dropdown
	</template>
</CdsAppBar>

---

Preview

Rafael DiasAdministrador

RD

Central de marcação

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
hideSettings	boolean	false	--	Controla a exibição do ícone de settings.
hideHelp	boolean	false	--	Controla a exibição do ícone de ajuda.
hideNotification	boolean	false	--	Controla a exibição do ícone de notificação.
hideAppSwitcher	boolean	false	--	Controla a exibição do ícone de notificação.
hideLogout	boolean	false	--	Controla a exibição do ícone de Logout.
sysvaleBrand	boolean	false	--	Indica se a logo a ser exibida é da Sysvale.
csBrand	boolean	false	--	Indica se a logo a ser exibida é do Cidade Saudável.
userName	string	null	--	Nome do usuário exibido no Avatar.
userDescription	string	null	--	Descrição do usuário mostrada embaixo do nome.
clickable	boolean	false	--	Ativa ou desativa o clique no componente Avatar.

Events

Nome	Descrição
@`${element}-click`	Evento emitido quando os elementos da AppBar são clicados. Esse emit é dinâmico, gerando os eventos: `settings-click` `help-click` `notification-click` `avatar-click` `app-switcher-click` `logout-click`