Einführung von Shoelace, eine von Framework-unabhängige Komponenten-basierte UX-Bibliothek

In diesem Artikel wird Shoelace eingeführt, eine von Cory Laviska erstellte Komponentenbibliothek, ist jedoch einzigartig. Es definiert alle Standard -UX -Komponenten: Tags, modale Felder, Akkordeon, automatische Vervollständigung und mehr. Diese Komponenten sind nicht in die Box, schön, einfach zu bedienen und vollständig anpassbar. Es erstellt diese Komponenten jedoch nicht mit Frameworks wie React, Solid oder Sufle, sondern verwendet Webkomponenten. Vorbereitung

Webkomponenten sind großartig, aber derzeit gibt es einige kleinere Probleme, auf die man sich beachten muss.

reagieren

Ich habe zuvor gesagt, dass sie in einem JavaScript -Framework verwendet werden können, aber ich habe auch vor der Unterstützung des React für Webkomponenten geschrieben, der derzeit schlecht ist. Um dieses Problem zu lösen, erstellte Shoelace Wrapper speziell für React.

Eine andere Option, die ich persönlich bevorzugt, besteht darin, eine leichte Reaktionskomponente zu erstellen, die den Tag -Namen und alle Eigenschaften der Webkomponente akzeptiert und dann mit den Mängeln von React umgeht. Ich habe diese Option in einem früheren Beitrag besprochen. Ich mag dieses Schema, weil es so konzipiert ist, dass es entfernt werden soll. Der experimentelle Zweig von React hat das Problem der Interoperabilität der Webkomponente gelöst. Nachdem die verwendete leichte Interoperabilitätskomponente für leichte Webkomponenten nach der Veröffentlichung gesucht und entfernt werden kann, bleibt die direkte Nutzung der direkten Webkomponenten ohne React -Verpackungen zurück.

serverseitiges Rendering (SSR)

ist zum Zeitpunkt dieser Schrift auch die Unterstützung für SSR schlecht. Theoretisch gibt es eine Technik, die als deklarativer Schattendom (DSD) bezeichnet wird und SSR implementieren kann. Der Browser -Support ist jedoch begrenzt, und DSD erfordert tatsächlich die ordnungsgemäße

Server -Unterstützung, was bedeutet, dass als nächstes, Remix oder ein anderes Tool, das Sie auf dem Server verwenden, eine spezielle Verarbeitungsleistung benötigt.

dh es gibt andere Möglichkeiten, Webkomponenten "ordnungsgemäß" mit Webanwendungen zu erstellen, die Tools wie als nächstes für SSR verwenden. Kurz gesagt, ein Skript, das Webkomponenten registriert, muss in einem Blockierungsskript ausgeführt werden, bevor das Tag analysiert wird. Dies wird jedoch Gegenstand eines anderen Beitrags sein.

Wenn Sie eine Art von Kunden -Rendering -Spa erstellen, ist dies natürlich kein Problem. Das werden wir in diesem Beitrag verwenden.

starten

Da dieser Beitrag möchte, dass sich dieser Beitrag auf das Schnell und seine Webkomponentenfunktionen konzentriert, werde ich Selte für alles verwenden. Ich werde dieses Stackblitz -Projekt auch zur Demonstration verwenden. Wir werden diese Demo Schritt für Schritt zusammen erstellen, aber Sie können die Wiederholung jederzeit öffnen, um das Endergebnis zu sehen.

Ich werde Ihnen zeigen, wie Sie Shoelace verwenden und vor allem, wie Sie es anpassen. Wir werden Shadow Dom diskutieren und welche externen Stile sie blockieren (und welche Stile nicht blockiert sind). Wir werden auch den

CSS -Selektor diskutieren - der für Sie möglicherweise brandneu sein kann - sogar sehen, wie Shoelace es uns ermöglicht, die verschiedenen Animationen zu überschreiben und anzupassen.

Wenn Sie nach dem Lesen dieses Artikels den Schnürsenkel genießen und ihn in Ihrem React -Projekt ausprobieren möchten, ist mein Vorschlag, den in meiner Einführung erwähnten Wrapper zu verwenden. Auf diese Weise können Sie eine beliebige Komponente des Shoelace verwenden und können sie vollständig entfernen, sobald React die Webkomponenten -Fix, die sie bereits haben (finden Sie in Version 19).

Shoelace Einführung

Shoelace hat recht detaillierte Installationsanweisungen. Am einfachsten ist es, die <script></script> und <link> -Tags zu Ihrem HTML -Dokument hinzuzufügen, und das war's. Für jede Produktionsanwendung möchten Sie jedoch möglicherweise nur selektiv das importieren, was Sie wollen, und es gibt auch Anweisungen entsprechend.

Erstellen wir nach der Installation von Shoelace eine schlechte Komponente, um Inhalte zu rendern, und gehen Sie dann die Schritte der vollständigen Anpassung durch. Um einige komplexere Inhalte auszuwählen, habe ich die Tags und Dialoge (oft als modal genannte Kästchen genannt) Komponenten verwendet. Hier sind einige Tags, die hauptsächlich aus der Dokumentation stammen:

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Dies wird einige schöne und gestaltete Etiketten präsentieren. Der Unterstrich des Aktivitäts -Tags animiert sogar gut und gleitet von einem Aktivitäts -Tag zum nächsten.

Ich werde Ihre Zeit nicht verschwenden, um jede API ausführlich zu beschreiben, die auf der Shoelace -Website ausführlich dokumentiert wurde. Schauen wir uns stattdessen an, wie diese Webkomponenten am besten interagieren und vollständig anpassen können.

Interagieren Sie mit API: Methoden und Ereignisse

Aufrufmethoden und Abonnementereignisse in Webkomponenten können sich geringfügig vom normalen Framework unterscheiden, an das Sie gewöhnt sind, dies ist jedoch nicht zu kompliziert. Mal sehen, wie es geht.

Tags

Die

Tag -Komponente (<sl-tab-group></sl-tab-group>) hat eine show -Methode, mit der ein bestimmtes Tag manuell angezeigt wird. Um es zu nennen, müssen wir auf das zugrunde liegende DOM -Element des Tags zugreifen. In Selte bedeutet dies, bind:this zu verwenden. In React wird es ein Schiedsrichter sein. usw. Da wir Svelte verwenden, deklarieren wir eine Tag -Instanzvariable:

let tabs;

… und binden Sie es:

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

Jetzt können wir eine Schaltfläche hinzufügen, um sie anzurufen:

<button on:click="{()"> tabs.show("custom")}>Show custom</button>

Gleiches gilt für die

Ereignisse. Wenn ein neues Tag angezeigt wird, wird ein sl-tab-show -Ereigner ausgelöst. Wir können tabs für unsere addEventListener -Variable verwenden, oder wir können Svels on:event-name Verknüpfung verwenden.

<sl-tab-group bind:this="{tabs}" on:sl-tab-show="{e"> console.log(e)}></sl-tab-group>

Dies funktioniert und protokolliert Ereignisobjekte, wenn verschiedene Tags angezeigt werden.

Normalerweise rendern wir die Tags und lassen den Benutzer zwischen ihm klicken, sodass diese Arbeit normalerweise nicht einmal benötigt wird, aber wenn Sie sie brauchen, ist es da. Lassen Sie uns nun die Dialogkomponenten interaktiv machen.

Dialog

Die Dialogkomponente

(<sl-dialog></sl-dialog>) akzeptiert ein open -Merkmals, das steuert, ob das Dialogfeld ... geöffnet ist. Lassen Sie es uns in unserer schlanken Komponente deklarieren:

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Es hat auch ein sl-hide Ereignis zum Ausblenden des Dialogfelds. Lassen Sie uns unsere open Eigenschaft übergeben und an das verborgene Ereignis binden, damit wir es zurücksetzen können, wenn der Benutzer klickt, um sie außerhalb des Dialoginhalts zu schließen. Fügen wir dieser Schließschaltfläche einen Klick -Handler hinzu, um unsere open -Spertum auf false festzulegen, wodurch auch das Dialogfeld geschlossen wird.

let tabs;

Schließlich schließen wir unsere geöffnete Dialog -Taste an:

<sl-tab-group bind:this="{tabs}"></sl-tab-group>

Das war's. Die Interaktion mit der API der Komponentenbibliothek ist mehr oder weniger direkt. Wenn dieser Artikel dies nur tut, wäre es ziemlich langweilig.

Aber Shoelace - erstellt mit Webkomponenten - bedeutet, dass etwas, insbesondere Stile, etwas anders funktioniert als das, was wir gewohnt sind.

Passen Sie alle Stile an!

Zum Zeitpunkt des Schreibens befindet sich das Shoelace noch in der Beta, und die Schöpfer erwägen, einige Standardstile zu ändern und vielleicht sogar einige Standardstile zu entfernen, damit sie die Stile der Host -Anwendung nicht mehr überschreiben. Die Konzepte, die wir vorstellen werden, sind sowieso relevant, aber wundern Sie sich nicht, wenn einige der von mir erwähnten Schneiderdetails bei der Verwendung unterschiedlich sind.

Der Standardstil von

Shoelac ist gut, aber unsere Webanwendung hat möglicherweise auch ein eigenes Design und hoffe, dass unsere UX -Komponenten ihm übereinstimmen. Lassen Sie uns sehen, wie das in der Welt der Webkomponenten dies geht.

Wir versuchen nicht, irgendetwas zu verbessern. Der Schöpfer von Shoelace ist besser im Design als ich. Stattdessen schauen wir uns nur an, wie Sie Dinge ändern können, damit Sie sich an Ihre eigene Webanwendung anpassen können. Schnelle Ansicht Shadow Dom

Ansehen Sie einen der Tag -Titel in Ihren Devtools;

Unser Tagelement erstellt einen DIV -Container mit

und

Klassen und einem

, während gleichzeitig der Text angezeigt wird, den wir für dieses Tag eingegeben haben. Bitte beachten Sie jedoch, dass es sich innerhalb von .tab Shadow Root .tab--active befindet. Auf diese Weise können Webkomponentenautoren ihren Webkomponenten ihre eigenen Tags hinzufügen und gleichzeitig einen Ort bieten, an dem wir bereitstellen. Auf die tabindex Elemente achten? Dies bedeutet grundsätzlich "Stellen Sie den Benutzer, was der Benutzer zwischen Webkomponenten -Tags in hier " rendert. <slot></slot> Die -Komponente erstellt also eine Schattenwurzel und fügt ihm etwas hinzu, um einen schönen Etikettentitel sowie einen Platzhalter (

) zu rendern, wo es unseren Inhalt rendert.

<sl-tab></sl-tab> Verpackungsstil <slot></slot>

Ein klassisches und frustrierenderes Problem in der Webentwicklung war schon immer Style Cascading, wo wir nicht wollen, dass sie erscheinen. Möglicherweise befürchten Sie, dass alle Stilregeln in der Anwendung, die etwas wie

angeben, diese Tags beeinträchtigen. Es stellt sich heraus, dass dies kein Problem ist. Der Stil außerhalb der Schattenwurzel wirkt sich nicht auf das aus, was sich innerhalb der Schattenwurzel befindet (mit einigen Ausnahmen, die wir später diskutieren werden) und umgekehrt.

Ausnahme davon ist ein vererbbarer Stil. Natürlich müssen Sie nicht für jedes Element in Ihrer Webanwendung font-family Stile anwenden. Stattdessen können Sie Ihr letztes Mal :root oder html angeben und alles darunter erben lassen. Diese Vererbung wird tatsächlich die Schattenwurzel durchdringen. font-family

CSS -benutzerdefinierte Eigenschaften (üblicherweise als "CSS -Variablen" bezeichnet) sind eine damit verbundene Ausnahme. Shadow Root kann definitiv CSS -Eigenschaften lesen, die außerhalb der Schattenwurzel definiert sind.

selector ::part

Was ist mit den Stilen, die nicht geerbt werden? Wenn wir etwas in der Schattenwurzel anpassen möchten (z. B.

, das nicht erbt), dann haben wir Pech? Es stellt sich heraus, dass wir es nicht getan haben. Schauen Sie sich das obige Etikettelementbild und seine Schattenwurzel erneut an. Achten Sie auf das -attribut auf der Div? Auf diese Weise können Sie das Element außerhalb der Schattenwurzel mithilfe des -Auskurs befinden und stylen. Wir werden Schritt für Schritt einen Beispiel einführen. cursor part Überschreiben Sie den Schnellstil ::part

Lassen Sie uns die praktische Anwendung dieser Methoden sehen. Ab sofort erhalten viele Schnürsenkelstile (einschließlich Schriftarten) Standardwerte von CSS -benutzerdefinierten Eigenschaften. Um diese Schriftarten auf den Stil der Anwendung auszurichten, überschreiben Sie die entsprechenden benutzerdefinierten Eigenschaften. Sehen Sie sich die Dokumentation an, für die CSS -Variablen Schneiderung verwendet werden, oder Sie können einfach die Stile in einem bestimmten Element in Devtools überprüfen.

Erben Stile durch Shadow Root

Öffnen Sie die Datei app.css im SRC -Verzeichnis des Stackblitz -Projekts. Im Abschnitt unten sollten Sie eine

-Anweisung sehen. Da das Attribut

vererbt ist, sollten Sie einen neuen Wert wie

festlegen. Nach dem Speichern werden alle Inhalte (einschließlich des in Shadow Root definierten Tag -Titels) entsprechend eingestellt.

:root Überschreibe CSS -Variablen letter-spacing: normal; überschreiben Die letter-spacing 2px -Komponente liest eine

CSS -benutzerdefinierte Eigenschaft für Unterstriche von aktiven Tags. Wir können einige grundlegende CSS verwenden, um es zu überschreiben:

Das ist es, wir haben jetzt den grünen Indikator! <sl-tab-group></sl-tab-group> --indicator-color Anfrage -Teile

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

In der Shoelace-Version verwende ich derzeit (2.0.0-beta.83), in jedem nicht behinderten Tag einen Zeigercursor. Wechseln Sie es in den Standard -Cursor für das aktive (ausgewählte) Tag. Wir haben gesehen, wie das

Element ein

-Merkmal auf dem Container des Tag -Titels hinzugefügt wird. Zusätzlich empfängt das aktuell ausgewählte Tag ein

Attribut. Verwenden wir diese Fakten, um das aktive Tag zu lokalisieren und den Cursor zu ändern:

<sl-tab></sl-tab> Das ist es! part="base"

benutzerdefinierte Animation

Um den Kuchen zu verleihen, sehen wir sehen, wie Schnürsenkel Animationen anpassen können. Shoelace verwendet die Webanimationen -API und enthüllt eine setDefaultAnimation -API, um zu kontrollieren, wie unterschiedliche Elemente ihre verschiedenen Interaktionen animieren. Weitere Informationen finden Sie in der Dokumentation. Weitere Informationen finden Sie beispielsweise hier, wie Sie die Standarddialoganimation von Shoelace von der Ausdehnung und Schrumpfung nach innen in die Top -Animation ändern und nach unten bewegt werden, wenn sie versteckt sind.

<sl-tab-group>
  <sl-tab panel="general" slot="nav">General</sl-tab>
  <sl-tab panel="custom" slot="nav">Custom</sl-tab>
  <sl-tab panel="advanced" slot="nav">Advanced</sl-tab>
  <sl-tab disabled panel="disabled" slot="nav">Disabled</sl-tab>
  <sl-tab-panel name="general">This is the general tab panel.</sl-tab-panel>
  <sl-tab-panel name="custom">This is the custom tab panel.</sl-tab-panel>
  <sl-tab-panel name="advanced">This is the advanced tab panel.</sl-tab-panel>
  <sl-tab-panel name="disabled">This is a disabled tab panel.</sl-tab-panel>
</sl-tab-group>
<sl-dialog label="Dialog" no-header="">
  Hello World!
  <sl-button> open = false}>Close</sl-button>
</sl-dialog>
<br><br>
<button> open = true}>Open Dialog</button>

Dieser Code befindet sich in der App.selte -Datei. Kommentieren Sie es, um die ursprüngliche Standardanimation anzuzeigen.

Zusammenfassung

Shoelace ist eine sehr ehrgeizige Komponentenbibliothek, die mit Webkomponenten erstellt wurde. Da Webkomponenten rahmenfrei sind, können sie mit jedem Framework für jedes Projekt verwendet werden. Da neue Frameworks erstaunliche Leistungsfunktionen und Benutzerfreundlichkeit zeigen, ist es attraktiver als je zuvor, qualitativ hochwertige Benutzererfahrungskomponenten zu verwenden.

Das obige ist der detaillierte Inhalt vonEinführung von Shoelace, eine von Framework-unabhängige Komponenten-basierte UX-Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!