Total components

Overview

Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability.

Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice.

Features

Native and Cross framework support
Encapsulated style and functionality
Easy styling
Adaptive scaling

Quick Start

To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code.
Now you can download or copy the source code for selected components. You might get a warning while downloading like this file is not safe, please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use.

Link the downloaded js before </body>


<script src=".../components.js"></script>

Get minified

Select all

Clear all

Copy source code

Download JS file

Global styling

These components use CSS variables to customize styling. they share some CSS variables that make global styling easier.
Of course you can set these variables at individual component CSS rule set level.

Some common CSS variables and their use

Variable

Use

--accent-color

Color which will be used for denoting active state

--text-color

default text color for all components.
( Use comma separated rgb values. e.g 17, 17, 17 )

--background-color

default background color for all components.
( Use comma separated rgb values. e.g 255, 255, 255 )

--danger-color

Used for error/invalid state

Buttons

Default button

Variants

These are styled variations of base component

Variant type

Example

primary

Primary

outlined

Outlined

no--outline

No outline

How to define variant


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

States

Disabled

To disable the button add disabled attribute.

Disabled


<sm-button disabled>Disabled</sm-button>

Attributes

All the native HTML checkbox attributes are valid

Attribute

Description

disabled (boolean)

Button is disabled by default. all the interactions are disabled

type (string)

Has values submit reset
Can only used withing sm-form to submit or reset the form.

Styling

CSS variables used to style this component

Variable

Description

--background

Define background of button. accepts all values of CSS background property

--border-radius

Set curvature at button corners

--padding

Specify padding of button

Carousel

Carousel is a very common UI component primarily used to display images or slides. This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on touch enabled devices swipe can be used.

Interactive demo

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.


<sm-carousel align-items="start" indicator> ...carousel items... </sm-carousel>

Custom attributes

These attributes cane used to customize carousel behaviour and features

Attribute

Description

align-items

Has values start center end Specifies how carousel items should align. default is center.

indicator (boolean)

if added carousel shows dot indicators of carousel items.

Styling

CSS variables used to style this component

Variable

Description

--active-indicator-color

Defines background color of active slide indicator

--nav-background-color

Defines background color of carousel navigation buttons

--nav-box-shadow

Defines box shadow of carousel navigation buttons

--nav-icon-fill

Defines fill of arrow icon on carousel navigation buttons

Checkbox

sm-checkbox supports all the attributes of native HTML5 checkbox

linking some HTML element with sm-checbox using label tag won't work.
Add the element inside the opening and closing checkbox tag.

Interactive demo

Check this box

States

Checked

To make checkbox checked by default add checked attribute.

Checked checkbox


<sm-checkbox  checked>
    <div style="margin-left: 0.5rem;">Checked checkbox</div>
</sm-checkbox>

Disabled

To disable the checkbox add disabled attribute.

Disabled checkbox


<sm-checkbox  disabled>
    <div style="margin-left: 0.5rem;">Disabled checkbox</div>
</sm-checkbox>

Attributes

All the native HTML checkbox attributes are valid

Attribute

Description

checked (boolean)

If present, checkbox is set to checked state as default.

disabled (boolean)

If present checkbox is set to disabled state. all the interactions are disabled

value (string)

Sets value of checkbox which can be accessed by value property with JS

Styling

CSS variables used to style this component

Variable

Description

--border-color

Defines color of un-checked checkbox border

--border-radius

Defines border-radius of checkbox square

--height

Defines height of checkbox

--width

Defines width of checkbox

Copy

To start using SM Components

File input

<file-input> is essentially native <input type="file"/> with added style.
So every attribute supported by native file input is supported as can be used in exactly same way.

Interactive demo

Select multiple files


<file-input multiple>Select multiple files</file-input>

Attributes

Attribute

Description

accept

One or more unique file type specifiers describing file types to allow

capture

What source to use for capturing image or video data

files

A FileList listing the chosen files

multiple

A Boolean which, if present, indicates that the user may choose more than one file

Form

Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <sm-form> can be used.

Interactive demo

Login

Supported functions

Function

Description

reset()

When this function is called upon form element. all the form elements (sm- form elements only) will be reset to default state.

Nested element behaviour

Hamburger menu

Input

Interactive demo


<sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input>

Variants

outlined is only one styled variation. Default is filled which doesn't require variant specified.


<sm-input placeholder="Name" variant="outlined" animate></sm-input>

Custom Attributes

All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality

Attribute

Description

animate (boolean)

If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.

error-text (string)

Message specified as value of this attribute will be shown if validation fails.

Supported functions

Function

Description

focusIn()

To give focus to this component use this function instead of focus()

reset()

When this function is called value will be set to empty string.

Custom Setters

Function

Description

customValidation

If you want to perform custom validation on input value, set the desired validation function.


<script>
    /* Setting custom validation function */
    document.getElelementById('my_input').customValidation = myValidation

    function myValidation(inputValue) {
        /* Custom validation logic */
        return Boolean; /* Must return Boolean ( true/ false ) */
    }
</script>

Notifications

To start using notifications add the <sm-notifications> at top level of markup like just below starting <body> tag.

Supported functions

Function

Description

push()

Used to display notifications with two parameters.
Notification text and notification options.

clearAll()

Removes all the notifications present in notification drawer.

Push() options

Property

Description

icon (svg)

To display custom icon with notification icon option can be used.

pinned (Boolean)

If set true notifications won't disappear after some time. they need to be dismissed by user manually.

Interactive demo

push pinned notification


<sm-notifications id="notification_drawer"></sm-notifications>
<script>
    const notificationDrawer = document.getElementById('notification_drawer')
    notificationDrawer.push('This is a notification', { pinned: true })
</script>

Popup / dialog

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

show popup

Radio button

Radio buttons are useful whenever only one option needs to be selected from mutiple options. this functionality can be achieved by assigning same name to the group of radio buttons.
sm-radio supports all the attributes of native HTML5 radio.

linking some HTML element with sm-radio using label tag won't work.
Add the element inside the opening and closing sm-radio tag.

Interactive demo

On

Off

🤷


<sm-radio name="abc" value="on" checked>
    <div class="flex">  On</div>
</sm-radio>
<sm-radio name="abc" value="off">
    <div class="flex">  Off</div>
</sm-radio>
<sm-radio name="abc" value="🤷">
    <div class="flex">  🤷</div>
</sm-radio>

States

Checked

To make switch turned on by default add checked attribute.

Checked radio button


<sm-radio checked>
    <div>On switch</div>
</sm-radio>

Disabled

To disable the radio button add disabled attribute.

Disabled radio button


<sm-radio disabled>
    <div>Disabled switch</div>
</sm-radio>

Attributes

All the native HTML radio attributes are valid

Attribute

Description

checked (boolean)

If present, radio button is set to checked state as default.

disabled (boolean)

If present radio button is set to disabled state. all the interactions are disabled

name (string)

Can be used to group radio buttons with same name. only one radio button will be active in a group.

value (string)

Sets value of radio button which can be accessed by value property with JS

Select

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

Interactive demo

option1

option2

option3


<sm-select>
    <sm-option value="1">option1</sm-option>
    <sm-option value="2">option2</sm-option>
    <sm-option value="3">option3</sm-option>
</sm-select>

States

Disabled

To disable the select add disabled attribute.

option1

option2

option3


<sm-select disabled>
    <sm-option value="1">option1</sm-option>
    <sm-option value="2">option2</sm-option>
    <sm-option value="3">option3</sm-option>
</sm-select>

Supported events

These are the events that will be fired when component state changes

Event

Description

change

Whenever a different options is selected by user the this event is fired.
You can listen to this event and access the current value with event object event.detail.value


<sm-select id="my_select">
    <sm-option value="1">option1</sm-option>
    <sm-option value="2">option2</sm-option>
    <sm-option value="3">option3</sm-option>
</sm-select>   
<script>
    const mySelect = document.getElementById('my_select')
    mySelect.addEventListener('change', event => {
        console.log(event.detail.value) // logs out value of selected option
    })
</script>

Spinner

Just drop the sm-spinner in markup where you want to show the spinner


<sm-spinner></sm-spinner>

Switch

sm-switch supports all the attributes of native HTML5 checkbox

linking some HTML element with sm-switch using label tag won't work.
Add the element inside the opening and closing sm-switch tag.

Interactive demo

Turn the switch

States

Checked

To make switch turned on by default add checked attribute.

On switch


<sm-switch checked>
    <div slot="left">
        On switch
    </div>
</sm-switch>

Disabled

To disable the switch add disabled attribute.

Disabled checkbox


<sm-switch disabled>
    <div slot="left">
        Disabled switch
    </div>
</sm-switch>

Attributes

All the native HTML checkbox attributes are valid

Attribute

Description

checked (boolean)

If present, switch is set to checked state as default.

disabled (boolean)

If present switch is set to disabled state. all the interactions are disabled

value (string)

Sets value of switch which can be accessed by value property with JS

Spinner

Just drop the sm-spinner in markup where you want to show the spinner


<sm-spinner></sm-spinner>

Strip select

To start using SM Components

Movie

TV series

Video

Music

Tabs

To start using SM Components

inbox

sent

draft

spam

gjdhnsrfijbgn
bdfjnbj

jadifjoaijdiajdo dosfighjoi
flkmgklfmzkl
hbdsfhb

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?

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.

Tags input

To start using SM Components

Textarea

To start using SM Components

Text field

To start using SM Components

Theme toggle

Use theme-toggle to create light/dark theme easily with CSS variables.

When this is toggled by user the component changes the custom data attribute data-theme="" on HTML body tag to either light or dark

By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).

Interactive demo

HTML


<theme-toggle></theme-toggle>

CSS


<style>
    body ,
    body *{
        /* Set CSS variables according to light theme or default theme*/
        --accent-color: #0D7377;
        --text-color: 17, 17, 17;
        --background-color: 255, 255, 255;
        --danger-color: red;
    }
    body[data-theme='dark'],
    body[data-theme='dark'] *{
        /* Set CSS variables according to dark theme */
        --accent-color: #32E0C4;
        --text-color: 240, 240, 240;
        --text-color-light: 170, 170, 170;
        --background-color: 10, 10, 10;
        --danger-color: rgb(255, 106, 106);
    }
    body{
        color: rgba(var(--text-color), 1);
        background: rgba(var(--background-color), 1);
    }
</style>

Styling

CSS variables used to style this component

Variable

Description

--height

Defines height of toggle button

--width

Defines width of toggle button

Custom events

These are the events that will be fired when component state changes

Event

Description

themechange

Whenever theme is toggled by user the themechange event is fired.
You can listen to this event and access the current value of toggle with event object event.detail.theme


<theme-toggle id="my_theme_toggle"></theme-toggle>
<script>
    const myThemeToggle = document.getElementById('my_theme_toggle')
    myThemeToggle.addEventListener('themechange', event => {
        console.log(event.detail.theme) // logs out current theme ( light / dark )
    })
</script>

Getting Started

Components

Total components

Overview

Features

Quick Start

Global styling

Some common CSS variables and their use

Variable

Use

Buttons

Variants

Variant type

Example

How to define variant

States

Disabled

Attributes

Attribute

Description

Styling

Variable

Description

Carousel

Interactive demo

Title

Title

Title

Title

Custom attributes

Attribute

Description

Styling

Variable

Description

Checkbox

Interactive demo

States

Checked

Disabled

Attributes

Attribute

Description

Styling

Variable

Description

Copy

File input

Interactive demo

Attributes

Attribute

Description

Form

Interactive demo

Supported functions

Function

Description

Nested element behaviour

Hamburger menu

Input

Interactive demo

Variants

Custom Attributes

Attribute

Description

Supported functions

Function

Description

Custom Setters

Function

Description

Menu

Interactive demo

Custom Attributes

Attribute

Description

Supported events

Event

Description

Notifications