Basisauswahl

Beispiel, das zeigt, wie man eine einfache Radio-Auswahl mit Label-Unterstützung integriert

class BasicSelectionExampleWidget extends NGSSelectionWidget {
    /* Beispiel, das zeigt, wie man einen einfachen Radio-Auswahlknopf integriert
       mit Label-Unterstützung
  */

    /* HTML-Vorlage, die generiert wird, bevor die Klasse erstellt wird
        Alle IDs und CSS-Klassennamen werden mit der uniqueId versehen
        die während der Erstellung des Widgets angegeben wird */
    static get template() {
        return `<div class="ngs-widget-basic-radio-sample">
      <div>
         <input type="radio" id="radioButton">
      </div>
      <div>
         <ngs-label></ngs-label>
       </div>
       </div>`
    }

    /* Stil, der diesem Widget zugewiesen wird. Beachten Sie, dass alle 
      Elementklassennamen mithilfe der eindeutigen ID des Widgets abgegrenzt werden */  
    static get style() {
        return '.ngs-widget-basic-radio-sample { display:flex;flex-direction:row}';
    }

    init() {
        // Holen Sie das Input-Element aus der Vorlage
        // Es ist wichtig, jede ID 
        // der Vorlage mit der uniqueId des Widgets zu versehen
        this.radioButton = this.getWidgetElementById('radioButton');

        // Ermitteln Sie den aktuellen Render-Modus, um zu wissen, wie wir
        // den Zustand hier einrichten sollten; setzen Sie ihn auf deaktiviert, wenn 
        // das Widget im Nur-Lese-Modus ist 
        this.isDisabled$(disabled => {
            this.radioButton.disabled = disabled;
        });

        this.isSelected$(selected => {
            this.radioButton.checked = selected;
        });

        this.radioButton.addEventListener('click', (event) => {
            this.radioChecked(this.radioButton.checked, this);
        });
    }

    // Den Wert an das Formular übermitteln
    radioChecked(value, widget) {
        widget.selectAnswer(value);
    }
  }