@laberry/fab-material NPM

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\	Configurações adicionais para o snackbar.
action	string = 'Fechar'	Label para botão do snackbar.

Return
MatSnackBarRef\

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

tslib

@everything-registry/sub-chunk-533 @zalastax/nolb-_lab

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago