TopAppBar
O TopAppBar é um componente de barra de aplicação responsivo que pode exibir um título, um logotipo, um botão de menu e ações personalizadas.
Quando usar:
- Quando for necessário um cabeçalho fixo e responsivo para a aplicação.
- Quando houver necessidade de um botão de menu ou de navegação para melhorar a experiência do usuário.
- Quando for necessário exibir um logotipo ou título na parte superior da interface.
- Quando houver ações que precisam estar sempre acessíveis na barra superior.
Quando não usar:
- Quando a aplicação não precisa de uma barra de navegação fixa.
- Quando a interface já possui outra estrutura de navegação redundante.
- Quando o espaço na tela é muito limitado e um cabeçalho fixo pode comprometer a usabilidade.
Uso
js
<CdsTopAppBar
:elevated="false"
>
2
</CdsTopAppBar>Preview
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
* title (required) | string | '' | -- | Título da sessão ou da página |
logoUrl | string | '' | -- | URL da imagem do logo. Quando definida o título será substituído pela logo |
showMenuIcon | boolean | false | -- | Habilita a exibição do botão de menu |
showBackNavigation | boolean | false | -- | Habilita a exibição do botão de voltar Obs: se showMenuIcon estiver habilitado esta prop não surtirá efeito |
defaultRoute | object | {} | -- | Rota default para quando a prop showBackNavigation estiver habilitada Deve seguir o seguinte formato: { name: 'route-name', path: 'route-path' } Obs: não é necessário fornecer name e path, apenas um já é o suficiente |
Eventos
Nome | Descrição |
|---|---|
@on-menu-click | Evento emitido quando o botão de menu é clicado Obs: necessário habilitar a prop showMenuIcon |
Slots
Nome | Descrição |
|---|---|
#actions | Slot utilizado para os botões de action do lado direito |