| Table of Contents |
|---|
...
A toolbar is a grouped set of controls used to apply action to data.
<< Most communicative screenshot of the component >>
Usage & Behavior
The toolbar may be used in 3 components
Type | Image |
|---|---|
Data Table |   |
Widget-content |   |
List |  |
General guidelines
...
The toolbar is located on top of a data container (e,.g, . Data table) with the same width as the container
In some cases, the row of a toolbar can accommodate additional non-related components (e.g. a widget with a title text)
Where possible the toolbar can be divided into 2 distinct types of operations:
Left-aligned, actions that impact the data (e.g. delete)
Right-aligned, actions impacting the view of the data (e.g. print, search, change view mode)
In case all the components are only for viewing the data, they will be left-aligned
...
A toolbar can be applied to single or multiple selection actions on a data set
Controls in the toolbar can be contextual to the data set enabeld\disabled contextually to a selection (e.g. disabled delete action if no row is selected)
...
Zeplin link | Screen thumbnail |
|---|---|
<<Short Zeplin link. You >> | <<Screen with 200 width>> |
Code
<<a box containing the code - when there is no code to present use the Coming Soon GIF>>
...
Delete at the end anything below this
...