fab-material

FabAdmin

Install

Baixe o boilerplate para iniciar o admin.

git clone https://gitlab.com/lab123/fab-admin-boilerplate.git

Dê npm i para instalar as dependencias.

Panel

import {PanelModule} from '@laberry/fab-material';

Components

FabPanel

selector: fab-panel

Propriedades
@Input() navMenu: IMenuItem

FabPanelHeader

selector: fab-panel-header

Propriedades
@Input() navRef: MatSidenav

FabPanelTitle

selector: fab-panel-title

FabPanelNav

selector: fab-panel-nav

FabPanelContent

selector: fab-panel-content

Interfaces

IMenuItem

Propriedades
name: string
icon?: string
active?: boolean
route?: string
items?: IMenuItem[]
hide?: boolean

Exemplo

<fab-panel [navMenu]="menu">
  <fab-panel-title>
    Laberry SDK
  </fab-panel-title>

  <fab-panel-nav>
    <ul>
      <li>
        <fab-hub-message [seeAll]="actionMessage()">
          <ng-container *ngFor="let item of hubMessage">
            <button mat-list-item>
              <fab-avatar mat-list-icon>
                <img class="avatardefault" [src]="item.image" />
              </fab-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>
        </fab-hub-message>
      </li>
      <li>
        <fab-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>
        </fab-hub-notification>
      </li>
      <li class="divider">
        <fab-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>
        </fab-nav-user>
      </li>
    </ul>
  </fab-panel-nav>

  <fab-panel-content>
    <router-outlet></router-outlet>
  </fab-panel-content>
</fab-panel>

Copy box

import {CopyBoxModule} from '@laberry/fab-material';

Components

CopyBoxComponent

selector: fab-copy-box

Parameters	Type
content	string	Conteúdo para ser copiado.
label?	string	Título do campo.
notification?	string	Mensagem para mostrar no snackbar.

Exemplo

<fab-copy-box
  [label]="Nome do App"
  [content]="appDef.name"
  [notification]=""
></fab-copy-box>

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>

Alert

import {AlertModule} from '@laberry/fab-material';

Componente para ser usado como serviço de diálogo.

Métodos

Open()	Type
data	AlertInfo
returns	MatDialogRef<AlertComponent, any>

close()	Type
returns	void

Propriedades

Name	Type
data	AlertInfo
dialogRef	MatDialogRef<AlertComponent>

Hub

import {HubModule} from '@laberry/fab-material';

Component para usar com mat-menu, normalmente usado no header para ver notificações ou as ultimas mensagens.

Components

selector: fab-hub

Exemplo

<mat-menu>
  <fab-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 -->
          <fab-avatar mat-list-icon>
            <img src="" alt="Avatar" />
          </fab-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>
  </fab-hub>
</mat-menu>

Hub Message

import {HubMessageModule} from '@laberry/fab-material';

Components

HubMessageComponent

selector: fab-hub-message

Propriedades
@Input() seeAll: Function

Exemplo

<fab-hub-message [seeAll]="actionMessage()">
  <ng-container *ngFor="let item of hubMessage">
    <button mat-list-item>
      <fab-avatar mat-list-icon>
        <img class="avatardefault" [src]="item.image" />
      </fab-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>
</fab-hub-message>

Hub Notification

import {HubNotificationModule} from '@laberry/fab-material';

Components

HubNotificationComponent

selector: fab-hub-notification

Propriedades
@Input() seeAll: Function

Exemplo

<fab-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>
</fab-hub-notification>

Avatar Component

import {AvatarModule} from '@laberry/fab-material';

Component para criar avatar de usuário.

selector: fab-avatar

Propriedades
@Input() size: AvatarSizeEnum

#Enums

AvatarSizeEnum

Key	Value
Small	'small'
Medium	'medium'
Larger	'larger'

Exemplo

<fab-avatar>
  <img src="../../../../assets/[e-mail]" alt="Avatar" />
</fab-avatar>

NavUser Component

import {NavUserModule} from '@laberry/fab-material';

Component para criar botão com avatar para abrir o menu de usuário.

selector: fab-nav-user

Propriedades
@Input() avatar: string
@Input() name: string

Exemplo

<fab-avatar>
  <img src="../../../../assets/[e-mail]" alt="Avatar" />
</fab-avatar>

Modal Components

import {FabModalModule} from '@laberry/fab-material';

Essa é a estrutura de modal para ser injetada no metodo do open do serviço MatDialog.

Components

ModalComponent

selector: fab-modal

ModalHeaderComponent

selector: fab-modal-header

Propriedades
@Input() disableClose:boolean = false

ModalContentComponent

selector: fab-modal-content

Esse component está preparado para receber texto e o component mat-tab-group.

ModalFooterComponent

selector: fab-modal-footer

Enums

ModalSizeEnum

Enum de tamanhos padronizados de modal

Key	Value
Small	'250px'
Medium	'400px'
Larger	'800px'

Exemplo

<fab-modal-header>
  <h1 mat-dialog-title>Modal Fab</h1>
</fab-modal-header>

<fab-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>
</fab-modal-content>

<fab-modal-footer>
  <button mat-button [mat-dialog-close]="true">
    CANCELAR
  </button>
  <button mat-raised-button color="accent" [mat-dialog-close]="true">
    SALVAR
  </button>
</fab-modal-footer>

Drawer

import {DrawerModule} from '@laberry/fab-material';

Components

FabDrawerComponent

selector: fab-drawer

Componente para ser usado como serviço de diálogo.

Métodos

setDrawer()	Type
drawer	MatDrawer
drawerPlaceholder	ViewContainerRef
returns	void

toggle()	Type
returns	Promise

close()	Type
returns	Promise

open()	Type
component	Type
config?	{ data: object }
returns	Promise

Exemplo

<fab-drawer>
  <fab-panel>
    <fab-panel-title>...</fab-panel-title>
  </fab-panel>
  ...
</fab-drawer>

import { DrawerService } from '@laberry/fab-material';
...
constructor(private matDrawer: DrawerService) {}
...
openDrawer() {
  this.drawerService.open(DrawerContentComponent)
}