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!