@laberry/lab-material v1.0.0-rc.2

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

LabPanelTitle

selector: lab-panel-title

LabPanelNav

selector: lab-panel-nav

LabPanelContent

selector: lab-panel-content

Interfaces

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

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

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

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/avatar@2x.png" 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

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>