Canvas Toolbar¶
The canvas toolbar appears at the top of the <div> occupied by Common Canvas. By default, the toolbar will be displayed with appropriate buttons to perform the most popular actions. The toolbar can be customized by the application to show whatever action buttons are required. Buttons can be positioned to the left or right of the toolbar area.
The toolbar is customized by providing a toolbar config object as one of the <CommonCanvas> props.
The toolbar can be hidden by setting the enableToolbarLayout field in the canvas config to “None”.
Overflow Menu Behavior¶
If there is enough width all toolbar buttons will be displayed:
but when the width is too narrow to accommodate all the buttons, the toolbar will display an overflow button:
and when the overflow button is clicked, a menu appears showing the extra action buttons:
Dividers¶
Action buttons can be separated by dividers so that related buttons can be grouped together:
Tooltips¶
Action buttons will show a tooltip on hover, if a label is provided:
Enabled/Disabled actions¶
Action buttons in the toolbar can be shown as either enabled or disabled:
Selected state¶
Action buttons that reflect a state can be displayed as unselected or selected:
Text with icon¶
Action buttons can be shown with text alongside the icon (either before or after), if a label is provided:
Carbon button styling¶
Action buttons can be styled like Carbon buttons, if required:
Sub-menu¶
Action buttons can be configured to display a menu of related actions:
Sub-panel¶
Action buttons can be configured to display an application-specific panel:
Dual purpose buttons¶
Action buttons can be configured to be ‘dual purpose’ where the left side of the button peforms the associated action:
and the right side opens a panel of application-specified settings, associated with the left side part of the button:
Imbedded JSX¶
JSX can be provided to add additional information into the toolbar. In this case, the Autosaved time is added amongst the regular toolbar action buttons.
