simple-components

Javascript web components library.

Button

import { Button } from "/components/js/button.js";

const button = new Button("Button example");

const targetElement = document.querySelector("#button-example");

targetElement.appendChild(button);

SoftButton

import { SoftButton } from "/components/js/softbutton.js";

const button = new SoftButton("Softbutton example");

const targetElement = document.querySelector("#softbutton-example");

targetElement.appendChild(button);

Table

import { Table } from "/components/js/table.js";

const headerData = ["Name", "Email", "Salary"];

const response = await fetch("/data/customers.json");
const bodyData = await response.json();

const targetElement = document.querySelector("#table-example");

const table = new Table(headerData, bodyData);

targetElement.appendChild(table);

Modal

import { Button } from "/components/js/button.js";
import { Table } from "/components/js/table.js";
import { Modal } from "/components/js/modal.js";

const headerData = ["Name", "Email", "Salary"];

const response = await fetch("/data/customers.json");
const bodyData = await response.json();

const button = new Button("Show Modal");
const targetElement = document.querySelector("#modal-example");

targetElement.appendChild(button);

const table = new Table(headerData, bodyData);
const modal = new Modal();

const otherButton = new Button("Button inside modal");

modal.add(table);
modal.add(otherButton);

button.addEventListener("click", () => {
    modal.show();
});

document.body.appendChild(modal);

Tab

import { Table } from "/components/js/table.js";
import { Tab } from "/components/js/tab.js";

const orderHeaderData = ["Id", "Customer Id", "Order Date", "Shipping Date", "State", "Total Amount", "Payment Method"];
const customerHeaderData = ["Name", "Email", "Salary"];
const addressHeaderData = ["Id", "Customer Id", "Name", "Street", "City", "State", "Postal Code", "Country", "Type"];

const orderResponse = await fetch("/data/orders.json");
const orderBodyData = await orderResponse.json();

const customerResponse = await fetch("/data/customers.json");
const customerBodyData = await customerResponse.json();

const addressResponse = await fetch("/data/address.json");
const addressBodyData = await addressResponse.json();

const orderTable = new Table(orderHeaderData, orderBodyData);
const customerTable = new Table(customerHeaderData, customerBodyData);
const addressTable = new Table(addressHeaderData, addressBodyData);

const targetElement = document.querySelector("#tab-example");

const tab = new Tab();

tab.add("Orders", orderTable);
tab.add("Customers", customerTable);
tab.add("Addresses", addressTable);

targetElement.appendChild(tab);

Dropdown

import { Dropdown } from "/components/js/dropdown.js";

const dropdown = new Dropdown(["Option 1", "Option 2", "Option 3"]);
dropdown.setPlaceholder("Select an option");

const targetElement = document.querySelector("#dropdown-example");

targetElement.appendChild(dropdown);

dropdown.addEventListener("change", (e) => {
    console.log(e.target.text);
});

dropdown.set("Option 2");  

Textarea

import { Textarea } from "/components/js/textarea.js";

const textarea = new Textarea();
textarea.setPlaceholder("This is a placeholder");
textarea.setRows(10);

const targetElement = document.querySelector("#textarea-example");

targetElement.appendChild(textarea);

Radiogroup

import { Radiogroup } from "/components/js/radiogroup.js";
import { Button } from "/components/js/button.js";

const radiogroup = new Radiogroup("Which option do you want to choose?");

radiogroup.add("Option 1");
radiogroup.add("Option 2");
radiogroup.add("Option 3");

const targetElement = document.querySelector("#radiogroup-example");

const button = new Button("Save");

targetElement.appendChild(radiogroup);
targetElement.appendChild(button);

button.addEventListener("click", () => {
    console.log(radiogroup.get());
});

Textbox

import { Textbox } from "/components/js/textbox.js";

const textbox = new Textbox();

const targetElement = document.querySelector("#textbox-example");

targetElement.appendChild(textbox);

Slider

import { Slider } from "/components/js/slider.js";

const slider = new Slider("Slider label");

const targetElement = document.querySelector("#slider-example");

targetElement.appendChild(slider);

Label

import { Label } from "/components/js/label.js";

const label = new Label("This is a label text");

document.body.appendChild(label);

Anchor

import { Anchor } from "/components/js/anchor.js";

const anchor = new Anchor("This is an anchor element", "https://www.google.com");

document.body.appendChild(anchor);

CDN

JS

https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/button.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/softbutton.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/dropdown.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/table.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/modal.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/tab.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/textarea.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/radiogroup.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/textbox.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/slider.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/label.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/anchor.js https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/js/carousel.js

CSS

https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/button.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/softbutton.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/dropdown.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/table.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/modal.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/tab.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/textarea.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/radiogroup.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/textbox.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/slider.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/label.css https://cdn.jsdelivr.net/gh/gartenkralle/[email protected]/components/css/anchor.css