🇬🇧 EN

GlassKit Elements

Vollständige Referenz für alle 24 Web Components – entwickelt von Jungherz GmbH. Vanilla JS, Shadow DOM, native Formular-Teilnahme.

v0.8.2 Shadow DOM 24 Komponenten Vanilla JS

Installation

CDN (schnellste Variante)

<!-- 1. GlassKit CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit@1.3/glasskit.min.css"> <!-- 2. GlassKit Elements --> <script src="https://cdn.jsdelivr.net/npm/@jungherz-de/glasskit-elements/dist/glasskit-elements.min.js"></script>

npm

npm install @jungherz-de/glasskit-elements @jungherz-de/glasskit
import '@jungherz-de/glasskit/glasskit.css'; import '@jungherz-de/glasskit-elements';

Selektiver Import

Importieren Sie nur, was Sie benötigen, für kleinere Bundles:

import '@jungherz-de/glasskit-elements/components/glk-button.js'; import '@jungherz-de/glasskit-elements/components/glk-toggle.js';

Theming

Setzen Sie data-theme auf dem <html>-Element. Alle Komponenten synchronisieren sich automatisch über einen gemeinsamen MutationObserver.

<html data-theme="dark"> <!-- or "light" --> <script> // Toggle theme const theme = document.documentElement.getAttribute('data-theme'); document.documentElement.setAttribute('data-theme', theme === 'dark' ? 'light' : 'dark'); </script>

Formular-Integration

Alle Formular-Komponenten nehmen über ElementInternals an nativen Formularen teil.

<form id="settings"> <glk-input name="username" label="Username"></glk-input> <glk-toggle name="notify" label="Notifications" checked></glk-toggle> <glk-button variant="primary" type="submit">Save</glk-button> </form> <script> document.getElementById('settings').addEventListener('submit', (e) => { e.preventDefault(); const data = new FormData(e.target); console.log(Object.fromEntries(data)); // { username: "...", notify: "on" } }); </script>

Inhalts-Komponenten

<glk-title>

Gestaltete Überschrift mit Textschatten.

Page Heading
<glk-title>Page Heading</glk-title>

<glk-badge>

Inline-Status-Badge mit Farbvarianten.

Default Primary Success Error
<glk-badge variant="success">Active</glk-badge>
AttributeTypeValues
variantStringprimary | success | error

<glk-avatar>

Kreisförmiger Avatar mit Initialen oder Bild.

S MD LG
<glk-avatar size="lg">JD</glk-avatar> <glk-avatar src="photo.jpg"></glk-avatar>
AttributeTypeValues
sizeStringsm | (default) | lg
srcStringImage URL

<glk-card>

Inhaltskarte mit Glaseffekt.

Card content here.
<glk-card glow>Highlighted content</glk-card>
AttributeTypeDescription
glowBooleanAdds gradient glow effect

<glk-divider>

<glk-divider></glk-divider>

<glk-status>

Statushinweis mit Nachricht.

<glk-status message="No results found"></glk-status>

Buttons

<glk-button>

Glas-gestalteter Button mit drei Varianten und Größenoptionen.

Primary Secondary Tertiary
<glk-button variant="primary" size="auto">Save</glk-button>
AttributeTypeValues
variantStringprimary | secondary | tertiary
sizeStringsm | md | lg | auto
disabledBooleanDisables the button
typeStringbutton | submit | reset

Events: glk-click

<glk-pill>

Kleiner kreisförmiger Icon-Button (46x46px).

<glk-pill label="Menu"> <svg viewBox="0 0 24 24">...</svg> </glk-pill>
AttributeTypeDescription
labelStringAccessible aria-label
disabledBooleanDisables the button

Formular-Komponenten

Alle Formular-Komponenten unterstützen name, value, disabled und nehmen an der nativen <form>-Übermittlung teil.

<glk-input>

Textfeld mit Label, Hinweis und Fehlerzustand.

<glk-input label="Email" type="email" placeholder="you@example.com" hint="Required" error name="email"></glk-input>
AttributeTypeDescription
labelStringInput label
typeStringtext, email, password, ...
placeholderStringPlaceholder text
hintStringHelper text
errorBooleanError styling
requiredBooleanRequired field

Events: glk-input, glk-change

<glk-textarea>

<glk-textarea label="Message" rows="4"></glk-textarea>

<glk-select>

<glk-select label="Plan" name="plan"> <option value="free">Free</option> <option value="pro">Pro</option> </glk-select>

<glk-toggle>

Schalter-Toggle mit Formular-Teilnahme.

<glk-toggle label="Notifications" name="notify" checked></glk-toggle>
AttributeTypeDescription
labelStringToggle label
checkedBooleanChecked state
disabledBooleanDisabled state

Events: glk-change → { checked: boolean }

<glk-checkbox>

<glk-checkbox label="I agree" name="terms" checked></glk-checkbox>

<glk-radio>

<glk-radio name="plan" label="Free" value="free" checked></glk-radio> <glk-radio name="plan" label="Pro" value="pro"></glk-radio>

<glk-range>

<glk-range label="Volume" min="0" max="100" value="65"></glk-range>
AttributeTypeDescription
minNumberMinimum (default: 0)
maxNumberMaximum (default: 100)
valueNumberCurrent value
stepNumberStep increment

Navigation

<glk-nav> + <glk-pill>

Horizontale Navigationsleiste mit runden Icon-Buttons.

<glk-nav> <glk-pill label="Back"><svg>...</svg></glk-pill> <glk-pill label="Settings"><svg>...</svg></glk-pill> </glk-nav>

<glk-tab-bar> + <glk-tab-item>

Tab-Leiste fuer die Navigation am unteren Bildschirmrand.

<glk-tab-bar> <glk-tab-item label="Home" active><svg>...</svg></glk-tab-item> <glk-tab-item label="Profile" badge="3"><svg>...</svg></glk-tab-item> </glk-tab-bar>
AttributeComponentDescription
labelglk-tab-itemTab label
activeglk-tab-itemActive state
badgeglk-tab-itemBadge count

Events: glk-tab-change → { tab: Element }

Feedback

<glk-progress>

<glk-progress label="Upload" value="75" variant="success"></glk-progress>
AttributeTypeValues
valueNumber0 – 100
variantStringsuccess | error
sizeStringsm | (default) | lg

<glk-modal>

Modaler Dialog mit Titel, Inhalt und Aktions-Buttons.

Modal oeffnen

Sind Sie sicher, dass Sie fortfahren moechten?
<glk-modal title="Confirm" id="my-modal"> <p>Are you sure?</p> <div slot="actions"> <button class="glass-modal__action">Cancel</button> <button class="glass-modal__action glass-modal__action--primary">OK</button> </div> </glk-modal> // Methods document.getElementById('my-modal').show(); document.getElementById('my-modal').close();
AttributeTypeDescription
openBooleanShow/hide
titleStringHeader title

Methods: .show(), .close()   Events: glk-close

<glk-toast>

Automatisch ausblendende Benachrichtigung.

Erfolg Fehler
<glk-toast id="toast"></glk-toast> // Show programmatically document.getElementById('toast').show('Saved!', 'success', 3000);
AttributeTypeValues
variantStringsuccess | error | warning
durationNumberms (default: 3000)

Methods: .show(message, variant, duration), .dismiss()

Container

<glk-accordion> + <glk-accordion-item>

Einklappbare Akkordeon-Abschnitte.

Content for section 1. Content for section 2.
<glk-accordion> <glk-accordion-item title="FAQ" open> Answer here. </glk-accordion-item> </glk-accordion>
AttributeComponentDescription
titleglk-accordion-itemTrigger text
openglk-accordion-itemExpanded state

Events: glk-toggle → { open: boolean }