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!