Angular2 FlashBoxComponent

Aplicativo de exemplo de componente angular2-flashbox

O componente FlashBox é o componente Angular2 fornecido para exibir mensagens simples de informações do usuário.

Esqueleto de aplicativo usado para desenvolvimento pode ser encontrado aqui Angular2 - Esqueleto de aplicação

Pré -requisitos

Deve ter o nó e o NPM instalados.

Como iniciar o aplicativo

Instale as dependências do nó no diretório raiz do seu projeto (é aqui que está localizado o arquivo 'package.json') usando:

$ npm install

Instale as definições do TypeScript usando:

$ typings install

Inicie a aplicação com

$ gulp

O aplicativo será compilado e iniciado iniciando. Por padrão, o servidor está ouvindo na porta 3000. O aplicativo pode ser acessado através do seu navegador da web no URL localhost: 3000 .

Como usar o componente FlashBox

O componente FlashBox é (apenas por enquanto) parte do módulo CommonComponents.

Para usar o módulo, você deve configurar o carregador do módulo. Caso você use o carregador do módulo SystemJS , adicione os seguintes mapeamentos:

 System.config({
    ...
    map: {
        'commoncomponents': 'node_modules/commoncomponents'
    }
    ...
})

No seu módulo de aplicativo, arquivo de definição importe o módulo CommonComponents.

 ... 
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
    ...
     imports:      [ CommonComponentsModule ],
    ...
})

Agora, podemos usar o componente FlashBox em nosso modelo de componente declarado do módulo usando o elemento.

Coloque sua mensagem de informações do usuário baseada em HTML dentro do elemento de caixa de flash .

 <flash-box>
        <!-- Message -->
</flash-box> 

Entradas

Atributos

    <flash-box [type]="type_value" [position]="position_value" [max-width]="maxwidth_value" [setTimeout]="setTimeout_value>
        HTML message
    </flash-box>    

Ações

1. TIPO: String , Padrão: Especificar primário tipo de caixa de flash. Tipos disponíveis: padrão , primário , sucesso , informações , aviso , perigo com base em tipos de etiquetas de bootstrap padrão

2. Posição: String , Padrão: Tr . Especifique a posição da caixa de flash. Valores disponíveis:

• TR - o canto superior direito,
• TM - Middle superior,
• TL - Top -Left,
• CR - Centro -direita,
• CM - Center -Middle,
• CL - Centro -esquerda,
• BR - inferior -direto,
• BM - Middle inferior,
• BL - Bottom -esquerda

3. Max - lar

4. Settimeout Número , Padrão: 2000 Especifique o tempo limite (número de MS o controle é visível) no MS . O padrão é 2 seg .

Ações

Para causar uma ação de controle da caixa de flash, use o modelo de variável local Angular2.

Exemplo de modelo

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action">Cause flashbox action</button>

Exemplo de controlador

Componente de referência

 import { FlashBoxComponent } from 'commoncomponents/components/flashbox.component';

Componente de referência da variável local de modelo usando

 @ViewChild("tlv_name") tlv:FlashBoxComponent;
tlv_name.available_action();

Ações disponíveis:

1. flashonce (): void - mostre flashbox apenas uma vez para o Settimeout quantidade de tempo
2. SHOW (): Void - Torne o controle visível por uma quantidade ilimitada de tempo (ou até que alguma outra ação aconteça)
3. hide (): void - faça o controle oculto por uma quantidade ilimitada de tempo (ou até que alguma outra ação aconteça)
4. Startflashing (): void - comece a piscar por quantidade ilimitada de tempo (ou até que alguma outra ação aconteça). O período de transição de desvios para visíveis é definido como 0,5 segundos e atualmente não é infigurável. O FlashBox Control Us mostrado para o Settimeout quantidade de tempo.
5. Stopflashing (): void - pare de piscar