@samuelvernon/button

Ein benutzerdefiniertes HTML-Button-Element als Web Component, das erweiterte Funktionalität bietet, wie z. B. Text, Bildintegration und Event-Handling – alles über HTML-Attribute und einfache JavaScript-Konfiguration steuerbar.

✨ Features

• Einfach per HTML-Tag einbindbar: <sv-button>
• Konfigurierbare Attribute: Text, Bild, Typ, Klassen
• Event-Handling über eine einfache JavaScript-Konfiguration
• Keine Abhängigkeiten erforderlich
• Unterstützung für eigene Wrapper-Klassen und Designs

🚀 Installation

npm install @samuelvernon/button

Oder per CDN:

<script type="module" src="https://unpkg.com/@samuelvernon/button"></script>

🧪 Beispiel

HTML

<sv-button
  id="action-button"
  class="sv-button sv-no-background"
  classWrapper="sv-button-wrapper"
  src="/assets/icon.png"
  text="Click me"
  type="action"
></sv-button>

TypeScript / JavaScript

const handleClick = () => alert('Clicked!');

const btn = document.querySelector('#action-button') as any;

btn.configs = {
  ...btn.configs,
  handleClick,
};

⚙️ Unterstützte Attribute

| Attribut | Beschreibung | |----------------|-----------------------------------------------------------| | text | Textinhalt des Buttons | | src | URL eines Bildes, das im Button angezeigt wird | | type | Button-Typ (frei definierbar, z. B. "action") | | class | Zusätzliche Klassen für den Button selbst | | classWrapper | Klassenname für das Wrapper-Element um den Button |

🧩 JavaScript-Konfiguration

Per JavaScript oder TypeScript kann der Button nachträglich konfigurieren werden. Das wichtigste ist die configs-Eigenschaft, über die z. B. ein handleClick definiert werden kann:

btn.configs = {
  handleClick: () => {
    console.log("Button clicked");
  },
};

📦 Verwendung in Frameworks

Da es sich um eine native Web Component handelt, kann <sv-button> problemlos in Frameworks wie React, Vue, Angular usw. verwenden werden.

🛠 Entwicklung

Dieses Paket ist in TypeScript geschrieben und als ES-Modul exportiert. Weitere Anpassungen und Erweiterungen sind möglich.

📄 Lizenz

MIT

© 2025 Samuel Vernon