Angular Diagram - propertiesPanel.tabs

Contains an array of tabs in the Properties panel.

Selector: dxi-tab
Type:

Array<Object>

Default Value: undefined

View Demo

commands

Lists commands in a tab.

Selector: dxi-command
Type:

Array<dxDiagramCustomCommand>

|

Array<DiagramCommand>

Use the groups property to group commands in the tab. Note, if the groups property is specified, the commands property is not in effect.

A properties panel tab can contain default and custom commands. Handle the CustomCommand event to respond to a custom command click.

jQuery
JavaScript
$(function() {
    var diagram = $("#diagram").dxDiagram({
    propertiesPanel: {
        visibility: 'visible',
        tabs: [{
            title: "Page Properties", 
            commands: ["pageSize", "pageOrientation", {name: "sayHello", text: "Say Hello", icon: "blockquote"}] 
        }]
    },
        onCustomCommand: function(e) {
            if (e.name == "sayHello")
            alert("Hello!")
        },
    }).dxDiagram("instance");
});

groups[]

Contains an array of command groups in the tab.

Selector: dxi-group
Type:

Array<Object>

View Demo

title

Specifies the tab's title.

Type:

String

Titles and tab headers are not displayed when there is only one tab in the Properties panel.