CommonToolbar
THIS COMPONENT IS CURRENTLY UNDER DEVELOPMENT A toolbar is a graphical interface element that displays icons or buttons representing actions or tools. It provides quick access to commonly used functions in an application and may include dropdown menus and customization options.
Basic Usage
<triton-common-toolbar>
<triton-button>Toolbar button</triton-button>
</triton-common-toolbar>
<TritonCommonToolbar>
<TritonButton>Toolbar button</TritonButton>
</TritonCommonToolbar>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-common/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-common-toolbar>
<triton-button>Toolbar button</triton-button>
</triton-common-toolbar>
</body>
</html>
Variants
Divider
Divider is a visual element used within a toolbar to separate different groups or sections of toolbar items. It is a horizontal or vertical line that acts as a visual cue to visually organize and group related toolbar controls or actions.
<triton-common-toolbar-divider>
</triton-common-toolbar-divider>
Apperance
Used with other Common components
The toolbar, on the other hand, complements the header by providing additional functionality or tools that are relevant to the user's actions or the specific context of the application. It often consists of icons, buttons, or controls that enable quick access to frequently used actions or features.