Angular2 FlashBoxComponent

Angular2-Flashbox-Komponente Beispielanwendung

Die FlashBox -Komponente ist die Angular2 -Komponente, die zur Anzeige einfacher Benutzerinformationsnachrichten bereitgestellt wird.

Anwendungsskelett, das für die Entwicklung verwendet wird, finden Sie hier Angular2 - Anwendungsskelett

Voraussetzungen

Muss Knoten und NPM installiert haben.

So starten Sie die Anwendung

Installieren Sie Knotenabhängigkeiten in Ihrem Projektroot -Verzeichnis (hier befindet sich die Datei 'package.json') mit:

$ npm install

Installieren Sie die Definitionen der Typenskription mit:

$ typings install

Anwendung mit

$ gulp

Die Anwendung wird initiiert zusammengestellt und gestartet. Standardmäßig hört der Server auf Port 3000 zu. Die Anwendung kann über Ihren Webbrowser auf URL Localhost: 3000 zugegriffen werden.

So verwenden Sie die Flashbox -Komponente

Die Flashbox -Komponente ist (nur) Teil des CommonComponents -Moduls.

Um das Modul zu verwenden, müssen Sie Ihren Modulloader konfigurieren. Falls Sie das SystemJS -Modul Loader verwenden, fügen Sie die folgenden Karten hinzu:

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

In Ihrem Anwendungsmodul -Definitionsdatei importieren Sie das CommonComponents -Modul.

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

Jetzt können wir die FlashBox -Komponente in unserem Modul deklarierten Komponentenvorlage mithilfe von Element verwenden.

Platzieren Sie Ihre HTML-basierte Benutzerinformationsnachricht im Flash-Box -Element.

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

Eingänge

Attribute

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

Aktionen

1. Typ: Zeichenfolge , Standard: Primär geben Sie den Typ des Flash -Feldes an. Verfügbare Typen: Standard , Primär , Erfolg , Info , Warnung , Gefahr basierend auf Standard -Bootstrap -Etikettentypen

2. Position: String , Standard: Tr . Geben Sie die Position des Flash -Box an. Verfügbare Werte:

• TR - Top -Right,
• TM - Top -Middle,
• tl - obere links,
• CR - Mitte -Rechts,
• CM - Mitte -Middle,
• CL - Mitte -Links,
• Br - unten rechts,
• BM - Bottom -Middle,
• BL - Bottom -Links

3. Max-Breite: String , Standardeinstellung: 300px Geben Sie die Komponente der Flash-Box an, die max.

4. SetTimeout -Nummer , Standardeinstellung: 2000 Geben Sie Zeitüberschreitungen an (Anzahl der MS Die Steuerung ist sichtbar) in MS . Standard ist 2 Sek .

Aktionen

Um eine Flashbox -Steueraktion zu verursachen, verwenden Sie das lokale Variable -System der Angular2 -Template.

Vorlage Beispiel

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

Reglerbeispiel

Referenzkomponente

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

Referenzkomponente aus der lokalen Variablen der Vorlage mit der Vorlage

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

Verfügbare Aktionen:

1. flashonce (): void - nur einmal für setTimeout zeit zeit zahlen
2. show (): void - die Kontrolle für unbegrenzte Zeit sichtbar machen (oder bis zu einer anderen Aktion kommt es zu)
3. hide (): void - die Kontrolle für unbegrenzte Zeit verborgen machen (oder bis zu einer anderen Aktion kommt es zu)
4. StartFlashing (): void - Beginnen Sie mit dem Blinken für unbegrenzte Zeit (oder bis zu einer anderen Aktion treten auf). Die Übergangszeit von unviserble zu sichtbar ist auf 0,5 Sekunden eingestellt und derzeit nicht konfigurierbar. Die Flashbox -Steuerung, die wir für SetTimeout -Zeitspanne angezeigt haben.
5. Stopflashing (): void - Hör auf zu blinken