README
App Layout
Plain JS Web component for wrapping page content and creating app layout. Provides a quick and easy way to get a common application layout structure done.
Usage
Install with npm:
npm install cwui-app-layout
Once installed, import in your main file:
// first import library
import * as appLayout 'cwui-app-layout';
// then call the init function to register the component
appLayout.init();
At this point the component should be ready to use.
Using the component
<cwui-app-layout theme="primary-sidebar" sidebar="expanded" header="on">
<header slot="header">
<!-- Anything that you want to display in the header -->
<div style="padding: 10px;">Logo</div>
</header>
<aside slot="sidebar">
<!-- Anything that you want to display in the sidebar like menu items -->
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</aside>
<main >
<!-- Your main content -->
<div style="padding: 10px;">
<h1>Content</h1>
<p>Web Component providing a quick and easy way to get a common application layout structure done</p>
</div>
</main>
</cwui-app-layout>
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
- sidebar - sidebar contents goes here
- header - the header contents
Styling
--app-layout-header-background
- header background color--app-layout-font-family
- font family--app-layout-header-height
- the height of the header (default 66px)--app-layout-sidebar-background
- sidebar background color--app-layout-sidebar-color
- sidebar foreground color--app-layout-sidebar-width
- width of the sidebar in pixels (default 250px)--app-layout-sidebar-collapsed-width
- width of the sidebar when collapsed (default 50px)