Vue Diagram - propertiesPanel.tabs

Contains an array of tabs in the Properties panel.

Selector: DxTab
Type:

Array<Object>

Default Value: undefined

View Demo

commands

Lists commands in a tab.

Selector: DxCommand
Type:

Array<dxDiagramCustomCommand>

|

Array<String>

Accepted Values: 'separator' | 'exportSvg' | 'exportPng' | 'exportJpg' | 'undo' | 'redo' | 'cut' | 'copy' | 'paste' | 'selectAll' | 'delete' | 'fontName' | 'fontSize' | 'bold' | 'italic' | 'underline' | 'fontColor' | 'lineStyle' | 'lineWidth' | 'lineColor' | 'fillColor' | 'textAlignLeft' | 'textAlignCenter' | 'textAlignRight' | 'lock' | 'unlock' | 'sendToBack' | 'bringToFront' | 'insertShapeImage' | 'editShapeImage' | 'deleteShapeImage' | 'connectorLineType' | 'connectorLineStart' | 'connectorLineEnd' | 'layoutTreeTopToBottom' | 'layoutTreeBottomToTop' | 'layoutTreeLeftToRight' | 'layoutTreeRightToLeft' | 'layoutLayeredTopToBottom' | 'layoutLayeredBottomToTop' | 'layoutLayeredLeftToRight' | 'layoutLayeredRightToLeft' | 'fullScreen' | 'zoomLevel' | 'showGrid' | 'snapToGrid' | 'gridSize' | 'units' | 'pageSize' | 'pageOrientation' | 'pageColor' | 'simpleView' | 'toolbox'

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.

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: DxGroup
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.