Globus Style

ngx-globus-style Um framework front-end de comportamento e estilo para projetos web, com uma interface usada por milhares de usuários. Mantido pelos desenvolvedores front-end da BgmRodotec. Globus Style.

Dependências

• Angular npm install -g @angular/cli
• Angular Material npm install --save @angular/material @angular/cdk. Se estiver usando a versão do Angular 6 execute isto ng add @angular/material

Demo

Documentation, demos

Começando

Consulte o nosso Guia de Introdução.

Instalação:

Depois de instalar as dependências acima, instale o ngx-globus-style via npm:

npm install --save ngx-globus-style

1. Importe o GlobusStyleModule:

Finalmente, você pode usar o ngx-globus-style no seu projeto Angular. Uma vez instalado, você precisa importar nosso módulo principal GlobusStyleModule no seu root NgModule do seu aplicativo:

import { GlobusStyleModule } from 'ngx-globus-style';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [GlobusStyleModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Components

Basta seguir as instruções de introdução para o uso.

• Toast
• Dialog

Toast:

Inicie o ToastNotificationService para seu aplicativo:

import { ToastNotificationService } from 'ngx-globus-style';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    public toast: ToastNotificationService
  ) { }

  showToast() {
    this.toast.open('Mensagem de teste.');
  }
}

<button (click)="showToast()">Exibir Toast!</button>

Dialog:

Inicie o DialogNotificationService para seu aplicativo:

import { DialogNotificationService } from 'ngx-globus-style';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(
    public dialog: DialogNotificationService
  ) { }

  alertOpen() {
    this.dialog.alert('Atenção', ['Teste de Mensagem 1');
  }

  confirmOpen() {
    this.dialog.confirm('Atenção', 'Teste de mensagem').subscribe((resp: any) => {
      console.log(resp);
    });
  }
}

<button (click)="alertOpen()">Exibir Alerta!</button>
<button (click)="confirmOpen()">Exibir Confirmação!</button>

Contribuindo

Sou muito grato pelas suas ideias, propostas e descobri bugs que você pode deixar em questões do github. Desde já, obrigado!