- ×
⚡️ A component based library that encourages single-page applications.
Filed under dom › frameworksShow AllFast - Minimal - Easy
https://codepen.io/roecrew/project/editor/AOVjne#0
https://codepen.io/roecrew/project/editor/ZGkKbq
Overview
Zam is a component-based micro-library (around 1.1KB).
Zam objects can be thought of as components. These components generate a specified structure of elements, which are mounted to the DOM.
By confining/compartmentalizing the DOM elements that make up a structure to a Zam component, we create a cleaner coding environment.
##
Basically Zam can build this.
By essentially doing this.
let uiswitch = new UISwitch();
Under the hood, the UISwitch component has a structure similar to the following.
'use strict'; import Zam from './zam.js'; export default class UISwitch extends Zam { constructor() { super( `component-name`, // The name of the custom component `html`, // The HTML for the component elem => {}, // The render function where 'elem' is the component itself. Render is auto called on .append() and .prepend() `css` // The CSS for the component ); } }
Import
Current Stable Build is 12.1.0
import Zam from "https://cdn.jsdelivr.net/npm/zamjs@12.1.0/zam.min.js"
npm install zamjs@12.1.0
Example
example.js
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> <style> body { font-family: sans-serif; } </style> </head> <body> <script type="module"> import Zam from "./zam.js"; import UISwitch from "./uiswitch.js"; let root = new Zam(`root`); let uiswitch = new UISwitch('yellow'); root.append(uiswitch); // or .prepend() document.querySelector('body').appendChild(root); </script> </body> </html>
uiswitch.js
'use strict'; import Zam from './zam.js'; export default class UISwitch extends Zam { constructor(color) { super( `uiswitch`, ` <div class="ui-switch"> <span class="ui-switch-text"> Off </span> <div class="ui-switch-circle"> </div> </div> `, elem => { elem.querySelector('.ui-switch-circle').style.backgroundColor = color elem .querySelector('.ui-switch-circle') .addEventListener('click', function() { let circleStyle = this.style; circleStyle.left === '' ? (circleStyle.left = '45px') : (circleStyle.left = ''); let switchStyle = this.parentNode.style; switchStyle.backgroundColor === '' ? (switchStyle.backgroundColor = 'rgb(76, 218, 99)') : (switchStyle.backgroundColor = ''); let textStyle = this.parentNode.querySelector('.ui-switch-text') .style; textStyle.left === '' ? (textStyle.left = '10px') : (textStyle.left = ''); let textNode = this.parentNode.querySelector('.ui-switch-text'); textNode.innerText === 'Off' ? (textNode.innerText = 'On') : (textNode.innerText = 'Off'); }); }, ` .ui-switch { position: relative; background-color: #d0d2d3; margin: 50px; padding: 10px; width: 60px; height: 20px; border: none; border-radius: 50px; text-align: right; transition: background-color 0.1s ease-out; } .ui-switch-circle { position: absolute; left: 5px; top: 5px; width: 30px; height: 30px; background-color: white; border: 1px solid clear; border-radius: 50px; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 11px 0 rgba(0, 0, 0, 0.08), -1px 3px 3px 0 rgba(0, 0, 0, 0.14); transition: left 0.1s ease-out; cursor: pointer; } .ui-switch-text { position: absolute; background-color: initial; top: 11px; left: 45px; transition: left 0.1s ease-out; } ` ); } }