Package Exports

@nodestrap/element
@nodestrap/element/dist/Element.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nodestrap/element) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

<Element />

A basic building block without any applied stylesheet of nodestrap components.
This is the most generic element for the base of (more) complex components.

Preview

<Element>
    hello world
</Element>

Rendered to: `html <div> hello world </div>`

<Element tag='span' classes={['button', 'awesome']} variantClasses={['big', 'dark']} stateClasses={['hovered']}>
    hello world
</Element>

Rendered to: `html <span class="button awesome big dark hovered"> hello world </span>`

<Element semanticTag={['ul', 'ol']} semanticRole='list'>
    hello world
</Element>
<Element semanticTag={['ul', 'ol']} semanticRole='list' tag='ul'>
    hello world
</Element>
<Element semanticTag={['ul', 'ol']} semanticRole='list' tag='ol'>
    hello world
</Element>
<Element semanticTag={['ul', 'ol']} semanticRole='list' tag='div'>
    hello world
</Element>

Rendered to:

<ul>
    hello world
</ul>
<ul>
    hello world
</ul>
<ol>
    hello world
</ol>
<div role="list">
    hello world
</div>

Features

Dynamic tag name tag='div'.
Smart semantic tag & role.
Access the DOM element via elmRef= (similar to ref=).

Installation

Using npm:

npm i @nodestrap/element

Support Us

If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.

We always maintain our projects as long as we're still alive.

[Make a donation]

@nodestrap/element