@moki.codes/mokui-tabs NPM

tabs

Description

tabs block is a list of tabs with tab__tab items

Installation

yarn add @moki.codes/mokui-tabs

Styles

@import "@moki.codes/mokui-tabs/dist/mokui-theme.css"
@import "@moki.codes/mokui-tabs/dist/mokui-animation.css"
@import "@moki.codes/mokui-list/dist/mokui-text.css"
@import "@moki.codes/mokui-tabs/dist/mokui-tabs.css"

Basic Usage

...
<body class="theme
             theme_color_light
             theme_msp_perfect_fifth
             animation">
...
<div class="tabs">
        <div class="tab tab_active">active tab item</div>
        <div class="tab">non-active tab</div>
        <div class="tab">another non-active tab</div>
</div>
...
</body>

Variables

--tab-height:
- controls tab height, defaults to double the value of the var(--msp-1)

Elements

tab

tab is the item inside tabs list tabs

Modificators

name	value	description
active		give tab active state styles
disabled		give tab disabled state styles
size	s, m, l	sets vertical spacing to 1/4 of the
		--msp-1, half of the --msp-1,
		--msp-1; for the s,m,l respectively

Javascript

Basic Usage

import { Tabs } from "@moki.codes/mokui-tabs";

const tabsEl = document.querySelector(".tabs");
const tabsComponent = Tabs(tabsEl);
/* when done */
tabsComponent.destroy();

Exports

Tabs
TabsComponent
TabsAdapter
Tab
TabComponent
TabAdapter

Tabs

<V extends object = {}>(e: Element) => TabsComponent<TabsAdapter<Emitter<Listener<Component<V>>>>>

Tabs factory is a composition of the TabsComponent bind to Tab of TabsAdapter of Emitter of Listener of Component.

TabsComponent

(Tab: Tab) => <T extends TabsAdapter<Emitter<Listener<Component>>>>

TabsComponent factory provides core tabs functionality, accepts Tab factory which is used to instantiate each Tab.

Methods

name	description
destroy(): void;	clean up routine to be called upon deleting
	component

TabsAdapter

<T extends Emitter<Listener<Component>>>

TabsAdapter factory provides default adapter functionality one can override partially or completely, used by TabsComponent.

Tab

<V extends object = {}>(e: Element) => TabComponent<TabAdapter<Emitter<Listener<Component<V>>>>>

Tab factory is a composition of the TabComponent of TabAdapter of Emitter of Listener of Component.

TabComponent

<T extends TabAdapter<Emitter<Listener<Component>>>>

TabComponent factory provides core tab functionality.

Methods

name	description
activate(): void	adds active modificator to tabs__tab
deactivate(): void	removes active class from tab, if present
isActive(): boolean	returns true if active class present
destroy(): void;	clean up routine to be called upon deleting
	component

TabAdapter

<T extends Emitter<Listener<Component>>>

TabAdapter factory provides default adapter functionality one can override partially or completely, used by TabComponent.

Methods

name	description
handleClick(): void	handles click, emits strings.TAB_CLICKED_EVENT
getAttr(name: string)	get value of the attribute name of the tab
: string
hasClass(name: string)	returns if tab has class `name`
: boolean
addClass(name: string)	adds class `name` to the element tab
: void
removeClass(name: string)	removes class `name` from the element tab
: void