Durchsuchbare Dokumentation aufrufen

Zurück zur Dokumentationsübersicht

agorum.icons.builder

Das Widget agorum.icons.builder erstellt eine Oberfläche, in der ein Icon angezeigt oder bearbeitet werden kann.

Der Benutzer kann eigene Icons durch die Auswahl, Änderung und Kombination vorhandener Icons erstellen und das geänderte Icon oder den Icon-SVG-Code für eigene Anwendungen nutzen. Für weitere Informationen zur Verwendung siehe Icon erstellen.

Screenshot der Oberfläche für die Icon-Erstellung

Verwendung


Das folgende Beispiel zeigt die grundsätzliche Verwendung von agorum.icons.builder.

let aguila = require('common/aguila');

aguila
  .create({
    type: 'agorum.icons.builder',
    // optional value for icon display 
    // value: 'agorum:circle;color=#0069b5|mdi:web-asset;color=white;scale=.8',
  })
  .on('iconChanged', icon => {
    console.log(icon);
  });

Sie können ein Icon für die Anzeige mitgeben, sonst wird das Fenster ohne Voranzeige eines Icons geöffnet. 

 

Screenshot der Oberfläche ohne Voranzeige eines Icons

Events


iconChanged

Das Event iconChanged löst aus, sobald ein Benutzer die Icon-Auswahl ändert und bestätigt. Das Event wird nicht ausgelöst, wenn das Icon leer ist oder nicht geändert wird.

Das System gibt den Icon-Code zurück.


Beispiel

.on('iconChanged', icon => { 
  console.log(icon); 
});

Beispiel für einen Rückgabewert

agorum:agorum-logo;color=#0069b5|agorum:circle-outline-bold

Parameter


value

Sie können den Parameter value optional verwenden, um ein Icon für die Anzeige mitzugeben, das der Benutzer als Grundlage für die Erstellung eigener Icons verwenden kann.

Beispiel

value: 'agorum:circle;color=#0069b5|mdi:web-asset;color=white;scale=.8',