SM Web Components

UI components based on custom elements API.

Get started

Overview

These components are based on HTML5 custom elements API.
It uses 'sm' namespace for all components. So every component tag starts with 'sm-'.

They can replace some older UI elements like <select> <input> <checkbox> <button> But also more modern additions like popups(modals), tabs and many more.

Some of the components have some cool tricks under their sleeves like custom events and variantions. They allow developers to access more information about component or simply react to whatever state change happen to them. We will go more in-depth about all the variantions and customs events related to each event as we go further.

Quick Start

To start using SM Components

  1. Download components.js from Github.
  2. Add file to bottom of your HTML file just before closing </body> tag with <script>tag.

Now you are ready to use them in your HTML markup as any other standard HMTL tags 😄.

Buttons

Buttons are used in various basic UI interactions to perform an action.

primary default outlined no-outline disabled 

<sm-button variant="primary">primary</sm-button>
<sm-button>default</sm-button>
<sm-button variant="outlined">outlined</sm-button>
<sm-button variant="no-outline">no-outline</sm-button>
<sm-button variant="primary" disabled="true">disabled</sm-button>

Carousel

To start using SM Components

Checkbox

To start using SM Components

Input

To start using SM Components

Notifications

To start using SM Components

Example

push success notification push error notification push notification

Popup(Modal)

Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.

idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
idhfioushdfiuh
 show popup

Switch

To start using SM Components

Select

<sm-select> is very similar to starndatd HTML5 select and it's markup stucture is also identical.

option1 option2 something option3

Strip-select

To start using SM Components

option1 option1 option1 option1 option1 option1 option1

Tabs

To start using SM Components

inbox gjdhnsrfijbgn
bdfjnbj sent jadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhb draft Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam id, molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam corrupti? spam Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius accusamus consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique odio optio quibusdam.