header web ui component
npm install @moki.codes/mokui-headerheader
--------------------------------------------------------------------------------
Description
--------------------------------------------------------------------------------
header block provides header component inside the holygrail layout
Installation
--------------------------------------------------------------------------------
``
yarn add @moki.codes/mokui-header
Styles
--------------------------------------------------------------------------------
`
@import "@moki.codes/mokui-header/dist/mokui-theme.css"
@import "@moki.codes/mokui-header/dist/mokui-layout.css"
@import "@moki.codes/mokui-header/dist/mokui-elevation.css"
@import "@moki.codes/mokui-header/dist/mokui-animation.css"
@import "@moki.codes/mokui-header/dist/mokui-header.css"
Basic Usage
--------------------------------------------------------------------------------
`
...
Modificators
--------------------------------------------------------------------------------
| name | value | description |
| ----------- | ------------- | ---------------------------------------------- |
| fixed | | makes header fixed |
Variables
--------------------------------------------------------------------------------
header defines various variables which shapes its behavior:
* --header-height
- defined as --layout-header-height at layout level,
override --layout-header-height to change appearance
* --header-brand-size
- defines brand height, override to change appearance
* --header-action-size
- defines action height and icon width and height,
override to change appearance
* --header-navigation-size
- defines navigation height, override to change appearance
Elements
--------------------------------------------------------------------------------
* container
* action
* icon
* brand
* navigation
* navigation-item
container
--------------------------------------------------------------------------------
container for all header elements, centers child elements vertically
action
--------------------------------------------------------------------------------
actionable item
Modificators
--------------------------------------------------------------------------------
| name | value | description |
| ----------- | ------------- | ---------------------------------------------- |
| primary | | headers primary action leftmost item after |
| | | brand hidden on --screen-l or above, visible |
| | | otherwise |
| secondary | | headers secondary action rightmost item |
icon
--------------------------------------------------------------------------------
header action's icon
brand
--------------------------------------------------------------------------------
headers brand leftmost item
navigation
--------------------------------------------------------------------------------
headers navigation floats left, visible on --screen-l(as defined at the theme
level) or above and hidden otherwise
navigation-item
--------------------------------------------------------------------------------
headers navigation menu item(s) floats left
Javascript
--------------------------------------------------------------------------------
Basic Usage
--------------------------------------------------------------------------------
`
import { Header } from "@moki.codes/mokui-header";
const headerElement = document.querySelector("header");
const header = Header(headerElement);
/ when done /
header.destroy();
`
Exports
--------------------------------------------------------------------------------
* Header
*
*
*
*
Header
--------------------------------------------------------------------------------
(element: Elements): HeaderComponent
Header factory is a composition of the HeaderComponent, HeaderAdapter,
Emitter, Component.
HeaderComponent
--------------------------------------------------------------------------------
o: T = {} as T
): HeaderComponent
Header Component factory provides core header functionality
Methods
--------------------------------------------------------------------------------
| name | description |
| --------------------------- | ---------------------------------------------- |
| setScrollTarget | set scroll target to the provided EventTarget |
| (target: EventTarget): void | target |
| destroy(): | clean up routine to be called upon deleting |
| HeaderComponent
HeaderAdapter
--------------------------------------------------------------------------------
o: T
): HeaderAdapter
Header Adapter factory provides default adapter functionality, one can override
partially or completely used by HeaderComponent.
events
--------------------------------------------------------------------------------
| name | Description |
| ------------------------------------- | ------------------------------------ |
| mokui-header:action-primary-clicked | header action primary clicked |
| mokui-header:action-secondary-clicked | header action secondary clicked |
Methods
--------------------------------------------------------------------------------
| name | description |
| --------------------------- | ---------------------------------------------- |
| handleActionPrimaryClick() | handler for the header__action_primary click |
| : void | event, fires ACTION_PRIMARY_CLICK_EVENT event |
| handleActionSecondaryClick()| handler for the header__action_secondary click |
| : void | event, fires ACTION_SECONDARY_CLICK_EVENT event|
| getViewportScrollY( | returns number of pixels scrolled on scroll |
| targetSelector: symbol | targetSelector target from top of the page |name
| ): number | |
| getHeaderHeight(): number | returns height of the root(), (header) |
| ): number | |
| hasClass(name: string) | returns if root(), (header) has class |name
| : boolean | |
| addClass(name: string) | adds class to the element root(), |name` to the element root(), |
| : void | (header) |
| removeClass(name: string) | removes class
| : void | (header) |
classes
--------------------------------------------------------------------------------
| name | value |
| --------------------------- | ---------------------------------------------- |
| HEADER_HIDDEN: "string" | "header_hidden" |
strings
--------------------------------------------------------------------------------
| name | value |
| ------------------------------ | ------------------------------------------- |
| ACTION_PRIMARY_SELECTOR | ".header__action_primary" |
| : "string" | |
| ACTION_PRIMARY_CLICKED_EVENT | "mokui-header:action-primary-clicked" |
| : "string" | |
| ACTION_SECONDARY_CLICKED_EVENT | "mokui-header:action-secondary-clicked" |
| : "string" | |