Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • Uso
  • Overview

Was this helpful?

  1. Menu

Toolbar

PreviousSidenavNextDropdown

Last updated 2 years ago

Was this helpful?

O componente de toolbar permite incluir um título para a página, breadcrumb e um content para botões.

Uso

Importante

Este componente trabalha em conjunto com o , onde as configurações definidas lá, serão automaticamente convertidas e disponibilizadas na classe abstrata pelo método getToolbarInfo.

Para subpáginas em que não foram configuradas no , será convertido automaticamente através do texto na url.

Caso não queira utilizar o componente de menu nativo do Cat UI, também será permitido configurar manualmente através do serviço CatToolbarService pelo método build.

page-toolbar.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CatComponentBase } from '@catrx/ui';

@Component({
  templateUrl: './page-toolbar.component.html'
})
export class PageToolbarComponent extends CatComponentBase implements OnInit {
  isSubpage: boolean;

  constructor(private activatedRoute: ActivatedRoute) {
    super();
  }

  ngOnInit(): void {
    this.activatedRoute.paramMap.subscribe(map => {
      this.isSubpage = !!map?.['params']?.['subpage'];
    })
  }
}
page-toolbar.component.html
<cat-toolbar [config]="getToolbarInfo()">
  <nav buttons>
    <button *ngIf="!isSubpage" class="btn btn-primary btn-sm" routerLink="./sub-pagina">Ir para Subpágina</button>
  </nav>
</cat-toolbar>
page-toolbar.routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { PageToolbarComponent } from './page-toolbar.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
  { path: '', component: PageToolbarComponent },
  { path: ':subpage', component: PageToolbarComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PageToolbarRoutingModule {}
page-toolbar.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageToolbarComponent } from './page-toolbar.component';
import { PageToolbarRoutingModule } from './page.toolbar.routing.module';

@NgModule({
  declarations: [PageToolbarComponent],
  imports: [CommonModule, CatToolbarModule, PageToolbarRoutingModule],
})
export class PageToolbarModule {}

Overview

Sidenav
CatComponentBase
Sidenav
CatUi
Logo