Toolbar
The component is used to place actions on the panel
Place the most frequently used and useful actions on the toolbar. You can place some toolbars on the page - common toolbar for application and toolbars for other purposes.
It is best when the toolbar shows actions that are relevant in the current context. For example, when user is working on text, it is good idea to show actions for text formatting.
Variants
In Altrone 2.0 was added variant
prop. This prop set the appearance of the toolbar. There are two different variants for Toolbar: default
and compact
.
Default Toolbar is large and can take a lot of place on the screen but this variant is great to use as main toolbar for the application.
Compact variant is better to use for a small toolbars. For example, when user selected a picture on the screen, you can show special compact toolbar of actions for manipulating the picture.
ToolbarVariant
Toolbar Groups
Toolbar consists of toolbar actions. But you can group your toolbar actions into groups via ToolbarGroup component.
ToolbarGroup Properties
Property | Type | Description |
---|---|---|
|
| Child actions |
| Alignment of actions | |
|
| Group takes all available space (works like flex-grow: 1) |
|
| If group hasn't got enough space then the remaining actions will be moved to dropdown |
Toolbar Actions
ToolbarAction is a component thats represents a button on the toolbar. It has a mandatory icon and optional label props. Also toolbar action have three different types of behaviour:
Button. When you pass onClick
prop the action is working as a button. Just click on it and action happens. Examples of the actions with this behaviour: "Undo" action, "Flip vertical" action or "Save" action.
ContextMenu. When you pass contextMenu
prop the action is working as a button with dropdown. When user hits the button he see the list of actions. Examples of the actions: "Recent documents", "Send to" and "More tools". This property is available only in Altrone 1.3 and later.
FloatingBox. When you pass content
prop the action is working as a button which opens a FloatingBox. When user hits the button he see the FloatingBox with content. Examples of the actions: "Share", "Formatting", "People". The property is a function with arguments that are represented in the ToolbarPopupActionProps type. This property is available only in Altrone 1.3 and later.
Custom action. In Altrone 2.2, you can create actions with different content. For example, you can use <Select> or <DatePicker> instead of an usual icon. Use children
prop to activate this mode. You may also need hideLabel
, fluid
and usePressEffect
props to properly configure the behavior and display of the action.
All of these behaviors are useful in different ways. Use buttons for simple actions, content menus for multiple options, and floating boxes for more complex interfaces and panels. And custom actions allow you to create more complex toolbar actions.
ToolbarPopupActionProps
ToolbarAction Properties
Property | Type | Description |
---|---|---|
|
| Icon of the action |
|
| Label of the action |
|
| Callback is fired when user clicked on the action |
|
| Context Menu of the action |
|
| FloatingBox content for the action |
|
| Marks action as active |
|
| Marks action as disabled |
|
| Marks action as danger |
|
| Adds indicator to the action |
|
| Hides the label of the action. Default value is |
|
| Custom children of the action. Default value is |
|
| If true, the action takes all available space. Default value is |
|
| If true, the action has animation on press. Default value is |
|
| Custom CSS class |
Toolbar Menu
In some cases your application has so many actions and it is not possible to fit all of them on the toolbar. For default toolbars it is possible to add menu. Menu is a list of text buttons on the top side of the toolbar. It is working like application's menu bar in Windows applications or macOS App menus.
You can store all your actions in the menu which is separated by different groups. Check ToolbarMenu type to see how it works:
ToolbarMenu
This type is available for importing only in Altrone 2.0 and later. For Altrone 1.0 you can use { label: string; submenu?: ContextMenuType }[];
Properties
Property | Type | Description |
---|---|---|
|
| Child group containers and actions |
| Variant of the toolbar. Default value is | |
|
| Makes position of the toolbar as fixed. |
| Adds the menu to the toolbar. Only available for | |
| Default offset (from window boundaries) for | |
|
| Width of the toolbar |
| Surface of the toolbar | |
| Shadows of the toolbar | |
| Default position for toolbar (for | |
|
| Custom CSS class |
History
Altrone 2.2
:added
hideLabel
prop for ToolbarActionadded
children
prop for ToolbarActionadded
fluid
prop for ToolbarActionadded
usePressEffect
prop for ToolbarAction
Altrone 2.0
:added
surface
propadded
elevation
propadded
variant
propadded
defaultPosition
propadded export of
ToolbarMenu
type
Altrone 1.3
:added
contextMenu
prop for ToolbarActionadded
content
prop for ToolbarActiononClick
prop forToolbarAction
became as optional
Altrone 1.1
: addedindicator
prop forToolbarAction
Altrone 1.0
: initial release
Last updated