bausteine/dist/snapshots.jsx

Design System

import { h, render, reactive, html } from "hydro-js";
const propsButton = reactive({
    onclick: () => {
        console.log(1);
    },
    disabled: false,
    autofocus: true,
});
render(html `<button is="bau-button" class="inline-block border p-4" ${propsButton}>
    Test HTML
  </button>`, "#button1");
render(<button is="bau-button" class="inline-block border p-4" onClick={propsButton.onclick} disabled={propsButton.disabled} autofocus={propsButton.autofocus}>
    Test H
  </button>, "#button2");
setTimeout(() => {
    propsButton.disabled.setter(true);
}, 1000);
setTimeout(() => {
    propsButton.disabled.setter(false);
}, 2000);
// --------------------------------------------------------------------------------------
const propsCheckbox = reactive({
    disabled: false,
    checked: false,
});
render(html `<bau-checkbox id="checkbox" ${propsCheckbox}>
    <p class="pl-4">Test label</p>
  </bau-checkbox>`, "#checkbox1");
render(<bau-checkbox id="checkbox2" disabled={propsCheckbox.disabled} checked={propsCheckbox.checked}>
    <p class="pl-4">Test label2</p>
  </bau-checkbox>, "#checkbox2");
setTimeout(() => {
    propsCheckbox.checked.setter(true);
}, 1000);
setTimeout(() => {
    propsCheckbox.checked.setter(false);
}, 2000);
// --------------------------------------------------------------------------------------