Wie man ein Antwortpanel mit einer Zuweisungsinteraktion umschaltet

Übersicht

Erfahren Sie, wie Sie ein dynamisches erstellen Antwort-Container anzeigen/ausblenden mit dem Zuweisungs-Interaktion in der Avonni Dynamic Components App. Dieses Beispiel zeigt, wie Komponentenstatus deklarativ verwaltet werden.

Ziel

Erstellen Sie eine Benutzeroberfläche, in der:

• Durch Klicken auf eine Antwort Schaltfläche ein Bereich mit Eingabefeldern angezeigt wird.

• Durch Klicken auf eine Schließen Symbol innerhalb des Bereichs blendet diesen wieder aus.

• Die Sichtbarkeit des Bereichs wird mit einer Booleschen Variablen und zwei Zuweisungs-Interaktionen.

Schritt-für-Schritt-Anleitung

1. Erstellen Sie eine boolesche Variable für den Zustand

Im Ressourcenbereich:

• Variablentyp: Boolesch

• API-Namen: isReplying

• Anfangswert: false

Diese Variable steuert, ob der Antwortbereich sichtbar ist.

2. Fügen Sie den Antwort-Container hinzu

• Ziehen Sie ein Container-Komponente auf die Arbeitsfläche.

• Fügen Sie innerhalb des Containers Komponenten wie ein Textfeld hinzu, um eine Antwort zu verfassen.

Dieser Container wird basierend auf dem Wert von angezeigt oder ausgeblendet. isReplying.

3. Fügen Sie die "Antwort"-Schaltfläche hinzu

• Platzieren Sie eine Avonni-Button-Komponente außerhalb des Containers.

• Beschriftung: Antwort

Interaktionskonfiguration (Beim Klicken):

• Aktionstyp: Zuweisung

• Variable: {!isReplying}

• Operator: gleich

• Wert: true

Das Klicken der Schaltfläche setzt isReplying auf true, wodurch der Antwortbereich angezeigt wird.

4. Fügen Sie das "Schließen"-Symbol in den Container ein

• Ziehen Sie eine Symbol-Komponente in den Antwort-Container.

• Symbol: utility:close oder utility:delete

Interaktionskonfiguration (Beim Klicken):

• Aktionstyp: Zuweisung

• Variable: {!isReplying}

• Operator: gleich

• Wert: false

Das Klicken des Symbols setzt die Variable zurück und blendet den Container wieder aus.

5. Legen Sie die Sichtbarkeitsregel für den Container fest

• Wählen Sie die Container-Komponente.

• Öffnen Sie das Sichtbarkeit der Komponente festlegen Einstellungen.

• Fügen Sie eine Bedingung hinzu: Anzeigen, wenn isReplying ist gleich true.

Ergebnis

• Wenn die Seite geladen wird, isReplying ist false, sodass der Antwort-Container ausgeblendet ist.

• Das Klicken der Antwort Schaltfläche setzt isReplying auf true, wodurch der Container erscheint.

• Das Klicken der Schließen Das Symbol setzt ihn zurück auf false, wodurch er wieder ausgeblendet wird.

All diese Logik wird deklarativ mit nur zwei Zuweisungs-Interaktionen gehandhabt – kein benutzerdefinierter Code erforderlich