weightless Download - weightless Quellcode -Download

weightless

Komponenten von Drittanbietern

1.0.0

Herunterladen

Dieses Projekt hat das Ende seiner Entwicklung erreicht. Fühlen Sie sich frei, den Code zu durchsuchen.

Hochwertige Webkomponenten mit einem kleinen Fußabdruck
_{Vielen Dank, dass Sie das Interesse an diesem Projekt gezeigt haben! Wenn Sie uns helfen möchten, unser Octocat zu füttern, sollten Sie auf jeden Fall ein Stargazer werden. Diese Webkomponenten sind zur Verwendung erstellt. Sie sind leicht, haben eine einfache API und sind leicht zu erweitern und zu komponieren. Gehen Sie hierher, um eine Demo zu sehen.}

Hochwertig: dreht sich um die Best Practices.
Testbar: Hunderte von Testkasen sorgen dafür, dass die Bibliothek stabil ist.
Einfach zu bedienen: aber mit einer einfachen und verständlichen API.
Zugriff: Alle Komponenten wurden unter Berücksichtigung der Zugänglichkeit erstellt.
Einzelverantwortung: Jede Komponente macht eine Sache wirklich gut. Dies macht sie sehr einfach zu erweitern und zu komponieren.

➤ Inhaltsverzeichnis

➤ Demo
➤ Installation
➤ Elemente
➤ Roadmap
➤ Leitfaden für den Beitrag
➤ Mitwirkende
➤ Lizenz

➤ Demo

Gehen Sie hierher, um die Demo zu probieren.

➤ Installation

 $ npm i weightless

Wenn Sie super schnell beginnen möchten, können Sie die CLI verwenden.

 $ npm init web-config new my-project --lit

Wenn Sie es vorziehen, das umd -Bundle zu verwenden, können Sie https://unpkg.com/weightless/umd/weightless.min.js importieren. Denken Sie daran, dass dies alle Elemente importiert. Daher wird empfohlen, sie nur für Testzwecke zu verwenden.

 < script src =" https://unpkg.com/weightless/umd/weightless.min.js " > </ script >

➤ Elemente

Name	Etikett	Beschreibung	Dokumentation	Demo
Hintergrund	`wl-backdrop`	Dunkle Schicht, die hinter überlagerten Elementen verwendet werden soll.	Dokumentation	Demo
Banner	`wl-banner`	Zeigen Sie eine nicht interpretpive Nachricht und zugehörige optionale Aktionen an.	Dokumentation	Demo
Taste	`wl-button`	Ermöglichen Sie den Benutzern, Aktionen zu ergreifen und Entscheidungen mit einem einzigen Tap zu treffen.	Dokumentation	Demo
Karte	`wl-card`	Gruppenbezogene Inhalte und Aktionen.	Dokumentation	Demo
Kontrollkästchen	`wl-checkbox`	Schalten Sie eine Option ein oder aus.	Dokumentation	Demo
Dialog	`wl-dialog`	Hoch unterbrechungsfähige Nachrichten.	Dokumentation	Demo
Teiler	`wl-divider`	Dünne Linie, die den Inhalt in Listen und Layouts gruppiert.	Dokumentation	Demo
Erweiterung	`wl-expansion`	Geben Sie eine erweiterbare detailsumme Ansicht an.	Dokumentation	Demo
Symbol	`wl-icon`	Symbole für allgemeine Aktionen und Elemente.	Dokumentation	Demo
Etikett	`wl-label`	Formularelemente zugänglicher machen.	Dokumentation	Demo
Listenelement	`wl-list-item`	Zeigen Sie einen Element in einer Liste an.	Dokumentation	Demo
Navigation	`wl-nav`	Bieten Sie Zugriff auf Ziele in Ihrer App.	Dokumentation	Demo
Popover	`wl-popover`	Kontextuelle verankerte Elemente	Dokumentation	Demo
Popover -Karte	`wl-popover-card`	Geben Sie Popovers ein kontextbezogenes Flair.	Dokumentation	Demo
Fortschrittsbalken	`wl-progress-bar`	Füllt eine Stange von 0% bis 100%.	Dokumentation	Demo
Fortschrittspinner	`wl-progress-spinner`	Füllt einen Kreis von 0% bis 100%.	Dokumentation	Demo
Radio	`wl-radio`	Wählen Sie eine Option aus einem Satz aus.	Dokumentation	Demo
Ripple	`wl-ripple`	Berührungsaktionen angeben.	Dokumentation	Demo
Wählen	`wl-select`	Wählen Sie einen oder mehrere Werte aus einer Reihe von Optionen aus.	Dokumentation	Demo
Schieberegler	`wl-slider`	Treffen Sie eine Auswahl aus einem Wertebereich.	Dokumentation	Demo
Snackbar	`wl-snackbar`	Geben Sie am Ende des Bildschirms kurze Nachrichten an.	Dokumentation	Demo
Schalten	`wl-switch`	Schalten Sie eine Option ein oder aus.	Dokumentation	Demo
Tab	`wl-tab`	Organisieren Sie die Navigation zwischen Inhaltsgruppen.	Dokumentation	Demo
Tab -Gruppe	`wl-tab-group`	Organisieren Sie die Navigation zwischen Inhaltsgruppen.	Dokumentation	Demo
Text	`wl-text`	Gruppentext in Absätze.	Dokumentation	Demo
Textbereich	`wl-textarea`	Multiline Textfelder.	Dokumentation	Demo
Textfeld	`wl-textfield`	Einzelstextfelder.	Dokumentation	Demo
Titel	`wl-title`	Geben Sie den Beginn eines neuen Abschnitts an.	Dokumentation	Demo
Tooltip	`wl-tooltip`	Informativer Kontextbezogener Text.	Dokumentation	Demo

➤ Roadmap

Es gibt viele aufregende Dinge auf der Roadmap. Bis V1.0.0 können Sie erwarten, dass die API ziemlich stabil ist, aber die Wiederaufnahme kann immer noch auftreten und die Rückwärtskompatibilität brechen. Sie können die Bibliothek sehr gut verwenden, Pull -Anfragen erstellen oder Probleme hinzufügen.

➤ Leitfaden für den Beitrag

Sie sind mehr als willkommen, um zu diesem Repository beizutragen! Im Folgenden finden Sie einige Anweisungen zum Einrichten des Projekts für die Entwicklung.

Klonen Sie dieses Repository, indem Sie git clone https://github.com/andreasbm/weightless.git ausführen.
Führen Sie npm i aus, um alle Abhängigkeiten zu installieren.
Sprühen Sie den Entwicklungsserver mit npm run s . Der Browser sollte automatisch an der richtigen URL geöffnet werden. Wenn nicht, können Sie Ihren Browser öffnen und zu http://localhost:1350 gehen.
Führen Sie Tests mit npm run test aus.
FININT Die Dateien mit npm run lint .
Kompilieren Sie die Dokumentation, indem Sie npm run docs ausführen.

Die Elemente sind in TypeScript geschrieben und die Stylesheets sind in SASS geschrieben. Alle Webkomponenten verwenden Lit-Element.

Wenn Sie mehr darüber erfahren möchten, wie Sie Ihnen helfen können, sollten Sie auf jeden Fall die Datei bei der Mitarbeitern.md überprüfen. Alle Mitwirkenden werden in den Abschnitt der Mitwirkenden hinzugefügt.