@laberry/lab-material
v1.0.0-rc.2
Published
Baixe o boilerplate para iniciar o admin.
Downloads
2
Readme
LabAdmin
Install
Baixe o boilerplate para iniciar o admin.
git clone https://gitlab.com/lab123/lab-admin-boilerplate.git
Dê npm i para instalar as dependencias.
Panel
import {PanelModule} from '@laberry/lab-material';
Components
LabPanel
selector: lab-panel
| Propriedades | |----------| | @Input() navMenu: IMenuItem |
LabPanelTitle
selector: lab-panel-title
LabPanelNav
selector: lab-panel-nav
LabPanelContent
selector: lab-panel-content
Interfaces
IMenuItem
| Propriedades | |----------| | name: string | | icon?: string | | active?: boolean | | route?: string | | items?: IMenuItem[] |
Exemplo
<lab-panel [navMenu]="menu">
<lab-panel-title>
Laberry SDK
</lab-panel-title>
<lab-panel-nav>
<ul>
<li>
<lab-hub-message [seeAll]="actionMessage()">
<ng-container *ngFor="let item of hubMessage">
<button mat-list-item>
<lab-avatar mat-list-icon>
<img class="avatardefault" [src]="item.image">
</lab-avatar>
<h4 mat-line [innerHTML]="item.message"></h4>
<time mat-line>
<mat-icon mat-list-icon>access_time</mat-icon>
{{ item.send_date | date:'EEEE, d \' de \' MMMM | h\'h\'mm' }}
</time>
</button>
</ng-container>
</lab-hub-message>
</li>
<li>
<lab-hub-notification [seeAll]="actionNotification()">
<button mat-list-item>
<mat-icon mat-list-icon color="accent">folder</mat-icon>
<h4 mat-line><strong>Hospital da Luz</strong> e <strong>Maria regina</strong> realizaram um match</h4>
<time mat-line>
<mat-icon mat-list-icon>access_time</mat-icon>
Quarta-feira, 18 de novembro | 14h00
</time>
</button>
</lab-hub-notification>
</li>
<li class="divider">
<lab-nav-user>
<button mat-menu-item>
<mat-icon>person</mat-icon>
Perfil do Usuário
</button>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>
Sair
</button>
</lab-nav-user>
</li>
</ul>
</lab-panel-nav>
<lab-panel-content>
<router-outlet></router-outlet>
</lab-panel-content>
</lab-panel>
NotificationService
Serviço para disparar mensagens para o usuário.
Metodos
| Parameters | Type || |----------|:-------------:|------:| | error(metodo error() apenas) | Error | IApiTransportError | Erro para mostrar no snackbar. | | message | string | Mensagem para mostrar no snackbar. | | config? | MatSnackBarConfig<any> | Configurações adicionais para o snackbar. | | action | string = 'Fechar'| Label para botão do snackbar. |
| Return | |----------| | MatSnackBarRef<SimpleSnackBar> |
Hub
import {HubModule} from '@laberry/lab-material';
Component para usar com mat-menu, normalmente usado no header para ver notificações ou as ultimas mensagens.
Components
selector: lab-hub
Exemplo
<mat-menu>
<lab-hub>
<mat-card-header>
<mat-card-title>Últimas Mensagens</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-action-list>
<button mat-list-item>
<!-- Avatar -->
<lab-avatar mat-list-icon>
<img src="" alt="Avatar">
</lab-avatar>
<!-- OU Icone -->
<mat-icon mat-list-icon color="accent">
folder
</mat-icon>
<h4 mat-line>Opa! Beleza?</h4>
<time mat-line>
<mat-icon mat-list-icon>access_time</mat-icon>
Quarta-feira, 18 de novembro | 14h00
</time>
</button>
</mat-action-list>
</mat-card-content>
<mat-card-actions>
<button mat-button>
Ver todos
<mat-icon>arrow_forward_ios</mat-icon>
</button>
</mat-card-actions>
</lab-hub>
</mat-menu>Hub Message
import {HubMessageModule} from '@laberry/lab-material';
Components
HubMessageComponent
selector: lab-hub-message
| Propriedades | |----------| | @Input() seeAll: Function |
Exemplo
<lab-hub-message [seeAll]="actionMessage()">
<ng-container *ngFor="let item of hubMessage">
<button mat-list-item>
<lab-avatar mat-list-icon>
<img class="avatardefault" [src]="item.image">
</lab-avatar>
<h4 mat-line [innerHTML]="item.message"></h4>
<time mat-line><mat-icon mat-list-icon>access_time</mat-icon> {{ item.send_date | date:'EEEE, d \' de \' MMMM | h\'h\'mm' }} </time>
</button>
</ng-container>
</lab-hub-message>Hub Notification
import {HubNotificationModule} from '@laberry/lab-material';
Components
HubNotificationComponent
selector: lab-hub-notification
| Propriedades | |----------| | @Input() seeAll: Function |
Exemplo
<lab-hub-notification [seeAll]="actionNotification()">
<button mat-list-item>
<mat-icon mat-list-icon color="accent">folder</mat-icon>
<h4 mat-line><strong>Hospital da Luz</strong> e <strong>Maria regina</strong> realizaram um match</h4>
<time mat-line><mat-icon mat-list-icon>access_time</mat-icon> Quarta-feira, 18 de novembro | 14h00 </time>
</button>
</lab-hub-notification>Avatar Component
import {AvatarModule} from '@laberry/lab-material';
Component para criar avatar de usuário.
selector: lab-avatar
Exemplo
<lab-avatar>
<img src="../../../../assets/[email protected]" alt="Avatar">
</lab-avatar>Modal Components
import {LabModalModule} from '@laberry/lab-material';
Essa é a estrutura de modal para ser injetada no metodo do open do serviço MatDialog.
Components
ModalComponent
selector: lab-modal
ModalHeaderComponent
selector: lab-modal-header
| Propriedades | |----------| | @Input() disableClose:boolean = false |
ModalContentComponent
selector: lab-modal-content
Esse component está preparado para receber texto e o component mat-tab-group.
ModalFooterComponent
selector: lab-modal-footer
Exemplo
<lab-modal-header>
<h1 mat-dialog-title>Modal Lab</h1>
</lab-modal-header>
<lab-modal-content>
Qualquer conteudo
OU
<!-- Tabs -->
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
</lab-modal-content>
<lab-modal-footer>
<button
mat-button
[mat-dialog-close]="true">
CANCELAR
</button>
<button
mat-raised-button
color="accent"
[mat-dialog-close]="true">
SALVAR
</button>
</lab-modal-footer>