header
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
<head>
<style>
width: calc(var(--msp-1) * 4);
height: var(--msp-1);
line-height: var(--msp-1);
background-color: var(--color-on-background);
</style>
</head>
...
<body>
<div class="theme
theme_msp_perfect-fifth
theme_color_light
layout
layout_type_holy-grail
elevation
animation">
<header class="layout__header header header_fixed elevation_depth_4">
<div class="layout__container layout__container-fluid header__container">
<div class="header__action header__action_primary">
<svg class="header__icon">
...
</svg>
</div>
<div class="header__action header__brand">
<div class="placeholder-brand elevation elevation_depth_8"></div>
</div>
<div class="header__navigation">
<div class="header__action header__navigation-item">
item
</div>
<div class="header__action header__navigation-item">
item
</div>
</div>
<div class="header__action header__action_secondary">
<svg class="header__icon" ...>
...
</svg>
</div>
</div>
</header>
</div>
</body>
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
HeaderHeaderComponentHeaderAdapterclassesstrings
Header
(element: Elements): HeaderComponent<HeaderAdapter<Emitter<Component<{}>>>>
Header factory is a composition of the HeaderComponent, HeaderAdapter, Emitter, Component.
HeaderComponent
<T extends HeaderAdapter<Emitter<Component>>>( o: T = {} as T ): HeaderComponent<T>
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; | component |
HeaderAdapter
<T extends Emitter<Component>>( o: T ): HeaderAdapter<T>
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 |
| ): 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 name to the element root(), |
| : void | (header) |
| removeClass(name: string) | removes class name to the element root(), |
| : 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" |