So rendern Sie "N Elemente ausgewählt" anstelle der Liste von N ausgewählten Elementen mit react-select
Ich versuche, react-select als Selektor für eine Stadtauswahl zu verwenden, in der Nutzer 1 auswählen können oder mehrere Städte, um einige Daten zu filtern. Hier ist ein Screenshot davon auf meiner Seite gerendert:
Die Stadtliste kann groß sein, und ich möchte nicht, dass der Selektor außerhalb seines blauen Containers wächst, wenn eine große Anzahl gleichzeitig ausgewählt wird. Folgendes passiert, wenn ich das jetzt simuliere:
Ich bin kein großer Fan davon! Eine Alternative, die ich mir vorstellen kann, ist "4 Städte ausgewählt" statt der gesamten Liste. Dies wird eine vorhersehbare Größe auf der Seite haben.
Wie kann das mit react-select gemacht werden?
2 Antworten
Rendern "N Elemente ausgewählt"
Dies kann mit den valueRenderer und className Requisiten und einer minimalen Menge an CSS erreicht werden.
Hier zeige ich normalerweise die ersten drei Auswahlmöglichkeiten und dann "N Elemente ausgewählt", wenn 4 + Elemente ausgewählt wurden. Es macht keinen Sinn, das Auswahl entfernen Symbol (x) neben "N Elemente ausgewählt" zu sehen, also habe ich das auch entfernt (mit CSS).
Alternativer Ansatz
Wenn Sie sich Ihre Screenshots ansehen, sieht es so aus, als hätten Sie Platz für bis zu vier Auswahlmöglichkeiten, ohne dass der Selektor überläuft. Anstatt "N Elemente ausgewählt" anzuzeigen, wenn 4+ Städte ausgewählt wurden, können Sie normalerweise die ersten 3 Auswahlen und dann "+ N mehr" anzeigen. So:
- Stadt A
- Stadt A, Stadt B
- Stadt A, Stadt B, Stadt C
- Stadt A, Stadt B, Stadt C, + 1 mehr
- Stadt A, Stadt B, Stadt C, + 2 weitere
- Stadt A, Stadt B, Stadt C, + 3 weitere
- usw.
Von einer UX-Perspektive aus gesehen ist es gut, die ersten drei oder mehr Selektionen normal zu zeigen. Es ist verwirrend, wenn jede Auswahl plötzlich hinter dem Text "4 Elemente ausgewählt" versteckt wird, nachdem die 4. Stadt ausgewählt wurde.
Diese Lösung ist sehr ähnlich wie die erste. Die className prop ist jetzt einfach eine Zeichenfolge. Die renderValue -Methode und die CSS-Selektoren sind etwas anders.
Hier ist ein weiterer Ansatz, die Auswahlmöglichkeiten zu zeigen:
- Stadt A
- Stadt A, Stadt B
- Stadt A, Stadt B, Stadt C
- Stadt A, Stadt B, Stadt C, Stadt D
- Stadt A, Stadt B, Stadt C, + 2 weitere
- Stadt A, Stadt B, Stadt C, + 3 weitere
- usw.
Die Methode renderValue ist wieder ein bisschen anders. Die CSS-Selektoren sind jetzt ein bisschen hässlicher und komplexer, aber sie funktionieren.
Meiner Meinung nach überschreibe ich CSS, um die Größe zu fixieren. Es ist die Frage von CSS. Ich werde das Element untersuchen und Änderungen vornehmen.
Sehen wir uns das obige Beispiel an. Dies ist das CSS, das Sie anpassen müssen:
%Vor%}
Entfernen Sie nun display: table; und fügen Sie eine passende Höhe hinzu.
Tags und Links javascript reactjs react-select