Added two more components documentation
This commit is contained in:
sairaj mote
parent
91edb9b2ec
commit
26ec54cf4e
BIN
components/assets/ham-menu-closed.png
Normal file
BIN
components/assets/ham-menu-closed.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
BIN
components/assets/ham-menu-open.png
Normal file
BIN
components/assets/ham-menu-open.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
@ -96,7 +96,7 @@ ul {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
grid-template-columns: 11rem 1fr;
|
||||
width: 100%;
|
||||
}
|
||||
.tr:nth-of-type(odd) {
|
||||
@ -414,6 +414,7 @@ code {
|
||||
font-weight: 400;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
code * {
|
||||
@ -565,6 +566,23 @@ strong.important {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.auto-grid-2 {
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 30rem;
|
||||
width: min(16rem, 100%);
|
||||
border-radius: 1rem;
|
||||
justify-self: center;
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
main {
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
2
components/css/main.min.css
vendored
2
components/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -89,7 +89,7 @@ ul{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
grid-template-columns: 12rem 1fr;
|
||||
grid-template-columns: 11rem 1fr;
|
||||
width: 100%;
|
||||
&:nth-of-type(odd){
|
||||
background-color: rgba(var(--text-color), .04);
|
||||
@ -252,8 +252,6 @@ ul{
|
||||
.observe-empty-state:not(:empty) ~ .empty-state{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.icon{
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
@ -360,6 +358,7 @@ code{
|
||||
font-weight: 400;
|
||||
padding: 0.2rem 0.4rem;
|
||||
background: rgba(var(--text-color), .1);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
code *{
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
@ -491,6 +490,22 @@ strong.important{
|
||||
.comp-checkbox__title{
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.auto-grid-2{
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
||||
}
|
||||
.screenshot{
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 30rem;
|
||||
width: min(16rem, 100%);
|
||||
border-radius: 1rem;
|
||||
justify-self: center;
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0, 0.3),
|
||||
0 0 0 0.3rem black;
|
||||
}
|
||||
@media screen and (max-width: 640px){
|
||||
main{
|
||||
grid-template-rows: auto 1fr;
|
||||
|
||||
45
components/dist/carousel.js
vendored
45
components/dist/carousel.js
vendored
@ -23,6 +23,10 @@ smCarousel.innerHTML = `
|
||||
--nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
|
||||
--indicator-top: auto;
|
||||
--indicator-bottom: -1.5rem;
|
||||
--indicator-height: 0.2rem;
|
||||
--indicator-width: 0.4rem;
|
||||
--indicator-border-radius: 0.4rem;
|
||||
--indicators-gap: 0.5rem;
|
||||
--active-indicator-color: var(--accent-color);
|
||||
}
|
||||
.carousel__button{
|
||||
@ -39,7 +43,7 @@ smCarousel.innerHTML = `
|
||||
-webkit-box-shadow: var(--nav-box-shadow);
|
||||
box-shadow: var(--nav-box-shadow);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
z-index: 1;
|
||||
border-radius: 3rem;
|
||||
padding: 0.5rem;
|
||||
@ -96,22 +100,24 @@ button:focus-visible{
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
padding: 0.5rem 0;
|
||||
top: var(--indicator-top);
|
||||
bottom: var(--indicator-bottom);
|
||||
gap: 0.5rem;
|
||||
gap: var(--indicators-gap);
|
||||
width: 100%;
|
||||
}
|
||||
.dot{
|
||||
.indicator{
|
||||
position: relative;
|
||||
padding: 0.2rem;
|
||||
height: var(--indicator-height);
|
||||
width: var(--indicator-width);
|
||||
background: rgba(var(--text-color), 0.3);
|
||||
border-radius: 1rem;
|
||||
border-radius: var(--indicator-border-radius);
|
||||
-webkit-transition: 0.2s;
|
||||
-o-transition: 0.2s;
|
||||
transition: 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dot.active{
|
||||
.indicator.active{
|
||||
-webkit-transform: scale(1.5);
|
||||
-ms-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
@ -133,9 +139,24 @@ slot::slotted(*){
|
||||
.carousel{
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel__button{
|
||||
opacity: 0.8;
|
||||
}
|
||||
:host(:hover) .carousel__button{
|
||||
opacity: 1;
|
||||
}
|
||||
.left,.right{
|
||||
display: none;
|
||||
}
|
||||
.indicators{
|
||||
transition: gap 0.3s;
|
||||
}
|
||||
.indicators:hover{
|
||||
gap: calc(var(--indicators-gap) * 2);
|
||||
}
|
||||
.indicators:hover .indicator{
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
@media (hover: none){
|
||||
::-webkit-scrollbar-track {
|
||||
@ -252,15 +273,15 @@ customElements.define('sm-carousel', class extends HTMLElement {
|
||||
}
|
||||
|
||||
createIndicator(index) {
|
||||
let dot = document.createElement('div')
|
||||
dot.classList.add('dot')
|
||||
dot.dataset.rank = index
|
||||
return dot
|
||||
let indicator = document.createElement('div')
|
||||
indicator.classList.add('indicator')
|
||||
indicator.dataset.rank = index
|
||||
return indicator
|
||||
}
|
||||
|
||||
handleIndicatorClick(e) {
|
||||
if (e.target.closest('.dot')) {
|
||||
const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
|
||||
if (e.target.closest('.indicator')) {
|
||||
const slideNum = parseInt(e.target.closest('.indicator').dataset.rank)
|
||||
if (this.activeSlideNum !== slideNum) {
|
||||
this.showSlide(slideNum)
|
||||
}
|
||||
|
||||
2
components/dist/carousel.min.js
vendored
2
components/dist/carousel.min.js
vendored
File diff suppressed because one or more lines are too long
177
components/dist/menu.js
vendored
177
components/dist/menu.js
vendored
@ -7,11 +7,15 @@ smMenu.innerHTML = `
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
.menu{
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
outline: none;
|
||||
@ -27,16 +31,6 @@ smMenu.innerHTML = `
|
||||
-o-transition: background 0.3s;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
:host{
|
||||
display: -webkit-inline-box;
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
.hide{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
.select{
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
@ -70,42 +64,29 @@ smMenu.innerHTML = `
|
||||
min-width: -webkit-max-content;
|
||||
min-width: -moz-max-content;
|
||||
min-width: max-content;
|
||||
-webkit-transform: translateY(-1rem);
|
||||
-ms-transform: translateY(-1rem);
|
||||
transform: translateY(-1rem);
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
background: rgba(var(--background-color), 1);
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
-o-transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
|
||||
border: solid 1px rgba(var(--text-color), 0.2);
|
||||
border-radius: 0.3rem;
|
||||
z-index: 1;
|
||||
-webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
|
||||
top: 100%;
|
||||
-webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
|
||||
box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
|
||||
bottom: auto;
|
||||
}
|
||||
.moveUp{
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
-webkit-transform: translateY(3rem);
|
||||
-ms-transform: translateY(3rem);
|
||||
transform: translateY(3rem);
|
||||
.hide{
|
||||
display: none;
|
||||
}
|
||||
.moveLeft{
|
||||
left: auto;
|
||||
@media screen and (max-width: 640px){
|
||||
.options{
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
.no-transformations{
|
||||
-webkit-transform: none !important;
|
||||
-ms-transform: none !important;
|
||||
transform: none !important;
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
}
|
||||
}
|
||||
@media (hover: hover){
|
||||
.menu:hover .icon{
|
||||
@ -128,14 +109,23 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
mode: 'open'
|
||||
}).append(smMenu.content.cloneNode(true))
|
||||
|
||||
this.open = false;
|
||||
this.isOpen = false;
|
||||
this.availableOptions
|
||||
this.containerDimensions
|
||||
this.animOptions = {
|
||||
duration: 200,
|
||||
easing: 'ease'
|
||||
}
|
||||
|
||||
this.optionList = this.shadowRoot.querySelector('.options')
|
||||
this.menu = this.shadowRoot.querySelector('.menu')
|
||||
this.icon = this.shadowRoot.querySelector('.icon')
|
||||
|
||||
this.expand = this.expand.bind(this)
|
||||
this.collapse = this.collapse.bind(this)
|
||||
this.toggle = this.toggle.bind(this)
|
||||
this.handleKeyDown = this.handleKeyDown.bind(this)
|
||||
this.handleClickoutSide = this.handleClickoutSide.bind(this)
|
||||
|
||||
}
|
||||
static get observedAttributes() {
|
||||
@ -147,58 +137,64 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
set value(val) {
|
||||
this.setAttribute('value', val)
|
||||
}
|
||||
expand(){
|
||||
if (!this.open) {
|
||||
expand() {
|
||||
if (!this.isOpen) {
|
||||
this.optionList.classList.remove('hide')
|
||||
this.optionList.classList.add('no-transformations')
|
||||
this.open = true
|
||||
this.optionList.animate([
|
||||
{
|
||||
transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
|
||||
opacity: '0'
|
||||
},
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: '1'
|
||||
},
|
||||
], this.animOptions)
|
||||
.onfinish = () => {
|
||||
this.isOpen = true
|
||||
this.icon.classList.add('focused')
|
||||
this.availableOptions.forEach(option => {
|
||||
option.setAttribute('tabindex', '0')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
collapse() {
|
||||
if (this.open) {
|
||||
this.open = false
|
||||
if (this.isOpen) {
|
||||
this.optionList.animate([
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: '1'
|
||||
},
|
||||
{
|
||||
transform: window.innerWidth < 640 ? 'translateY(1.5rem)' : 'translateY(-1rem)',
|
||||
opacity: '0'
|
||||
},
|
||||
], this.animOptions)
|
||||
.onfinish = () => {
|
||||
this.isOpen = false
|
||||
this.icon.classList.remove('focused')
|
||||
this.optionList.classList.add('hide')
|
||||
this.optionList.classList.remove('no-transformations')
|
||||
this.availableOptions.forEach(option => {
|
||||
option.removeAttribute('tabindex')
|
||||
})
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
this.setAttribute('role', 'listbox')
|
||||
const slot = this.shadowRoot.querySelector('.options slot')
|
||||
slot.addEventListener('slotchange', e => {
|
||||
this.availableOptions = slot.assignedElements()
|
||||
this.containerDimensions = this.optionList.getBoundingClientRect()
|
||||
});
|
||||
this.menu.addEventListener('click', e => {
|
||||
if (!this.open) {
|
||||
}
|
||||
toggle() {
|
||||
if (!this.isOpen) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
}
|
||||
})
|
||||
this.menu.addEventListener('keydown', e => {
|
||||
if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
|
||||
}
|
||||
handleKeyDown(e) {
|
||||
// If key is pressed on menu button
|
||||
if (e.target === this) {
|
||||
if (e.code === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
if (e.code === 'Enter' || e.code === 'Space') {
|
||||
else if (e.code === 'Enter' || e.code === 'Space') {
|
||||
e.preventDefault()
|
||||
if (!this.open) {
|
||||
this.expand()
|
||||
} else {
|
||||
this.collapse()
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
})
|
||||
this.optionList.addEventListener('keydown', e => {
|
||||
if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
|
||||
} else { // If mey is pressed over menu options
|
||||
if (e.code === 'ArrowUp') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.previousElementSibling) {
|
||||
document.activeElement.previousElementSibling.focus()
|
||||
@ -206,23 +202,41 @@ customElements.define('sm-menu', class extends HTMLElement {
|
||||
this.availableOptions[this.availableOptions.length - 1].focus()
|
||||
}
|
||||
}
|
||||
if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
|
||||
else if (e.code === 'ArrowDown') {
|
||||
e.preventDefault()
|
||||
if (document.activeElement.nextElementSibling) {
|
||||
document.activeElement.nextElementSibling.focus()
|
||||
} else{
|
||||
} else {
|
||||
this.availableOptions[0].focus()
|
||||
}
|
||||
}
|
||||
})
|
||||
this.optionList.addEventListener('click', e => {
|
||||
this.collapse()
|
||||
})
|
||||
window.addEventListener('mousedown', e => {
|
||||
else if (e.code === 'Enter' || e.code === 'Space') {
|
||||
e.preventDefault()
|
||||
e.target.click()
|
||||
}
|
||||
}
|
||||
}
|
||||
handleClickoutSide(e) {
|
||||
if (!this.contains(e.target) && e.button !== 2) {
|
||||
this.collapse()
|
||||
}
|
||||
})
|
||||
}
|
||||
connectedCallback() {
|
||||
this.setAttribute('role', 'listbox')
|
||||
this.setAttribute('aria-label', 'dropdown menu')
|
||||
const slot = this.shadowRoot.querySelector('.options slot')
|
||||
slot.addEventListener('slotchange', e => {
|
||||
this.availableOptions = e.target.assignedElements()
|
||||
this.containerDimensions = this.optionList.getBoundingClientRect()
|
||||
});
|
||||
this.addEventListener('click', this.toggle)
|
||||
this.addEventListener('keydown', this.handleKeyDown)
|
||||
document.addEventListener('mousedown', this.handleClickoutSide)
|
||||
}
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener('click', this.toggle)
|
||||
this.removeEventListener('keydown', this.handleKeyDown)
|
||||
document.removeEventListener('mousedown', this.handleClickoutSide)
|
||||
}
|
||||
})
|
||||
|
||||
@ -262,7 +276,10 @@ menuOption.innerHTML = `
|
||||
outline: none;
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
@media (hover: hover){
|
||||
@media (any-hover: hover){
|
||||
:host{
|
||||
--padding: 0.8rem 1.6rem;
|
||||
}
|
||||
.option:hover{
|
||||
background: rgba(var(--text-color), 0.1);
|
||||
}
|
||||
|
||||
2
components/dist/menu.min.js
vendored
2
components/dist/menu.min.js
vendored
File diff suppressed because one or more lines are too long
6
components/dist/tabs.js
vendored
6
components/dist/tabs.js
vendored
@ -14,6 +14,7 @@ smTabHeader.innerHTML = `
|
||||
--accent-color: #4d2588;
|
||||
--text-color: 17, 17, 17;
|
||||
--background-color: 255, 255, 255;
|
||||
--tab-indicator-border-radius: 0.3rem;
|
||||
}
|
||||
.tabs{
|
||||
position: relative;
|
||||
@ -50,10 +51,7 @@ smTabHeader.innerHTML = `
|
||||
}
|
||||
:host([variant="tab"]) .indicator{
|
||||
height: 100%;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
:host(.round) .indicator{
|
||||
border-radius: 3rem;
|
||||
border-radius: var(--tab-indicator-border-radius);
|
||||
}
|
||||
:host([variant="tab"]) .tab-header{
|
||||
border-bottom: none;
|
||||
|
||||
2
components/dist/tabs.min.js
vendored
2
components/dist/tabs.min.js
vendored
File diff suppressed because one or more lines are too long
2
components/dist/text-field.js
vendored
2
components/dist/text-field.js
vendored
@ -115,7 +115,7 @@ customElements.define('text-field', class extends HTMLElement{
|
||||
this.removeAttribute('disabled')
|
||||
}
|
||||
fireEvent(value){
|
||||
let event = new CustomEvent('contentchanged', {
|
||||
let event = new CustomEvent('change', {
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
composed: true,
|
||||
|
||||
2
components/dist/text-field.min.js
vendored
2
components/dist/text-field.min.js
vendored
File diff suppressed because one or more lines are too long
2
components/dist/theme-toggle.js
vendored
2
components/dist/theme-toggle.js
vendored
@ -99,11 +99,13 @@ class ThemeToggle extends HTMLElement {
|
||||
daylight() {
|
||||
this.hasTheme = 'light'
|
||||
document.body.dataset.theme = 'light'
|
||||
this.setAttribute('aria-checked', 'false')
|
||||
}
|
||||
|
||||
nightlight() {
|
||||
this.hasTheme = 'dark'
|
||||
document.body.dataset.theme = 'dark'
|
||||
this.setAttribute('aria-checked', 'true')
|
||||
}
|
||||
|
||||
toggleState() {
|
||||
|
||||
2
components/dist/theme-toggle.min.js
vendored
2
components/dist/theme-toggle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -21,7 +21,8 @@
|
||||
</audio>
|
||||
<main>
|
||||
<header id="main_header" class="flex align-center space-between">
|
||||
<button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()">
|
||||
<button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()"
|
||||
aria-label="Hamburger menu toggle button">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z" />
|
||||
@ -284,7 +285,9 @@
|
||||
</sm-carousel>
|
||||
<pre>
|
||||
<code>
|
||||
<sm-carousel align-items="start" indicator> ...carousel items... </sm-carousel>
|
||||
<sm-carousel align-items="start" indicator>
|
||||
<!-- carousel items -->
|
||||
</sm-carousel>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Custom attributes</h2>
|
||||
@ -459,6 +462,16 @@
|
||||
<code>
|
||||
<sm-copy value="copy this message"></sm-copy>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<sm-copy id="text_to_copy" value="sample text"></sm-copy>
|
||||
<script>
|
||||
const textToCopy = document.getElementById('text_to_copy')
|
||||
textToCopy.value = 'Different value'; /* Setting value to be copied */
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Attributes</h2>
|
||||
<section class="table">
|
||||
@ -493,17 +506,19 @@
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<sm-copy id="text_to_copy" value="sample text"></sm-copy>
|
||||
<script>
|
||||
const textToCopy = document.getElementById('text_to_copy')
|
||||
textToCopy.value = 'Different value'; /* Setting value to be copied */
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<h2>Supported events</h2>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
<h4 class="table__heading">Event</h4>
|
||||
<h4 class="table__heading">Description</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">copy</span></div>
|
||||
<p>
|
||||
Fired when text is copied by user.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section id="file_input_page" class="page hide-completely">
|
||||
@ -581,14 +596,61 @@
|
||||
</div>
|
||||
</section>
|
||||
<h2>Nested element behaviour</h2>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
<h4 class="table__heading">Element</h4>
|
||||
<h4 class="table__heading">behaviour</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div>
|
||||
sm-button
|
||||
<span class="highlight">variant="primary"</span>
|
||||
or
|
||||
<span class="highlight">type="submit"</span>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event. <br>
|
||||
This will also change state depending opon validation conditions.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div>
|
||||
sm-button
|
||||
<span class="highlight">type="reset"</span>
|
||||
</div>
|
||||
<p>
|
||||
When clicked, the whole form will reset.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="hamburger_menu_page" class="page hide-completely">
|
||||
<h1 class="page__title">Hamburger menu</h1>
|
||||
<hamburger-menu>
|
||||
</hamburger-menu>
|
||||
<section class="grid auto-grid-2 gap-3">
|
||||
<div class="grid gap-1">
|
||||
<img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed">
|
||||
<h4>Hamburger menu closed</h4>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened">
|
||||
<h4>Hamburger menu open</h4>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<hamburger-menu id="navigation_drawer">
|
||||
<!-- Navigation links -->
|
||||
</hamburger-menu>
|
||||
<script>
|
||||
const navigationDrawer = document.getElementById('navigation_drawer')
|
||||
const navigationDrawerButton = document.getElementById('navigation_drawer_button')
|
||||
navigationDrawerButton.addEventListner('click', e => {
|
||||
navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<section id="input_page" class="page hide-completely">
|
||||
<h1 class="page__title">Input</h1>
|
||||
@ -631,6 +693,50 @@
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Styling</h2>
|
||||
<p>CSS variables used to style this component</p>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
<h4 class="table__heading">Variable</h4>
|
||||
<h4 class="table__heading">Description</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--background</span></div>
|
||||
<p>
|
||||
Defines background property of input. Any valid CSS background values are supported.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--border-radius</div>
|
||||
<p>
|
||||
Sets border-radius of input.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--icon-gap</div>
|
||||
<p>
|
||||
Sets space between input icon and input box. Default is "0.5rem"
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--font-size</div>
|
||||
<p>
|
||||
Sets font size of input text. Default is "1rem".
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--padding</div>
|
||||
<p>
|
||||
Sets padding around whole input box including icon.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">--width</div>
|
||||
<p>
|
||||
Sets width of input box.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Supported functions</h2>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
@ -1084,6 +1190,22 @@
|
||||
<sm-option value="3">option3</sm-option>
|
||||
</sm-select>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>States</h2>
|
||||
<h4>Disabled</h4>
|
||||
@ -1096,9 +1218,7 @@
|
||||
<pre>
|
||||
<code>
|
||||
<sm-select disabled>
|
||||
<sm-option value="1">option1</sm-option>
|
||||
<sm-option value="2">option2</sm-option>
|
||||
<sm-option value="3">option3</sm-option>
|
||||
<!-- Options -->
|
||||
</sm-select>
|
||||
</code>
|
||||
</pre>
|
||||
@ -1119,22 +1239,6 @@
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre>
|
||||
</section>
|
||||
<section id="spinner_page" class="page hide-completely">
|
||||
<h1 class="page__title">Spinner</h1>
|
||||
@ -1268,7 +1372,7 @@
|
||||
<h4 class="table__heading">Description</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">multiline</span>( Boolean )</div>
|
||||
<div><span class="highlight">multiline</span> ( Boolean )</div>
|
||||
<p>
|
||||
If present, options will wrap around instead of overflowing horizontally.
|
||||
</p>
|
||||
@ -1384,7 +1488,8 @@
|
||||
<div class="tr">
|
||||
<div><span class="highlight">target</span> ( string )</div>
|
||||
<p>
|
||||
Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.
|
||||
Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header
|
||||
communicates with sm-tab-panel on which tab or panel should be displayed.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
@ -1651,9 +1756,57 @@
|
||||
<section id="text_field_page" class="page hide-completely">
|
||||
<h1 class="page__title">Text field</h1>
|
||||
<p>
|
||||
To start using SM Components
|
||||
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.
|
||||
</p>
|
||||
<text-field value="Double click me!"></text-field>
|
||||
<h2>Interactive demo</h2>
|
||||
<text-field value="John doe"></text-field>
|
||||
<h2>Usage</h2>
|
||||
<pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre>
|
||||
<h2>Custom attributes</h2>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
<h4 class="table__heading">Attribute</h4>
|
||||
<h4 class="table__heading">Description</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">disabled</span> ( Boolean )</div>
|
||||
<p>
|
||||
If present, text can't be edited.
|
||||
</p>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">value</span> ( string )</div>
|
||||
<p>
|
||||
Set initial text that can be edited by user.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<h2>Supported events</h2>
|
||||
<section class="table">
|
||||
<div class="tr">
|
||||
<h4 class="table__heading">Event</h4>
|
||||
<h4 class="table__heading">Description</h4>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div><span class="highlight">change</span></div>
|
||||
<p>
|
||||
Fired when text changes are saved by user.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="theme_toggle_page" class="page hide-completely">
|
||||
<h1 class="page__title">Theme toggle</h1>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SM Components</title><link rel="stylesheet" href="css/main.min.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"></head><body class="hide-completely"><sm-notifications id="notification_drawer"></sm-notifications><audio id="notification_sound"><source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg"><source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg"></audio><main><header id="main_header" class="flex align-center space-between"><button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></svg></button><h4>SM Components</h4><theme-toggle></theme-toggle></header><hamburger-menu id="side_nav"><h4>Getting Started</h4><ul class="list"><li><a href="#overview_page" class="list__item list__item--active interact">Overview</a></li><li><a href="#quick_start_page" class="list__item interact">Quick start</a></li><li><a href="#global_styling_page" class="list__item interact">Global styling</a></li></ul><h4>Components</h4><ul id="components_list" class="list"></ul></hamburger-menu><section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section><article class="right language-html"><section id="overview_page" class="page"><div><h5 class="color-0-8 weight-500">Total components</h5><h1 id="total_components_count" class="h1"></h1></div><div><h1 class="page__title">Overview</h1><p>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.</p><p>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.</p><h3>Features</h3><ul class="grid gap-1"><li>Native and Cross framework support</li><li>Encapsulated style and functionality</li><li>Easy styling</li><li>Adaptive scaling</li></ul></div></section><section id="quick_start_page" class="page hide-completely"><h1 class="page__title">Quick Start</h1><ol><li>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.</li><li>Now you can download or copy the source code for selected components. <strong class="important">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.</strong></li><li>Link the downloaded js before <span class="highlight"></body></span><pre>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SM Components</title><link rel="stylesheet" href="css/main.min.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"></head><body class="hide-completely"><sm-notifications id="notification_drawer"></sm-notifications><audio id="notification_sound"><source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg"><source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg"></audio><main><header id="main_header" class="flex align-center space-between"><button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()" aria-label="Hamburger menu toggle button"><svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/></svg></button><h4>SM Components</h4><theme-toggle></theme-toggle></header><hamburger-menu id="side_nav"><h4>Getting Started</h4><ul class="list"><li><a href="#overview_page" class="list__item list__item--active interact">Overview</a></li><li><a href="#quick_start_page" class="list__item interact">Quick start</a></li><li><a href="#global_styling_page" class="list__item interact">Global styling</a></li></ul><h4>Components</h4><ul id="components_list" class="list"></ul></hamburger-menu><section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section><article class="right language-html"><section id="overview_page" class="page"><div><h5 class="color-0-8 weight-500">Total components</h5><h1 id="total_components_count" class="h1"></h1></div><div><h1 class="page__title">Overview</h1><p>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.</p><p>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.</p><h3>Features</h3><ul class="grid gap-1"><li>Native and Cross framework support</li><li>Encapsulated style and functionality</li><li>Easy styling</li><li>Adaptive scaling</li></ul></div></section><section id="quick_start_page" class="page hide-completely"><h1 class="page__title">Quick Start</h1><ol><li>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.</li><li>Now you can download or copy the source code for selected components. <strong class="important">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.</strong></li><li>Link the downloaded js before <span class="highlight"></body></span><pre>
|
||||
<code>
|
||||
<script src=".../components.js"></script>
|
||||
</code>
|
||||
@ -14,7 +14,9 @@
|
||||
</code>
|
||||
</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>Button is disabled by default. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">type</span> (string)</div><p>Has values <span class="highlight">submit</span> <span class="highlight">reset</span><br>Can only used withing<spna class="highlight">sm-form</spna>to submit or reset the form.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--background</span></div><p>Define background of button. accepts all values of CSS background property</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Set curvature at button corners</p></div><div class="tr"><div><span class="highlight">--padding</span></div><p>Specify padding of button</p></div></section></section><section id="carousel_page" class="page hide-completely"><h1 class="page__title">Carousel</h1><p>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.</p><h2>Interactive demo</h2><sm-carousel indicator><div class="card"><h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p></div><div class="card"><h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p></div><div class="card"><h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p></div><div class="card"><h3>Title</h3><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p></div></sm-carousel><pre>
|
||||
<code>
|
||||
<sm-carousel align-items="start" indicator> ...carousel items... </sm-carousel>
|
||||
<sm-carousel align-items="start" indicator>
|
||||
<!-- carousel items -->
|
||||
</sm-carousel>
|
||||
</code>
|
||||
</pre><h2>Custom attributes</h2><p>These attributes cane used to customize carousel behaviour and features</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">align-items</span></div><p>Has values <span class="highlight">start</span> <span class="highlight">center</span> <span class="highlight">end</span> Specifies how carousel items should align. default is <span class="highlight">center</span>.</p></div><div class="tr"><div><span class="highlight">indicator</span> (boolean)</div><p>if added carousel shows dot indicators of carousel items.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--active-indicator-color</span></div><p>Defines background color of active slide indicator</p></div><div class="tr"><div><span class="highlight">--nav-background-color</span></div><p>Defines background color of carousel navigation buttons</p></div><div class="tr"><div><span class="highlight">--nav-box-shadow</span></div><p>Defines box shadow of carousel navigation buttons</p></div><div class="tr"><div><span class="highlight">--nav-icon-fill</span></div><p>Defines fill of arrow icon on carousel navigation buttons</p></div></section></section><section id="checkbox_page" class="page hide-completely"><h1 class="page__title">Checkbox</h1><p><span class="highlight">sm-checkbox</span> supports all the attributes of native HTML5 checkbox</p><strong>linking some HTML element with <span class="highlght">sm-checbox</span> using <span class="highlight">label</span> tag won't work.<br>Add the element inside the opening and closing checkbox tag.</strong><h2>Interactive demo</h2><sm-checkbox id="checkbox"><div style="margin-left:.5rem">Check this box</div></sm-checkbox><h2>States</h2><h4>Checked</h4><p>To make checkbox checked by default add <span class="highlight">checked</span> attribute.</p><sm-checkbox checked><div style="margin-left:.5rem">Checked checkbox</div></sm-checkbox><pre>
|
||||
<code>
|
||||
@ -32,7 +34,7 @@
|
||||
<code>
|
||||
<sm-copy value="copy this message"></sm-copy>
|
||||
</code>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">value</span> ( string )</div><p>Defines content that will be copied when copy button is clicked</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--button-background-color</span></div><p>Defines background color of copy button</p></div><div class="tr"><div><span class="highlight">--button-border-radius</span></div><p>Defines border-radius of copy button</p></div></section><h2>Usage</h2><pre>
|
||||
</pre><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight"><file-input></span> is essentially native <span class="highlight"><input type="file"/> </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><pre>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">value</span> ( string )</div><p>Defines content that will be copied when copy button is clicked</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--button-background-color</span></div><p>Defines background color of copy button</p></div><div class="tr"><div><span class="highlight">--button-border-radius</span></div><p>Defines border-radius of copy button</p></div></section><h2>Supported events</h2><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">copy</span></div><p>Fired when text is copied by user.</p></div></section></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight"><file-input></span> is essentially native <span class="highlight"><input type="file"/> </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><pre>
|
||||
<code>
|
||||
<file-input multiple>Select multiple files</file-input>
|
||||
</code>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight"><sm-form></span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><p></p></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><hamburger-menu></hamburger-menu></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
|
||||
</pre><h2>Attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight"><sm-form></span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><section class="table"><div class="tr"><h4 class="table__heading">Element</h4><h4 class="table__heading">behaviour</h4></div><div class="tr"><div>sm-button <span class="highlight">variant="primary"</span> or <span class="highlight">type="submit"</span></div><p>Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event.<br>This will also change state depending opon validation conditions.</p></div><div class="tr"><div>sm-button <span class="highlight">type="reset"</span></div><p>When clicked, the whole form will reset.</p></div></section></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><section class="grid auto-grid-2 gap-3"><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed"><h4>Hamburger menu closed</h4></div><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened"><h4>Hamburger menu open</h4></div></section><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<hamburger-menu id="navigation_drawer">
|
||||
<!-- Navigation links -->
|
||||
</hamburger-menu>
|
||||
<script>
|
||||
const navigationDrawer = document.getElementById('navigation_drawer')
|
||||
const navigationDrawerButton = document.getElementById('navigation_drawer_button')
|
||||
navigationDrawerButton.addEventListner('click', e => {
|
||||
navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
</pre></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
|
||||
<code>
|
||||
<sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input>
|
||||
</code>
|
||||
@ -52,7 +67,7 @@
|
||||
<code>
|
||||
<sm-input placeholder="Name" variant="outlined" animate></sm-input>
|
||||
</code>
|
||||
</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of input with JS</p></div></section><pre>
|
||||
</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--background</span></div><p>Defines background property of input. Any valid CSS background values are supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Sets border-radius of input.</p></div><div class="tr"><div><span class="highlight">--icon-gap</span></div><p>Sets space between input icon and input box. Default is "0.5rem"</p></div><div class="tr"><div><span class="highlight">--font-size</span></div><p>Sets font size of input text. Default is "1rem".</p></div><div class="tr"><div><span class="highlight">--padding</span></div><p>Sets padding around whole input box including icon.</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Sets width of input box.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of input with JS</p></div></section><pre>
|
||||
<code>
|
||||
<script>
|
||||
/* Setting custom validation function */
|
||||
@ -131,15 +146,7 @@
|
||||
<sm-option value="3">option3</sm-option>
|
||||
</sm-select>
|
||||
</code>
|
||||
</pre><h2>States</h2><h4>Disabled</h4><p>To disable the select add <span class="highlight">disabled</span> attribute.</p><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><pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
|
||||
</pre><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<sm-select id="my_select">
|
||||
<sm-option value="1">option1</sm-option>
|
||||
@ -153,7 +160,13 @@
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
</pre></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
|
||||
</pre><h2>States</h2><h4>Disabled</h4><p>To disable the select add <span class="highlight">disabled</span> attribute.</p><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><pre>
|
||||
<code>
|
||||
<sm-select disabled>
|
||||
<!-- Options -->
|
||||
</sm-select>
|
||||
</code>
|
||||
</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
|
||||
<code>
|
||||
<sm-spinner></sm-spinner>
|
||||
</code>
|
||||
@ -186,7 +199,7 @@
|
||||
<strip-option value="rating">Rating</strip-option>
|
||||
</strip-select>
|
||||
</code>
|
||||
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span>( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
|
||||
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<strip-select id="sort_by">
|
||||
<strip-option value="relevance" selected>Relevance</strip-option>
|
||||
@ -266,7 +279,18 @@
|
||||
})
|
||||
</script>
|
||||
</code>
|
||||
</pre></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>To start using SM Components</p><text-field value="Double click me!"></text-field></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
|
||||
</pre></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>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.</p><h2>Interactive demo</h2><text-field value="John doe"></text-field><h2>Usage</h2><pre>
|
||||
<code>
|
||||
<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>
|
||||
</code>
|
||||
</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">disabled</span> ( Boolean )</div><p>If present, text can't be edited.</p></div><div class="tr"><div><span class="highlight">value</span> ( string )</div><p>Set initial text that can be edited by user.</p></div></section><h2>Supported events</h2><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Fired when text changes are saved by user.</p></div></section></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
|
||||
<code>
|
||||
<theme-toggle></theme-toggle>
|
||||
</code>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user