In der Vergangenheit erforderte die Erstellung benutzerdefinierter Komponenten komplexe Kombinationen aus HTML, CSS und JavaScript. Die Weiterentwicklung von CSS in den letzten Jahren erm?glicht es uns jedoch, viele Komponenten nur mit HTML und CSS zu erstellen und dabei die bereits in den Browsern integrierte Logik zu nutzen. Warum das Rad neu erfinden, wenn wir das meiste davon wiederverwenden k?nnen?

Einfache Komponenten wie Kontrollk?stchen, Optionsfelder und Kippschalter k?nnen mit HTML und CSS erstellt werden, wobei die Funktionalit?t auf den Browser angewiesen ist. Aber wir beschr?nken uns nicht auf einfache Komponenten. Auch komplexere Bauteile k?nnen so realisiert werden.

In diesem Artikel erfahren Sie, wie Sie mit einem einzigen HTML- und nur einem JavaScript-Befehl ein Sternebewertungssystem erstellen.

Der HTML

Eine Sternebewertungskomponente ist im Wesentlichen ein Wertebereich, aus dem Benutzer einen ausw?hlen k?nnen. Variationen k?nnen 5 Werte (einen pro Stern) oder 10 Werte (Halbsterne zulassen) umfassen, aber die Idee bleibt die gleiche?-?Benutzer k?nnen einen Wert ausw?hlen, und zwar nur einen.

HTML bietet einen Eingabetyp für Bereiche, den wir als Basis für unsere Komponente verwenden k?nnen:

<input type="range">

So wie es aussieht, ist diese Eingabe nicht sehr nützlich. Wir müssen einige Attribute basierend auf unseren Designspezifikationen definieren:

1. Halbe Sternbewertungen zulassen.
2. Im Bereich von 0,5 bis 5 Sternen.
3. Die Standardauswahl betr?gt 2,5 Sterne.

Basierend auf den oben genannten Spezifikationen sieht der HTML-Code wie folgt aus:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Diese Komponente ist eine Bereichseingabe (), die es Benutzern erm?glicht, einen Wert zwischen 0,5 (min="0.5") und 5 Sternen (max="5") in Schritten von auszuw?hlen 0,5 (Schritt="0,5"). Der Anfangswert ist auf 2,5 Sterne eingestellt (value="2.5").

Das Festlegen des Mindestwerts von 0,5 statt 0 mag ungew?hnlich erscheinen, aber es gibt einen praktischen Grund dafür. Wenn Sie eine Bewertung mit 0 Sternen zulassen, würden 11 potenzielle Werte entstehen, der Bereich stellt jedoch visuell 10 Werte (10 halbe Sterne) dar, was zu einer Diskrepanz zwischen den anklickbaren Bereichen und den Sternen im Bereich führt. Diese Designwahl sorgt für eine bessere Benutzerfreundlichkeit und vereinfacht die sp?tere Implementierung.

Dieses Problem k?nnte teilweise gel?st werden, indem die Komponente mit 11 Optionsfeldern erstellt würde. Dies würde jedoch neue Probleme im Hinblick auf das Design (wie w?hlen wir den Wert 0 mit der Maus aus?), die Benutzerfreundlichkeit (sollten wir das native Verhalten einer Bereichseingabe oder das native Verhalten der Optionsfelder nachahmen?) und die Zug?nglichkeit (wie k?nnen wir das tun) aufwerfen Wir verwalten den Fokus für die Komponente als Ganzes?)?

Das sind tolle Fragen für ein weiteres Tutorial zum Erstellen einer Bewertungskomponente mithilfe von Optionsfeldern. Für dieses Tutorial zum Erstellen der Komponente mithilfe eines einzelnen HTML-Elements habe ich mich für einen Mindestwert von 0,5 entschieden, um diese Komplexit?t zu vermeiden.

Wir werden sp?ter einige Optimierungen hinzufügen, aber dieser Code dient als solider Ausgangspunkt. Ohne CSS ?hnelt es optisch einer Standardbereichseingabe:

Als n?chstes fügen wir ein paar weitere Attribute hinzu. Auch wenn sie im Moment vielleicht nicht bedeutsam erscheinen, werden sie sp?ter wichtig sein:

• Klassenname: Hilft bei der Identifizierung der Bereichseingabe in CSS.
• Inline-Stile: mit einer benutzerdefinierten Eigenschaft zum Speichern des Eingabewerts.
• Inline-JavaScript: ein einzelner Befehl zum Aktualisieren der benutzerdefinierten Eigenschaft im oben genannten Inline-Stil.

Der endgültige Code sieht folgenderma?en aus (zur besseren Lesbarkeit formatiert):

<input type="range">

Im n?chsten Abschnitt werden wir diese Regel etwas verfeinern. Wir müssen Stile für Chrome/Safari und Firefox definieren, und das wird einige Wiederholungen mit sich bringen. Wir k?nnen den Prozess optimieren, indem wir benutzerdefinierte Eigenschaften verwenden, um Werte zu speichern und sie auf beide Stile anzuwenden.

Den Track gestalten

Die Spur nimmt die gesamte Gr??e des Elements ein, und dann verwenden wir einen Farbverlauf, um die ben?tigten Teile einzuf?rben.

über die Breite müssen wir uns keine Gedanken machen – sie nimmt die gesamte Breite des Elements ein –, aber bei der H?he ist das eine andere Sache. W?hrend Chrome und Firefox die H?he der Spur an den Container anpassen, ist dies bei Safari nicht der Fall. Daher müssen wir explizit eine H?he von 100 % angeben.

Als n?chstes wollen wir den farbigen Bereich definieren. Wir werden die zuvor erstellten benutzerdefinierten Eigenschaften --val und --size nutzen. Wir legen einen linearen Farbverlauf von links nach rechts fest, der die Farben an dem durch die Eigenschaft --val angegebenen Punkt ?ndert:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Wir verschieben diesen Farbverlauf in eine andere benutzerdefinierte Eigenschaft im übergeordneten Element. Dadurch k?nnen wir den Wert für Chrome/Safari und Firefox wiederverwenden – wie ich bereits erw?hnt habe … und wahrscheinlich sp?ter erw?hnen werde.

Damit haben wir ein Rechteck mit einem dunkleren Bereich, der den ausgew?hlten Wert darstellt. Der schwarze Bereich ?ndert sich, wenn wir auf das Rechteck klicken oder darüber streichen. Dies entspricht zwar der gewünschten Funktionalit?t, es fehlen jedoch die visuellen Elemente. Wir brauchen CSS-Masken.

Ich werde es nicht leugnen, der folgende Teil ist h?sslich. Ich habe mich dafür entschieden, ganz auf CSS zu setzen, ohne mich auf externe Bilder oder Inline-SVGs zu verlassen. Sie k?nnen den Code vereinfachen, indem Sie eine dieser Optionen verwenden.

Der folgende Code gilt für eine sternf?rmige Bewertungskomponente, aber wir k?nnten die Form leicht ?ndern (z. B. in Kreise), indem wir die Maske ?ndern.

Wir verwenden eine Reihe konischer Verl?ufe, um mithilfe von CSS-Masken einen fünfzackigen Stern auszuschneiden. Dabei wird die Gr??e des eingegebenen Bereichs berücksichtigt, sodass wir nach horizontaler Wiederholung der Maske fünf Sterne erhalten:

<input type="range">

Wie beim linearen Farbverlauf oben wenden wir diese Maske in den Stilen für Chrome/Safari und Firefox an. Um Codewiederholungen zu vermeiden, definieren wir ihn in einer benutzerdefinierten Eigenschaft innerhalb des übergeordneten Elements.

Der endgültige Code sieht folgenderma?en aus:

<input type="range" min="0.5" max="5" step="0.5" value="2.5">

Beachten Sie, dass der Code für Webkit und Firefox nahezu identisch ist. Eine Funktion wie Mixins in CSS w?re in solchen Situationen unglaublich hilfreich – obwohl es noch besser w?re, einen einzigen unterstützten Standard zu haben.

Wir haben auch einige Stile hinzugefügt (Print-Color-Adjust: Exact), um sicherzustellen, dass die Komponente genau so gedruckt wird, wie sie auf dem Bildschirm erscheint. Dies ist nützlich, wenn Sie mit Hintergründen arbeiten, da diese normalerweise nicht standardm??ig gedruckt werden.

Den Daumen stylen

Bei diesem Sternebewertungssystem ist der Daumen nicht besonders wichtig. Der visuelle Effekt wird durch die Schiene selbst erreicht. Also verstecken wir den Daumen aus der Sicht.

Wir k?nnen dies tun, indem wir die Deckkraft auf Null setzen:

<input 
  type="range"
  min="0.5"
  max="5"
  step="0.5"
  value="2.5"
 >



<h2>
  
  
  The CSS
</h2>

<p>Styling range inputs can be tricky–but not excessively complex. Unfortunately, it requires a lot of repetition due to lack of support and standardization, so we must use vendor prefixes and browser-specific pseudo-classes for the different elements of the component:</p>

• thumb: the element user can move to change the value. The pseudo-elements are?::-webkit-slider-thumb (Chrome and Safari) and?::-moz-range-thumb (Firefox)
• track: the area or line along which the thumb slides. The pseudo-elements are?::-webkit-slider-runnable-track (Chrome and Safari) and?::-moz-range-track (Firefox)

And, of course, we'll need to apply some specific styles for each browser, as they don't style the component consistently. For example, we'll need to set up heights on Safari or remove a pesky border on Firefox.

From here, the next steps are as follows:

1. Defined the size of the star-rating component.
2. Mask the track to only keep the shapes of the stars visible.
3. Define the background that only colors the selected stars.
4. Hide the thumb.

Hiding the thumb is optional and it will depend on the type of component you are building. It makes sense to hide the thumb in this star-rating system. However, in a user-satisfaction component, the thumb may be useful. You can explore different demos at the end of this article.

Styling the range?element

The first step will be removing the default appearance of the range input. This can be done that by setting the the appearance:none property. All modern browsers support it, but we may want to add the vendor-prefixed versions, so it's compatible with older browsers too.

Since we have five stars, it makes sense to set the width to five times the height. aspect-ratio: 5/1 could handle this, but some browsers still have inconsistent support, so we'll "hard code" the size using a custom property.

Additionally, we want to remove the border. Firefox applies a default border to the ranges, and removing it ensures a more consistent styling across browsers.

.star-rating {
  --size: 2rem;
  height: var(--size);
  width: calc(5 * var(--size));
  appearance: none;
  border: 0;
}

Vielleicht ist Ihnen aufgefallen, dass ich in den Codeausschnitten oben keine CSS-Verschachtelung verwendet habe (w?hrend ich sie in den Demos unten verwendet habe). Dies liegt daran, dass die Verschachtelung relativ neu ist und mit einigen Einschr?nkungen verbunden ist: Viele ?ltere Browser unterstützen sie nicht und auch einige moderne Browser haben Probleme mit nicht standardm??igen Pseudoelementen – ich habe einen Fehler in WebKit bezüglich dieses Verhaltens in Safari gemeldet.

Beispiele

Man sagt, ein Bild sagt mehr als tausend Worte. Hier sind einige Beispiele für Eingabebereiche, die mit einem einzelnen HTML-Element codiert werden k?nnen.

Beginnen wir mit der in diesem Artikel beschriebenen Sternebewertungskomponente:

Als n?chstes ein farbenfrohes Beispiel. Es hat eine untypische Form und erfordert die Gestaltung aller Teile einer Bereichseingabe: des Bereichs selbst, der Spur und des Daumens:

Abschlie?end noch ein Favorit von mir: eine animierte Komponente zur Benutzerzufriedenheit mit nur einem Element. W?hlen Sie eines der verschiedenen Gesichter aus und sie bewegen sich je nach Auswahl:

Abschluss

Es gibt viele verschiedene M?glichkeiten, diese Komponente zu codieren. Ich habe es nur mit HTML und CSS gemacht (mit einem Inline-JavaScript-Befehl), aber Sie k?nnten auch Bilder oder mehr JavaScript verwenden, um dieses h?ssliche Inlining zu verhindern.?

Der Kerngedanke ist, dass Sie mit minimalen HTML- und CSS-?nderungen die Spezifikationen anpassen k?nnen und Ihr Sternebewertungssystem sich etwas anders verh?lt oder ganz anders aussieht.

Die Komponente kann auch mit mehreren Optionsfeldern neu erstellt werden, wodurch die JavaScript-Zeile und etwas CSS überflüssig werden. Es ist ein gültiger Ansatz. Es w?re zus?tzlicher Code erforderlich, um die Zug?nglichkeit sicherzustellen und das Standardverhalten zu reproduzieren, das standardm??ig mit einem Eingabebereich ausgestattet ist. Manche finden diesen Ansatz vielleicht einfacher, und er ist auf jeden Fall machbar.

Das ist eines der Dinge, die ich an der Softwareentwicklung am meisten liebe: Es gibt viele verschiedene Ans?tze und Optionen, jede mit ihren Vor- und Nachteilen, und alle sind wunderbar umsetzbar.

Ich hoffe, Ihnen hat der Artikel gefallen. Codieren Sie weiter!

Das obige ist der detaillierte Inhalt vonSternebewertungskomponente für ein einzelnes HTML-Element. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!