README
MatFullNav
This project was generated with Angular CLI version 11.0.6.
Iniciando
Crie um novo projeto angular
ng new <project>
Dependencias
ng add @angular/material
npm i -s @angular/flex-layout @angular/cdk
Instale o mat-full-nav
npm i @silverio27/ui
Importe o mat-full-nav em app.module.ts
...
import { MatFullNavModule} from '@silverio27/ui';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
MatFullNavModule,
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Configure a tela incial
Adicione em app.component.html
<mat-full-toolbar
logo="<path>/<your-logo>.png"
[apps]="apps"
[notifications]="notifications"
[profile]="profile"
(menuClick)="menu.opened=!menu.opened"
(removeNotification)="removeNotification($event)"
></mat-full-toolbar>
<mat-full-menu #menu [items]="items">
<router-outlet></router-outlet>
</mat-full-menu>
MatFullToolBar
- @Input(): logo: string
Imagem quer irá aparecer ao lado do botão de menu, use uma imagem em png de 109 x 40 px
- @Input(): apps: Apps[]
utilize a interface Apps para criar uma lista de aplicativos, com ícones e rotas de navegação. Exemplo:
apps: Apps[] = [
{ icon: "dashboard", route: "", name: "BI" },
{ icon: "account_circle", route: "", name: "Conta" },
{ icon: "integration_instructions", route: "", name: "Integração" },
{ icon: "shopping_cart", route: "", name: "Compras" },
{ icon: "fact_check", route: "", name: "Lista da vez" },
{ icon: "admin_panel_settings", route: "", name: "Administrativo" },
{ icon: "wb_incandescent", route: "", name: "Planejamento" },
{ icon: "photo", route: "", name: "Produtos" },
];
- @Input(): notifications : MatFullNotification[]
utilize a interface MatFullNotification para criar uma lista de notificações, com mensagem, tarefa, hora do acontecimento e status. Utilize a enumeração MatFullNotificationStatus
Exemplo:
notifications: MatFullNotification[] = [
{
id: '05bc47ed-c726-4160-9eb7-ad885fbb2506',
message: "tarefa falhou",
status: MatFullNotificationStatus.ERROR,
task: "ligar vm",
time: new Date("2021-04-01 08:00"),
},
{
id: 'b9c8fe09-bbc3-409c-870d-7be7431be321',
message: "tarefa concluída",
status: MatFullNotificationStatus.OK,
task: "desligar vm",
time: new Date("01/04/2021 08:00"),
},
{
id: 'c6f9e1bb-66e7-4f54-ab91-0a4b8060128d',
message: "tarefa em andamento",
status: MatFullNotificationStatus.WAIT,
task: "imagem exluir",
time: new Date("2021-04-01 08:00"),
}]
- @Input(): profile : Profile
Para exibir dados do usuário utilize a interface Profile
Exemplo:
profile = {
avatar:
"<path>.jpg",
name: "Lucas Silvério",
email: "silverio.des.vargas@gmail.com",
developmentBy: "https://github.com/silverio27",
} as Profile;
- @Output(): menuClick()
Dispara um evento ao clicar sobre o botão de menu Utilize esse comando para controlar se o menu será exibido ou ocultado
Exemplo:
<mat-full-toolbar
...
(menuClick)="menu.opened=!menu.opened"
...
></mat-full-toolbar>
<mat-full-menu #menu >
...
</mat-full-menu>
- @Output(): removeNotification()
Utilize esse evento para fazer algo depois de remover uma notficação. O evento envia como parâmetro a notificação.
Exemplo:
<mat-full-toolbar
...
(removeNotification)="removeNotification($event)"
...
></mat-full-toolbar>
removeNotification(notification: any) {
console.log(notification);
}
MatFullMenu
Exibe uma lista lateral de rotas do sistema
<mat-full-menu #menu [items]="items">
<router-outlet></router-outlet>
</mat-full-menu>
- @Input(): opened: boolean
Utilizado para controlar a exibição do menu
-@Input(): items: MenuItem[]
utilize a interface MenuItem para criar uma lista de rotas
Exemplo:
items: MenuItem[] = [
{
icon: "photo_camera",
name: "Fotos",
route: "/foto",
tooltip: "upload de fotos",
},
{ icon: "dashboard", name: "Dashboard", route: "/dashboard" },
{
icon: "integration_instructions",
route: "/integracao",
name: "Integração",
},
{ icon: "sync", route: "/webhook", name: "webhooks" },
];
MatFullPage
Utilize esse componente para criar as páginas do sistema. Esse componente possui serviços de integração com a toolbar para manipular a barra de busca e o menu lateral. Por padrão foi definido que todos os filtros ficam melhor indicados ao lado da barra de busca, despoluindo a tela principal. Ao adicionar filtros, parametros de busca, é carregado automaticamente na parte superior da tela quais são esses parametros, podendo removelos rapidamente através de um botão de exclusão. O botão novo também foi padrozinado para sempre aparecer acima do menu.
<mat-full-page-default #page (newItem)="novo()" [showNewButton]="true">
<div body>
<p>page dashboard works!</p>
</div>
<ng-template>
<app-filter-example
[productFilter]="page.filter"
(apply)="page.applyFilter($event)"
></app-filter-example>
</ng-template>
</mat-full-page-default>
- @Input(): showNewButton: boolean
Utilize esse parâmetro para ocultar ou exibir o botão novo.
- @Input(): load: boolean
Utilize esse parâmetro para adicionar uma tela de espera sobreposicionada.
-@Output(): newItem()
Utilize esse evento quando clicar no botão novo.
- body: content
Escreva o código da sua página dentro da div marcado com a anotação body.
<mat-full-page-default ...>
<div body>
<p>page dashboard works!</p>
</div>
...
</mat-full-page-default>
- filter: template Escreva o formulário do seus filtros dentro de ng-template
<mat-full-page-default #page ...>
...
<ng-template>
<app-filter-example
[productFilter]="page.filter"
(apply)="page.applyFilter($event)"
></app-filter-example>
</ng-template>
</mat-full-page-default>
Faça a ligação do seu objeto de filtro com o objeto filter de MatFullPageDefault.
Quando aplicar o seu filtro invoque também o evento applyFilter($event) para que ele exiba quais parâmetros filtros foram solicitados.
SearchService
Caso queira ocultar a barra de pesquisa utilize o serviço.
Exemplo:
constructor(private searchService: SearchService) { }
ngOnInit(): void {
this.searchService.showSearch.next(false)
}
ngOnDestroy(): void {
this.searchService.showSearch.next(true);
}