list

Description

list block is a list of list__item items

Installation

yarn add @moki.codes/mokui-list

Styles

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

Basic Usage

<ul class="list">
        <li class="list__item"
                enabled list item
        </li>
        <li class="list__item list__item_disabled"
                disabled list item
        </li>
        <li class="list__item list__item_active"
                active list item
        </li>

</ul>

Variables

• --list-item-height:
  • set as the var(--msp-1) * 2

Elements

• item
  • list item

item

item inside list

Modificators

| name | value | description | | ----------------- | ----------------- | ------------------------------------ | | active | | gives list item active state style | | disabled | | gives list item disabled state style | | 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 { List } from "@moki.codes/mokui-tabs";

const listEl = document.querySelector(".list");
const listComponent = Tabs(listEl);

/* when done */
tabsComponent.destroy();

Exports

• List
• ListComponent
• ListAdapter

List

(arg: Element) => ListComponent<ListAdapter<Emitter<Listener<Component<{}>>>>>

List factory is a composition of the ListComponent of TabsAdapter of Emitter of Listener of Component of empty object.

ListComponent

<T extends ListAdapter<Emitter<Listener<Component<{}>>>>>(o: T): ListComponent<T>

ListComponent factory instantiates object which provides core list functionality, using methods provided by the adapter.

Properties

| name | type | description | | ----------------- | ----------------- | ------------------------------------ | | elements | HTMLLIElement[] | stores array of list item nodes | | | | HTMLLIElement list operates on |

Methods

| name | description | | -------------------------------| ------------------------------------------- | | setLiState | set list item at index index to state | | (this: ListComponent, | state where state true represents enabled | | index: number, | which every list item is by default | | state: boolean, | and false represents disabled | | ): void | | | destroy(): void; | clean up routine to be called upon deleting | | | component |

events

| name | event.detail | Description | | -----------------------------| ------------------| ------------------------- | | mokui-list:list-item-clicked | { index: number } | list item clicked |

ListAdapter

<T extends Emitter<Listener<Component<{}>>>>(o: T) => ListAdapter<T>

ListAdapter factory instantiates object which provides default adapter methods, one can override partially or completely, used by ListComponent.

Methods

| name | description | | -------------------------------| ------------------------------------------- | | liHasClass | checks if li at index index has class | | (this: ListAdapter, | name | | index: number, | | | name: string, | | | ): boolean | | | liAddClass | adds class name to the li at index index| | (this: ListAdapter, | | | index: number, | | | name: string, | | | ): void | | | liRemoveClass | removes class name from the li at index | | (this: ListAdapter, | index | | index: number, | | | name: string, | | | ): void | |

classes

| name | value | | --------------------------- | ---------------------------------------------- | | LIST_ITEM_ACTIVE: "string" | "list__item_active" | | LIST_ITEM_DISABLED: "string"| "list__item_disabled" |

strings

| name | value | | --------------------------- | ---------------------------------------------- | | LIST_ITEM_SELECTOR: string | ".list__item" | | LIST_ITEM_CLICKED_EVENT: | "mokui-list:list-item-clicked" | | : string | | | LIST_ITEM_ID_PREFIX: string | "mokui-li-" |