Gestalten von Webkomponenten

Vor einigen Monaten haben wir die Veröffentlichung einer Reihe von Webkomponenten angekündigt, die für die Verwendung mit dem Vonage Client SDK entwickelt wurden. Erstellen Sie eine Konversation, übergeben Sie sie an die Komponenten, und das war's. Jede Komponente kümmert sich um alle ihre Aufgaben, z. B. das Abhören und Senden von Ereignissen, so dass der Entwickler sich auf andere Aspekte seiner Anwendung konzentrieren kann. Ehrlich gesagt war ich mir nicht sicher, ob andere es so wertvoll finden würden, wie ich dachte, dass es sein könnte, also haben die Elemente alle das Standard-Styling.

Ich freue mich, sagen zu können, dass ich falsch lag. Es hat sich herausgestellt, dass die Leute es benutzen und das Hauptfeedback bezog sich auf das Styling oder dessen Fehlen. So in diesem Blog-Post, werden wir nicht nur über, wie man die für den Client SDK Stil gehen, aber Web-Komponenten im Allgemeinen.

Das Shadow DOM, eine der Technologien, die Webkomponenten ermöglichen, kann das Styling einer Webkomponente vor den Einflüssen der äußeren Anwendung schützen. Es wäre ziemlich schlimm, wenn die Anwendung ein section Tag mit position: absolute hat und dadurch das Tag der Webkomponente section Tag verändert.

Was ist, wenn Sie die Elemente in einer Webkomponente gestalten möchten? Es wäre doch schön, wenn alle Schaltflächen in Ihrer Anwendung gleich aussehen würden, oder?

Benutzerdefinierte CSS-Eigenschaften

Bei der Untersuchung von Webkomponenten und der Betrachtung verschiedener Designsysteme habe ich gesehen, dass Entwickler folgende Eigenschaften verwenden CSS benutzerdefinierte Eigenschaften, auch bekannt als CSS-Variablen. Der Autor einer Webkomponente erstellt Variablen mit Bezeichnungen wie --myelement-button-color und deklariert sie so:

button {
  background-color: var(--myelement-button-color, red);
}

Wenn die Variable nicht gesetzt ist, wird Rot als Standardfarbe verwendet.

In der umgebenden Anwendung können Sie einen Wert zuweisen, der mit dem Rest Ihrer Anwendung übereinstimmt, etwa so:

:root {
  --myelement-button-color: blue;
}

Großartig! Alle Ihre Schaltflächen können die gleiche Farbe haben, aber was ist mit der Schriftfarbe der Schaltfläche? Das würde eine weitere CSS-Variable erfordern. Möchten Sie den Radius des Rahmens anpassen? Eine weitere Variable. Farbe des Rahmens? Ja, eine weitere Variable.

Die Anzahl der Variablen kann schnell steigen, je mehr eine Webkomponente anpassbar ist. Sie kann auch sehr einschränkend sein, weil Sie nur das zur Verfügung haben, was der Autor der Webkomponente zur Verfügung stellt.

Was können wir tun?

Das Unglaubliche ::part

Dies ist der Punkt ::part ins Spiel. Es ist ein CSS-Pseudo-Element, wie ::before und ::after, mit dem Sie in das Schatten-DOM eindringen können, um einen beschrifteten Teil der Webkomponente zu gestalten. Es gibt einen guten Bericht über die Geschichte, wie wir hierher gekommen sind von Monica Dinculescu.

Als Beispiel sehen Sie hier eine Schaltfläche, die sich innerhalb der Webkomponente befindet:

<button part="button">Click Me</button>

In der äußeren Anwendung können Sie die Schaltfläche durch Anvisieren wie folgt gestalten:

custom-element::part(button) {
  color: red;
  border: 2px green solid;
  font-size: 30px;
  background-color: yellow;
}

Auf diese Weise braucht der Autor der Webkomponente nur die verschiedenen Teile der Komponente zu beschriften, und der Benutzer kann sie nach Belieben gestalten.

Ziemlich genial, oder?

Und jetzt... Die Client SDK UI-Webkomponenten

Nach der Einführung der benutzerdefinierten CSS-Eigenschaften und des ::part werfen wir nun einen Blick auf die Client SDK UI-Webkomponenten und wie sie einzeln gestaltet werden können.

Jede Komponente hat ein embed um das Standard-Styling anzuzeigen. Dekommentieren Sie das CSS, um ein Beispiel dafür zu sehen, wie der Stil angepasst werden kann. Fügen Sie ruhig Ihre eigenen hinzu und probieren Sie es aus.

vc-typing-indicator

Beginnen wir mit der einfachsten Komponente, vc-typing-indicator. Es ist nur Text, also können Sie ihn so gestalten, wie Sie jeden anderen Text in Ihrer Anwendung gestalten würden. Hier ist ein Beispiel:

vc-text-input

Als nächstes kommt vc-text-input. Diese Komponente besteht aus zwei Teilen. Die Eingabe, in die der Text eingegeben wird, mit der Beschriftung inputund die Schaltfläche zum Senden der Nachricht mit der Bezeichnung button.

vc-nachrichten

Nun zur Komponente, die für die Anzeige der Nachrichten des Chats zuständig ist, vc-messages. Auf der äußeren Ebene befindet sich die Nachricht, deren Teil mit der Bezeichnung message. Die Nachricht besteht aus dem Nachrichtentext mit der Bezeichnung message-text und der Benutzer, der die Nachricht gesendet hat, ist mit username.

Um zwischen den Nachrichten des Nutzers der Webanwendung und den Nachrichten anderer Nutzer zu unterscheiden, fügen wir mine zu den message, message-text, und username Teile hinzu.

Hinweis: Das Beispiel zeigt keinen Unterschied in der Nachricht des Benutzers zu anderen Benutzern. Dies liegt daran, dass der Benutzer anhand der an die Komponente übergebenen Konversation ermittelt wird. Hier ist ein Screenshot, wie der Standardstil aussieht:

Screenshot of the default syling of the vc-messages Web Component

vc-members

Die Komponente vc-members Komponente listet die Mitglieder des Chats auf. Es handelt sich um eine ungeordnete Liste, bei der die Liste beschriftet ist ul und die Elemente oder Mitglieder sind beschriftet mit li. Um die abwechselnden Zeilen so zu gestalten, dass die Liste leichter zu lesen ist, verwenden wir die CSS-Variablen --vc-members-nth-child-odd-color und --vc-members-nth-child-even-color um etwas Farbe hinzuzufügen.

vc-keypad

Zum Schluss noch die Komponente mit den meisten Elementen, vc-keypad. Oben beginnend ist die Ziffernanzeige beschriftet mit input. Die Schaltflächen sind in Zeilen gruppiert und beschriftet row. Um eine bestimmte Zeile zu wählen, sind sie mit der Bezeichnung position1 auf position5. So würde zum Beispiel das Styling von Teil row position2 die Schaltflächen 4, 5 und 6 betreffen.

Jede Schaltfläche ist beschriftet mit button. Um eine bestimmte Schaltfläche zu markieren, fügen Sie, wie bei den Zeilen, ihre Position hinzu. Zum Beispiel kann die Schaltfläche "#" gestaltet werden, indem man auf den Teil button position12.

Eine viel detailliertere Erklärung, einschließlich Diagrammen, finden Sie in der Client SDK UI Web Components GitHub Repo.

Schlussfolgerung

Wir haben uns mit der Gestaltung von Webkomponenten beschäftigt und die Komponenten, die wir für unsere Client-SDKs entwickelt haben, als Beispiele vorgestellt.

Wie gestalten Sie Ihre Webkomponenten? Haben Sie unsere Client SDK UI Komponenten verwendet? Lassen Sie es uns in unserem Slack-Kanal der Gemeinschaft!