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>
@@ -14,7 +14,9 @@
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 withingsm-formto 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>
+<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
@@ -32,7 +34,7 @@
<sm-copy value="copy this message"></sm-copy>
-
Attributes
Attribute
Description
value ( string )
Defines content that will be copied when copy button is clicked
Styling
CSS variables used to style this component
Variable
Description
--button-background-color
Defines background color of copy button
--button-border-radius
Defines border-radius of copy button
Usage
+
Usage
<sm-copy id="text_to_copy" value="sample text"></sm-copy>
<script>
@@ -40,11 +42,24 @@
textToCopy.value = 'Different value'; /* Setting value to be copied */
</script>
-
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
+
Attributes
Attribute
Description
value ( string )
Defines content that will be copied when copy button is clicked
Styling
CSS variables used to style this component
Variable
Description
--button-background-color
Defines background color of copy button
--button-border-radius
Defines border-radius of copy button
Supported events
Event
Description
copy
Fired when text is copied by user.
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
LoginSupported functions
Function
Description
reset()
When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.
Nested element behaviour
Input
Interactive demo
+
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
LoginSupported functions
Function
Description
reset()
When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.
Nested element behaviour
Element
behaviour
sm-button variant="primary" or type="submit"
Whenever enter is pressed inside an active sm-input, this will fire click event.
This will also change state depending opon validation conditions.
sm-button type="reset"
When clicked, the whole form will reset.
Input
Interactive demo
<sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input>
@@ -52,7 +67,7 @@
<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.
disabled
Set disabled state to true or false
value
Sets the value of input with JS
+
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.
Styling
CSS variables used to style this component
Variable
Description
--background
Defines background property of input. Any valid CSS background values are supported.
--border-radius
Sets border-radius of input.
--icon-gap
Sets space between input icon and input box. Default is "0.5rem"
--font-size
Sets font size of input text. Default is "1rem".
--padding
Sets padding around whole input box including icon.
--width
Sets width of input box.
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.
disabled
Set disabled state to true or false
value
Sets the value of input with JS
<script>
/* Setting custom validation function */
@@ -131,15 +146,7 @@
<sm-option value="3">option3</sm-option>
</sm-select>
-
States
Disabled
To disable the select add disabled attribute.
option1option2option3
-
-<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
Usage
+
Usage
<sm-select id="my_select">
<sm-option value="1">option1</sm-option>
@@ -153,7 +160,13 @@
})
</script>
-
Spinner
Just drop the sm-spinner in markup where you want to show the spinner
+
States
Disabled
To disable the select add disabled attribute.
option1option2option3
+
+<sm-select disabled>
+ <!-- Options -->
+</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
Spinner
Just drop the sm-spinner in markup where you want to show the spinner
<sm-spinner></sm-spinner>
@@ -186,7 +199,7 @@
<strip-option value="rating">Rating</strip-option>
</strip-select>
-
Custom attributes
Attribute
Description
multiline( Boolean )
If present, options will wrap around instead of overflowing horizontally.
Styling
CSS variables used to style this component
Variable
Description
--gap
Defines space between options. Default is "0.5rem".
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
Usage
+
Custom attributes
Attribute
Description
multiline ( Boolean )
If present, options will wrap around instead of overflowing horizontally.
Styling
CSS variables used to style this component
Variable
Description
--gap
Defines space between options. Default is "0.5rem".
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
Usage
<strip-select id="sort_by">
<strip-option value="relevance" selected>Relevance</strip-option>
@@ -266,7 +279,18 @@
})
</script>
-
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
+
Text field
This component can be used in scenarios where you need to display a name or something that user should be able to edit directly in-place instead of going to other UI element.
Interactive demo
Usage
+
+<text-field id="name_field" value="John doe"></text-field>
+<script>
+ const nameField = document.getElementById('name_field')
+ nameField.addEventListener('change', event => {
+ console.log(event.detail.value) // logs out new value set by user
+ console.log(nameField.value) // Accessing value directly with getter
+ })
+</script>
+
+
Custom attributes
Attribute
Description
disabled ( Boolean )
If present, text can't be edited.
value ( string )
Set initial text that can be edited by user.
Supported events
Event
Description
change
Fired when text changes are saved by user.
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>