toolbar

Beschreibung

Optional. Ein Array von Icon-Objekten, das eine Toolbar mit Schaltflächen für Elemente festlegt

Verwendung

toolbar?: [
    {
        id: string,
        content: string,
        check?: function,
        css?: function,
        tooltip?: string
    },
    {...} // other icon objects
];

Parameter

Das Array toolbar enthält eine Reihe von Icon-Objekten. Jedes Icon-Objekt kann die folgenden Parameter enthalten:

• id - (erforderlich) die ID des Icons
• content - (erforderlich) der Inhalt des Icons. Er kann ein HTML-Element mit dem Namen der Icon-Klasse enthalten
• check - (optional) prüft, ob das Icon auf das Element angewendet werden soll. Die Funktion nimmt ein Element-Objekt entgegen und gibt true zurück, wenn das Icon für dieses Element gerendert wird
• css - (optional) die Funktion, die den/die Namen der CSS-Klasse(n) zurückgibt, die auf das Element angewendet werden soll(en)
• tooltip - (optional) ein Tooltip, der beim Überfahren des Icons mit der Maus erscheint

Beispiel

const diagram = new dhx.Diagram("diagram_container", {
    type: "org",
    select: true,
    // Legt eine Toolbar mit Schaltflächen für Elemente fest
    toolbar: [
        {
            id: "add",
            content: "<i className='dxi dxi-plus-box'>",
            check: item => !item.assistant && !item.partner,
            tooltip: "Add new shape"
        },
        {
            id: "download",
            content: "<i className='dxi dxi-download'></i>",
            tooltip: "Download to PDF"
        },
        {
            id: "remove",
            content: "<i className='dxi dxi-delete-outline'>",
            check: item => item.parent,
            css: () => "dhx_diagram_toolbar__icon--remove",
            tooltip: "Remove"
        }
    ]
});

Changelog:

• Der Parameter tooltip wurde in v5.0 hinzugefügt

Verwandte Artikel:

• Toolbar für Formen festlegen
• Standard-Icons

Verwandtes Beispiel: Diagram. Konfiguration. Formen-Toolbar