README
Toolbar
Plain JS Toolbar Web component that provides an interface for groupping collection of commands.
Usage
Install with npm:
npm install cwui-toolbar
Once installed, import in your main file:
// first import library
import * as cwToolbar 'cwui-toolbar';
// then call the init function to register the component
cwToolbar.init();
At this point the component should be ready to use.
Using the component
<cwui-toolbar theme="light" >
<aside slot="left">
<!-- Items here will be aligned left -->
<button>Save</button>
</aside>
<aside slot="right">
<!-- Items here will be aligned right -->
<button>Prev</button>
<button>Next</button>
</aside>
</cwui-toolbar>
Attributes
theme
- optionallight
theme can be used
Events
sidebar-opened-changed
- emmited when sidebar is open/closedheader-visibility-changed
- emmited when header is shown/hidden
Usage:
document.querySelector('cwui-app-layout')
.addEventListener('sidebar-opened-changed',(e)=>console.log(e));
Slots
left
- toolbar items that will be displayed on the left sideright
- toolbar items that will be displayed on the left side
Styling
--cw-toolbar-background
- toolbar background color--cw-toolbar-padding
- default is 0px--cw-toolbar-border-color
- default is transparent--cw-toolbar-height
- toolbar height (default 48px)