Eine CSS-Star-Bewertungskomponente und mehr! (Teil 1)

Die Erstellung einer Sternbewertungskomponente ist eine klassische Übung in der Webentwicklung und wurde mit einer Vielzahl von Techniken wiederholt implementiert. Normalerweise ist eine kleine Menge JavaScript -Code erforderlich, aber was ist mit Implementierungen mit CSS? Ja, ja!

Dies ist eine Demonstration der Sternenbewertungskomponente, die nur mit CSS implementiert wird. Sie können auf Update -Bewertung klicken.

Es ist cool, oder? HTML -Code ist nicht nur CSS, sondern auch ein einzelnes Element:

<input type="range">

Das Bereich Eingangselement ist ideal, da der Benutzer einen numerischen Wert zwischen zwei Grenzen (minimal und maximal) auswählen kann. Unser Ziel ist es, dieses native Element zu entwerfen und in eine Sternbewertungskomponente zu konvertieren, ohne zusätzliches Tagging oder Skripte! Wir werden am Ende auch mehr Komponenten erstellen, also bleiben Sie dran.

Hinweis: Dieser Artikel konzentriert sich nur auf den CSS -Teil. Während ich mein Bestes versuchte, Aspekte von UI, UX und Barrierefreiheit nachzudenken, waren meine Komponenten nicht perfekt. Es kann einige Nachteile (Fehler, Zugänglichkeitsprobleme usw.) haben. Verwenden Sie daher mit Vorsicht.

<input type="range"> Element

Sie wissen vielleicht, dass das Entwerfen von nativen Elementen wie Eingabeelementen aufgrund aller Standard -Browserstile und unterschiedlichen internen Strukturen etwas schwierig ist. Wenn Sie beispielsweise den Code auf ein Bereich Eingabeelement überprüfen, sehen Sie unterschiedliche HTML zwischen Chrom (oder Safari, Kante) und Firefox.

Zum Glück haben wir einige gemeinsame Teile, auf die ich mich verlassen werde. Ich werde zwei verschiedene Elemente finden: Hauptelement (Eingabe selbst) und Slider -Element (mit dem Element, in dem Sie die Maus verwenden, um den Wert zu aktualisieren).

Unser CSS ist hauptsächlich wie folgt:

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Der einzige Nachteil ist, dass wir den Stil des Slider -Elements zweimal wiederholen müssen. Versuchen Sie nicht, Folgendes zu tun:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Dies funktioniert nicht, da der gesamte Selektor ungültig ist. Chrom usw. verstehen den ::-moz-* -Teil nicht, während Firefox den ::-webkit-* -Teil nicht versteht. Der Einfachheit halber werde ich in diesem Artikel den folgenden Selektor verwenden:

input[type="range"]::thumb {
  /* 滑块样式 */
}

, aber die Demo enthält echte Selektoren mit sich wiederholenden Stilen. Die Einführung reicht aus, lasst uns mit dem Codieren beginnen!

Hauptelementstil (Stern)

Wir definieren zuerst die Größe:

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 删除默认浏览器样式 */
}

Wenn wir der Meinung sind, dass sich jeder Stern in einer quadratischen Fläche befindet, benötigen wir für eine 5-Sterne-Bewertung eine Breite, die das Fünffache der Höhe entspricht. Verwenden Sie also aspect-ratio: 5.

Die 5 Werte werden auch als Wert des max -attributs des Eingabeelements definiert.

<input type="range" max="5">

können wir uns auf die neu erweiterte attr() -Funktion (derzeit nur Chrom) verlassen, um den Wert zu lesen, anstatt ihn manuell zu definieren!

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */
}</number>

Jetzt können Sie die Anzahl der Sterne steuern, indem Sie einfach das Attribut max einstellen. Dies ist großartig, da das max -Treizattribut auch intern vom Browser verwendet wird. Die Aktualisierung des Werts steuert unsere Implementierung und das Verhalten des Browsers.

Diese verbesserte Version von attr() ist derzeit nur in Chrome erhältlich, sodass alle meine Demos ein Fallback -Schema enthalten, um nicht unterstützte Browser zu helfen.

Der nächste Schritt besteht darin, eine CSS -Maske zu verwenden, um Sterne zu erstellen. Wir müssen die Form fünfmal (oder mehrmals, abhängig vom Wert max) wiederholt, sodass die Maskengröße gleich var(--s) var(--s) oder var(--s) 100% oder zu var(--s) vereinfacht wird, da die Höhe standardmäßig 100% entspricht.

<input type="range">

Sie können fragen, was das Attribut ist? Ich denke, es ist nicht überraschend, dass ich Ihnen sagen werde, dass es einen Gradienten braucht, aber es kann auch ein SVG sein. In diesem Artikel geht es darum, eine Sternbewertungskomponente zu erstellen, aber ich möchte, dass der Sternteil vielseitig bleibt, damit Sie sie leicht durch jede gewünschte Form ersetzen können. Deshalb habe ich im Titel dieses Beitrags "mehr" gesagt. Wir werden später sehen, wie verschiedene Varianten mit derselben Codestruktur mit verschiedenen Varianten erhalten werden. mask-image

Hier ist eine Demonstration, die zwei verschiedene Möglichkeiten zur Implementierung von Sternformen zeigt. Einer ist die Verwendung von Gradienten, das andere ist die Verwendung von SVG.

In diesem Fall sieht die SVG -Implementierung sauberer aus und der Code ist kürzer, aber denken Sie an beide Methoden, da Gradientenimplementierungen manchmal besser abschneiden können.

Slider -Stil (ausgewählter Wert)

Konzentrieren wir uns jetzt auf das Slider -Element. Verwenden Sie die letzte Demo, klicken Sie dann auf die Sterne und bemerken Sie die Position des Schiebereglers.

Die gute Nachricht ist, dass der Schieberegler für alle Werte (von Minimum bis Maximum) immer innerhalb der Region eines bestimmten Sterns liegt, aber jeder Stern hat eine andere Position. Es wäre noch besser, wenn die Position immer gleich wäre, unabhängig vom Wert. Im Idealfall sollte der Schieberegler immer in der Mitte des Sterns sein.

Dies ist ein Bild, das den Ort und die Aktualisierung veranschaulicht.

Diese Linien sind die Slider -Positionen für jeden Wert. Links haben wir die Standardposition, in der sich der Schieberegler vom linken Rand des Hauptelements bis zur rechten Kante bewegt. Wenn wir auf der rechten Seite die Slider -Position auf den kleineren Bereich beschränken, indem wir auf beiden Seiten einige Platz hinzufügen, erhalten wir eine bessere Ausrichtung. Dieser Raum entspricht der Hälfte der Größe eines Sterns oder

. Dafür können wir Polster verwenden: var(--s)/2

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Es ist besser, aber nicht perfekt, weil ich nicht an die Schiebereglasse nachgedacht habe, was bedeutet, dass wir uns nicht wirklich in den Mittelpunkt setzen. Dies ist kein Problem, da ich eine Breite von 1PX verwenden werde, um die Größe des Schiebers sehr klein zu machen.

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Der Schieberegler ist jetzt eine dünne Linie in der Mitte des Sterns. Ich benutze Rot, um die Position hervorzuheben, aber in Wirklichkeit brauche ich keine Farbe, da sie transparent sein wird.

Sie denken vielleicht, wir sind immer noch weit vom Endergebnis entfernt, aber wir sind fast fertig! Eine Eigenschaft fehlt, um dieses Rätsel zu vervollständigen:

. border-image Das

Attribut ermöglicht es uns, Dekorationen außerhalb des Elements mit seiner border-image -Funktion zu zeichnen. Dazu mache ich den Schieberegler kleiner und transparent. Die Färbung erfolgt mit outset. Ich werde einen Gradienten mit zwei festen Farben als Quelle verwenden: border-image

input[type="range"]::thumb {
  /* 滑块样式 */
}

Wir schreiben den folgenden Inhalt:

<input type="range">

Die oben genannte bedeutet, dass wir die Fläche von border-image um 100px von jeder Seite des Elements erweitern, und der Gradient wird diesen Bereich füllen. Mit anderen Worten, jede Farbe des Gradienten bedeckt die Hälfte des Bereichs, d. H. 100px.

Verstehst du die Logik? Wir haben auf jeder Seite des Schiebereglers eine überfüllte Schattierung erstellt - eine Schattierung, die dem Schieberegler logisch folgt, so dass jedes Mal, wenn ein Stern geklickt wird, an Ort und Stelle geklickt wird!

Verwenden wir jetzt einen sehr großen Wert anstelle von 100px:

Wir sind fast fertig! Die Färbung füllt alle Sterne, aber wir möchten nicht, dass sie in der Mitte ist, sondern auf dem gesamten ausgewählten Stern. Dazu aktualisieren wir den Gradienten ein wenig, anstatt 50% zu verwenden, verwenden wir 50% var(--s)/2. Wir fügen einen Offset hinzu, der der halben Breite des Sterns entspricht, was bedeutet, dass die erste Farbe mehr Platz in Anspruch nimmt und unsere Sternbewertungskomponente perfekt ist!

Wir können den Code immer noch geringfügig optimieren, anstatt die Höhe für den Schieberegler zu definieren. Wir halten ihn bei 0 und betrachten die vertikale border-image von outset, um die Schattierung zu erweitern.

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Wir können auch konische Gradienten verwenden, um Gradienten unterschiedlich zu schreiben:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Ich weiß, dass die Syntax von border-image nicht leicht zu verstehen ist, und ich bin ein wenig schnell zu erklären. Aber ich habe einen sehr detaillierten Artikel im Smashing Magazine veröffentlicht, in dem ich diese Eigenschaft mit vielen Beispielen untersender habe, und ich lade Sie ein, sie für ein tieferes Verständnis der Funktionsweise des Funktionierens zu lesen.

Der vollständige Code unserer Komponente lautet wie folgt:

input[type="range"]::thumb {
  /* 滑块样式 */
}

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: 5;

  appearance: none; /* 删除默认浏览器样式 */
}

Das ist es! Mit ein paar Zeilen CSS -Code erhalten wir eine schöne Sternbewertungskomponente!

SEMI-STAR-Bewertung

Wie kann ich die Punktzahl auf den Halbstern einstellen? Dies ist sehr häufig und wir können den vorherigen Code durch einige Verbesserungen abschließen.

Erstens aktualisieren wir das Eingabeelement, um in halben Schritt anstelle des vollständigen Schrittes zu erhöhen:

<input type="range" max="5">

standardmäßig beträgt die Schrittgröße 1, aber wir können sie auf 0,5 (oder einen beliebigen Wert) aktualisieren und dann auch den Mindestwert auf 0,5 aktualisieren. Auf der CSS -Seite wechseln wir die Polsterung von var(--s)/2 zu var(--s)/4 und tun dasselbe für Offsets im Gradienten.

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */
}</number>

Die Differenz zwischen den beiden Implementierungen ist ein Hälfte des Faktors, der auch der Schrittgrößenwert ist. Dies bedeutet, dass wir attr() verwenden und gemeinsame Code erstellen können, der für beide Fälle funktioniert.

input[type="range"] {
  --s: 100px; /* 控制大小 */

  height: var(--s);
  aspect-ratio: attr(max type(<number>));

  appearance: none; /* 删除默认浏览器样式 */

  mask-image: /* ... */;
  mask-size: var(--s);
}</number>

Dies ist eine Demo, bei der das Ändern der Schrittgröße alles ist, was Sie tun müssen, um die Granularität zu kontrollieren. Vergessen Sie nicht, dass Sie auch das Attribut max verwenden können, um die Anzahl der Sterne zu steuern.

Verwenden Sie die Tastatur, um die Punktzahl

anzupassen

Wie Sie wissen, können wir mit der Tastatur den vom Slider eingegebenen Wert anpassen, sodass wir auch die Tastatur verwenden können, um die Punktzahl zu steuern. Das ist eine gute Sache, aber es gibt eine Warnung. Aufgrund der Verwendung der Eigenschaft mask haben wir keinen Standard -Umriss mehr, der den Fokus der Tastatur angibt, was für Benutzer, die sich auf Tastatureingaben verlassen, ein Problem mit der Zugänglichkeit darstellt.

Für ein besseres Benutzererlebnis und die Zugriff auf die Komponenten ist es am besten, den Umriss im Fokus anzuzeigen. Die einfachste Lösung besteht darin, einen zusätzlichen Wrapper hinzuzufügen:

<input type="range">

Dies wird einen Umriss haben, wenn der Eingang im Inneren Fokus hat:

input[type="range"] {
  /* 主元素样式 */
}

input[type="range"][i]::-webkit-slider-thumb {
  /* Chrome、Safari和Edge的滑块样式 */
}

input[type="range"]::-moz-range-thumb {
  /* Firefox的滑块样式 */
}

Versuchen Sie, die Tastatur zu verwenden, um diese beiden Bewertungen im folgenden Beispiel anzupassen:

Eine andere Idee ist die Berücksichtigung einer komplexeren Maskenkonfiguration, die kleine Bereiche um das Element sichtbar hält, um den Umriss anzuzeigen:

input[type="range"][i]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb {
  /* 滑块样式 */
}

Ich bevorzuge die letzte Methode, da sie die Implementierung des einzelnen Elements beibehält, aber möglicherweise können Sie mit Ihrer HTML -Struktur den Fokus auf das übergeordnete Element hinzufügen und die Maskenkonfiguration einfach halten. Es liegt alles bei dir!

Weitere Beispiele!

Wie ich bereits sagte, haben wir mehr als nur eine Sternbewertungskomponente gemacht. Sie können den Maskenwert einfach aktualisieren, um jede gewünschte Form zu verwenden.

Hier ist ein Beispiel: Ich benutze das SVG des Herzens anstelle des Sterns.

Warum ist es nicht ein Schmetterling?

Diesmal verwende ich PNG -Bilder als Maske. Wenn Sie nicht verwendet werden, um SVG oder Gradienten zu verwenden, können Sie transparente Bilder verwenden. Solange Sie SVG, PNG oder Gradienten haben, können Sie mit dieser Methode alles in Form tun.

Wir können eine Volumensteuerungskomponente wie Folgendes weiter anpassen und erstellen:

Im letzten Beispiel habe ich anstatt die spezifische Form zu wiederholen, eine komplexe Maskenkonfiguration, um die Signalform zu erstellen.

Schlussfolgerung

Wir haben mit einer Sternbewertungskomponente begonnen und haben viele coole Beispiele. Der Titel hätte "Wie man Reichweite Eingabelemente entwirft" gewesen sein, da wir das tun. Wir haben eine native Komponente ohne Skripte oder zusätzliche Tags aktualisiert und nur einige Zeilen von CSS -Code verwendet.

Wo bist du? Können Sie sich eine andere schöne Komponente vorstellen, die dieselbe Codestruktur verwendet? Teilen Sie Ihre Beispiele im Kommentarbereich mit!

Artikelreihe

1. CSS-Nur-Stern-Bewertungskomponenten und mehr! (Teil 1)
2. CSS-Nur-Stern-Bewertungskomponenten und mehr! (Teil 2) - veröffentlicht am 7. März!

Das obige ist der detaillierte Inhalt vonEine CSS-Star-Bewertungskomponente und mehr! (Teil 1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!