lion
0.17.2
Website · Grundlagen · Leitfäden · Komponenten · Blog
Lion ist eine Reihe hochleistungsfähiger, zugänglicher und flexibler Webkomponenten.!
Sie bieten eine unparteiische White-Label-Ebene, die auf Ihre eigene Komponentenebene erweitert werden kann.
Hohe Leistung: Konzentriert sich auf hervorragende Leistung in allen relevanten Browsern mit einer minimalen Anzahl von Abhängigkeiten.
Zugänglichkeit: Ziel ist die Einhaltung des WCAG 2.2 AA-Standards, um Komponenten zu erstellen, die für jedermann zugänglich sind.
Flexibilität: Bietet Lösungen durch Webkomponenten und JavaScript-Klassen, die für alle Anforderungen verwendet, übernommen und erweitert werden können.
Modern Code: Lion wird als reine ES-Module vertrieben.
Stellt Funktionen/Klassen und Webkomponenten bereit: Stellt eine Funktionalität in der am besten geeigneten Form bereit.
Hinweis: Unsere Demo-Beispiele sehen möglicherweise einfach und nicht sehr stilvoll aus. Das ist Absicht. Sie sind einfach gestaltet, sodass Sie ganz einfach Ihre eigenen Stile hinzufügen können, um sie an Ihr beabsichtigtes Design anzupassen, ohne sich mit Stilen herumschlagen zu müssen, die bereits vorhanden sind.
Entdecken Sie die Lion Guides ▶
npm i @lion/ui
Dies ist der Hauptanwendungsfall für lion . Zum Importieren von Komponentenklassen und Erweitern dieser für die Komponenten Ihres eigenen Designsystems.
import { css } from 'lit';import { LionInput } from '@lion/ui/input.js';class MyInput erweitert LionInput {
static getstyles() {return [ super.styles, css` /* Ihre Stile hier */ `,];
}}customElements.define('my-input', MyInput); Es gibt einige „Systeme“ in Lion, die über eine JavaScript-API verfügen. Beispiele sind localize “, overlays , „ ajax “ usw.
<script type="module">
import { ajax } from '@lion/ui/ajax.js';
ajax.fetch('data.json').then(response => Response.json()).then(data => { // etwas mit den Daten machen});</script>Sie können die Löwenelemente auch direkt verwenden, obwohl dies wahrscheinlich kein häufiger Anwendungsfall ist.
<script type="module"> import '@lion/ui/define/lion-input.js';</script><lion-input name="firstName"></lion-input>
Wenn bei einem der von uns angebotenen Pakete ein Problem auftritt, öffnen Sie bitte ein neues Fehlerproblem. Stellen Sie sicher, dass Sie eine Beschreibung des erwarteten und aktuellen Verhaltens beifügen – das Hinzufügen einer Reproduktion hilft immer.
Wenn Sie eine Idee haben, wie wir uns verbessern könnten, schauen Sie sich bitte unsere Diskussionen an, um zu sehen, ob es ähnliche Ideen oder Funktionswünsche gibt. Wenn keine vorhanden sind, starten Sie bitte Ihre Funktionsanfrage als neues Diskussionsthema. Fügen Sie den Titel [Feature Request] My awesome feature und eine Beschreibung dessen hinzu, was Sie von der Verbesserung erwarten und was der Anwendungsfall ist.
| Name | Version | Beschreibung |
|---|---|---|
| @lion/ui | Satz von Komponenten | |
| @lion/ajax | Eine kleine Hülle um fetch | |
| Singleton-Manager | Ein Singleton-Manager bietet eine Möglichkeit, sicherzustellen, dass eine von mehreren Dateispeicherorten geladene Singleton-Instanz ein Singleton bleibt. Vor allem dann nützlich, wenn zwei Hauptversionen eines Pakets mit einem Singleton verwendet werden. | |
| Babel-Plugin erweitert Dokumente | Ein Plugin, das Importe und Vorlagen entsprechend einer Konfiguration neu schreibt. Dies ermöglicht die Wiederverwendung vorhandener Dokumentation aus Quellpaketen und gleichzeitig die Verwendung Ihres Erweiterungscodes. | |
| Providence-Analyse | Providence ist das „Allsehende Auge“, das durch die Analyse von Code Nutzungsstatistiken generiert. Es misst die Effektivität und Popularität Ihrer Software. Mit nur wenigen Befehlen können Sie die Auswirkungen von (bahnbrechenden) Änderungen messen und so Ihren Release-Prozess stabiler und vorhersehbarer machen. | |
| Dokumente veröffentlichen | Ein Tool, das Ihre Dokumentation kopiert und verarbeitet (in einem Monorepo), damit sie mit Ihrem Paket veröffentlicht/versendet werden kann. | |
| Bemerkung erweitern | Ein Plugin für Remark zur Erweiterung des Markdowns durch Importieren aus Quelldateien. | |
| Rocket-Preset erweitert Lion-Dokumente | Wenn Sie Ihre eigene Lion-Erweiterungsschicht pflegen, möchten Sie höchstwahrscheinlich eine ähnliche Dokumentation pflegen. Das Kopieren und Umschreiben der Markdown-Dateien funktioniert, aber wenn sich etwas ändert, müssen Sie sie erneut kopieren und umschreiben. Um dies automatisch zu tun, können Sie diese Voreinstellung für Rocket verwenden. |
Lion Web Components zielt darauf ab, zukunftssicher zu sein und gut unterstützte, bewährte Technologie zu nutzen. Der von uns gewählte Stack sollte dies widerspiegeln.
lit
npm
Öffnen Sie Webkomponenten
Modernes Web
Mokka
Chai
ESLint
hübscher
ES-Module
Viele, viele Tests
Aus Erfahrung wissen wir, dass die Erstellung hochwertiger, zugänglicher UI-Komponenten schwierig und zeitaufwändig ist: Es sind viele Iterationen, viel Entwicklungszeit und viele Tests erforderlich, um eine generische Komponente zu erhalten, die in jedem Kontext funktioniert, viele Randfälle unterstützt und ist in allen relevanten Screenreadern zugänglich.
Lion ist bestrebt, die schwere Arbeit für Sie zu erledigen. Das bedeutet, dass Sie nur Ihr eigenes Designsystem anwenden müssen: indem Sie Stile bereitstellen, Komponenten konfigurieren und darüber hinaus einen minimalen Satz benutzerdefinierter Logik hinzufügen.
Weitere Informationen finden Sie in unseren Codierungsrichtlinien.
Bitte beachten Sie: Dieses Projekt verwendet Npm Workspaces. Wenn Sie alle Demos lokal ausführen möchten, müssen Sie mindestens npm 7+ herunterladen und alle Abhängigkeiten installieren, indem Sie npm install ausführen.
Lion-Webkomponenten sind nur so gut wie ihre Beiträge. Lesen Sie unseren Beitragsleitfaden und freuen Sie sich, Lion zu erweitern/verbessern. Wir halten Funktionsanfragen geschlossen, solange wir nicht daran arbeiten.
Fühlen Sie sich frei, ein Github-Problem zu erstellen, wenn Sie Feedback oder Fragen haben.
