State

State

Package@schukai/component-state
Importimport {State} from "@schukai/component-state/source/state.mjs"

Usage

The state control encapsulates a visual, content and actions.


// create element
const state = document.createElement('monster-state');

// insert element into the DOM
document.getElementById('body').appendChild(state);

<monster-state></monster-state>

Slotted

The visual, text and the action of the control can be defined either by the option slot.visual, slot.content and slot.action.


// create element
const state = document.createElement('monster-state');

// insert element into the DOM
document.getElementById('body').appendChild(state);

// Label
state.setOption('slot.content','No results found');


Or by a slot.


            <monster-state>

No results found

</monster-state>

Layout

The state control can be customized to your own needs. For this purpose, the control can be designed via CSS.

The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.


monster-state::part(control) {
    background-color: white;
}

The individual parts and slots are shown in the following picture. Slots are yellow and CSS parts are black and white.