Angular2 FlashBoxComponent

Exemple de composant Angular2-Flashbox

Le composant FlashBox est le composant Angular2 fourni pour afficher des messages d'informations utilisateur simples.

Le squelette d'application utilisé pour le développement peut être trouvé ici Angular2 - Squelette d'application

Condition préalable

Doit avoir installé le nœud et le npm.

Comment démarrer l'application

Installez les dépendances de nœuds dans le répertoire racine de votre projet (c'est là que se trouve le fichier 'package.json') en utilisant:

$ npm install

Installez les définitions de typeScript en utilisant:

$ typings install

Démarrer la demande avec

$ gulp

L'application sera initialement compilée et démarrée. Par défaut, le serveur écoute sur le port 3000. L'application est accessible via votre navigateur Web sur URL LocalHost: 3000 .

Comment utiliser le composant Flashbox

Le composant Flashbox fait (pour l'instant uniquement) une partie du module CommonComponents.

Afin d'utiliser le module, vous devez configurer votre chargeur de module. Dans le cas où vous utilisez le chargeur de module SystemJS , ajoutez les modules suivants:

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

Dans votre module d'application Définition du fichier Importer le module CommonComponents.

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

Nous pouvons maintenant utiliser le composant Flashbox dans notre modèle de composant déclaré module à l'aide de l'élément.

Placez votre message d'informations utilisateur basé sur HTML dans l'élément Flash-Box .

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

Entrées

Attributs

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

Actes

1. Type: String , par défaut: Primary Spécifiez le type de case flash. Types disponibles: par défaut , primaire , succès , informations , avertissement , danger basé sur les types d'étiquette de bootstrap par défaut

2. Position: chaîne , par défaut: tr . Spécifiez la position de la boîte flash. Valeurs disponibles:

• tr - top-droite,
• TM - haut-milieu,
• tl - haut-gauche,
• Cr - centre-droit,
• CM - centre-centre,
• Cl - Centre-gauche,
• br - en bas à droite,
• BM - bas du bas,
• BL - inférieur à gauche

3. largeur max: chaîne , par défaut: 300px spécifier la largeur maximale du composant de la boîte flash

4. Settimeout Number , par défaut: 2000 Spécifiez le délai d'attente (nombre de ms le contrôle est visible) dans MS . La valeur par défaut est de 2 sec .

Actes

Afin de provoquer une action de contrôle Flashbox, utilisez le modèle de variable locale angulaire2.

Exemple de modèle

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

Exemple de contrôleur

composant de référence

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

Composant de référence de la variable locale de modèle

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

Actions disponibles:

1. Flashonce (): void - Show Flashbox une seule fois pour Settimeout Time of Time
2. show (): void - rendre le contrôle visible pendant un temps illimité (ou jusqu'à ce qu'une autre action se produit)
3. hide (): void - rendre le contrôle caché pendant un temps illimité (ou jusqu'à ce qu'une autre action se produit)
4. startFlashing (): void - commencez à clignoter pendant un temps illimité (ou jusqu'à ce qu'une autre action se produit). La période de transition de Unvisble à Visible est fixée à 0,5 seconde et est actuellement peu configurable. Le Flashbox Control Us a été affiché pour Settimeout .
5. stopflashing (): void - arrête de clignoter