Home-theater-designers
Une entrée de sélection est un composant d'application Web utile qui vous permet de choisir une valeur parmi de nombreuses options sans prendre beaucoup de place. Mais le style par défaut peut être terne et entrer en conflit avec le reste de votre conception.
Vidéo MUO du jour DÉFILEZ POUR CONTINUER AVEC LE CONTENU
React Select fournit une solution flexible et personnalisable pour améliorer l'apparence et la fonctionnalité des entrées déroulantes.
Installation de React Select
Intégration de React à d'autres bibliothèques ou technologies , comme React Select, React Redux et bien d'autres, peuvent simplifier le processus de développement.
Pour démarrer avec React Select, vous devez l'installer dans votre projet. À faites cela en utilisant npm , exécutez cette commande de terminal dans le répertoire de votre projet :
npm i --save react-select
Cela installera et configurera la bibliothèque dans votre projet React, afin que vous puissiez commencer à l'utiliser.
Création d'entrées Select avec React Select
Maintenant que vous avez configuré la bibliothèque, vous pouvez l'utiliser pour créer des entrées sélectionnées. Pour ce faire, vous utiliserez le Sélectionner composant. Il s'agit d'un composant hautement personnalisable qui permet aux utilisateurs de sélectionner des options dans une liste.
Voici un exemple d'utilisation du composant Select :
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} />
</div>
)
}
export default App
Cet exemple commence par importer le Sélectionner composant de ' réagir-sélectionner ». Il définit un choix tableau avec trois objets, chacun avec un valeur et un étiquette propriété. La propriété value représente la valeur que le formulaire enverra au backend lorsque vous le soumettez. La propriété label est le texte que le composant Select affichera dans la liste déroulante.
Lorsque vous effectuez le rendu du composant Select, transmettez-lui le tableau d'options à l'aide du choix soutenir.
mon ordinateur ne reconnait pas mon disque dur externe
Avec ce bloc de code, la bibliothèque React Select générera une liste déroulante comme celle-ci :
Personnalisation des entrées sélectionnées
React Select propose différentes manières de personnaliser les entrées sélectionnées. Vous pouvez utiliser des classes CSS ou appliquer des styles en ligne directement aux entrées sélectionnées, selon vos préférences.
Personnalisation avec les classes CSS
La bibliothèque React Select fournit un nom du cours accessoire pour le Sélectionner composant. Utilisez cet accessoire className pour appliquer une feuille de style en cascade (CSS) personnalisée styles à vos composants Select.
Par exemple:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
return (
<div>
<Select options={options} className='select'/>
</div>
)
}
export default App
Le bloc de code ci-dessus est similaire au précédent, mais il utilise le nom du cours prop pour appliquer une classe CSS personnalisée au Sélectionner composant. Fournissez un nom dans la prop className et vous pourrez l'utiliser pour appliquer des styles CSS au composant :
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Après avoir défini les styles, votre entrée de sélection ressemblera à ceci :
Personnalisation avec des styles en ligne
Vous pouvez également définir des styles en ligne dans un objet que vous transmettez via le modes accessoire du Sélectionner composant. Cela vous donne plus de contrôle sur le style des éléments individuels.
Voici un exemple :
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customStyles = {
control: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#e2e2e2",
}),
option: (baseStyles, state) => ({
...baseStyles,
backgroundColor: state.isFocused ? "#e2e2e2" : "",
color: state.isFocused ? "#333333" : "#FFFFFF",
}),
menu: (baseStyles, state) => ({
...baseStyles,
backgroundColor: "#333333",
}),
}
return (
<div>
<Select options={options} styles={customStyles} />
</div>
)
}
export default App
L'objet accessoire, styles personnalisés , contient les propriétés de style pour le composant Select contrôle , option , et menu les pièces. Ces propriétés sont des fonctions qui prennent deux arguments : styles de base et État .
Le paramètre baseStyles représente les styles par défaut fournis par React Select, tandis que le paramètre state représente l'état actuel de l'élément. Dans cet exemple, les fonctions utilisent l'opérateur spread pour combiner les baseStyles avec des styles supplémentaires pour chaque partie du composant.
Après avoir appliqué ces styles, votre entrée de sélection devrait ressembler à ceci :
Ajout de fonctionnalités aux entrées sélectionnées
React Select fournit plusieurs fonctionnalités pour améliorer la fonctionnalité des entrées sélectionnées. Vous pouvez activer les fonctionnalités de sélection multiple et de recherche, et même créer des composants déroulants personnalisés.
souris usb ne fonctionne pas windows 10
Fonctionnalité de sélection multiple
Pour activer la fonctionnalité de sélection multiple dans vos listes déroulantes, transmettez le estMulti prop au composant Select. Cela permet aux utilisateurs de sélectionner plusieurs options dans le menu déroulant.
Par exemple:
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]
return (
<div>
<Select options={options} isMulti />
</div>
)
}
export default App
Cet exemple montre comment utiliser le estMulti prop pour ajouter la fonctionnalité de sélection multiple à vos entrées sélectionnées.
Fonctionnalité de recherche
La bibliothèque React Select fournit une fonctionnalité de recherche intégrée pour filtrer facilement les options. Par défaut, le composant Select affiche l'entrée de recherche lorsque vous ouvrez la liste déroulante. Les utilisateurs peuvent saisir l'entrée de recherche pour filtrer les options disponibles.
Pour activer la fonctionnalité de recherche, transmettez le estRecherchable soutenir le Sélectionner composant. Comme le estMulti prop, isSearchable accepte une valeur booléenne.
Voici un exemple d'utilisation de la prop isSearchable pour activer la fonctionnalité de recherche :
import React from "react"
import Select from "react-select"
function App() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]
return (
<div>
<Select options={options} isSearchable />
</div>
)
}
export default App
Le rendu du bloc de code ci-dessus affichera une entrée de sélection avec une fonctionnalité de recherche. Il ressemblera et fonctionnera comme ceci :
Créer des composants déroulants personnalisés
React Select vous permet de créer des composants déroulants personnalisés à l'aide de l'accessoire composants. Vous pouvez remplacer les composants par défaut fournis par React Select et personnaliser l'apparence et le comportement de la liste déroulante selon vos goûts.
Par exemple:
import React from "react"
import Select, { components } from "react-select"
function App() {
const CustomOption = (obj) => (
<div {...obj.innerProps}>
<span>{obj.label}</span>
<span style={{ marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)
const CustomDropdownIndicator = (props) => (
<components.DropdownIndicator {...props}>
<span>↓</span>
</components.DropdownIndicator>
)
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]
const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}
return <Select options={options} components={customComponents} />
}
export default App
Ce bloc de code montre comment créer des composants personnalisés pour une entrée sélectionnée à l'aide de l'outil Composants accessoire du Sélectionner composant. Il importe le Composants objet qui est une collection de composants prédéfinis que vous pouvez utiliser pour personnaliser l'apparence et le comportement de divers éléments dans vos entrées sélectionnées.
comment vérifier la capacité de la batterie android
Le code définit deux composants fonctionnels : Option personnalisée et Indicateur déroulant personnalisé . Le composant CustomOption prend un objet comme paramètre. Cet objet contient diverses propriétés fournies par React Select, comme accessoires internes et étiquette .
Le composant CustomDropdownIndicator prend accessoires comme paramètre. Ce composant affiche un indicateur déroulant personnalisé avec un symbole de flèche vers le bas. Le code crée un composants personnalisés objet qui mappe les composants CustomOption et CustomDropdownIndicator aux composants correspondants Option et Indicateur déroulant clés.
Enfin, ce code transmet l'objet customComponents à la prop composants du composant Select. Cela affichera une entrée de sélection avec les composants personnalisés, ressemblant à ceci :
Les composants standard peuvent être plus puissants et plus attrayants
React Select est une bibliothèque puissante qui vous permet de créer des entrées de sélection belles et élégantes dans React. Vous pouvez personnaliser les entrées sélectionnées, leur ajouter des fonctionnalités et créer des composants déroulants personnalisés. En profitant de cette bibliothèque, vous pouvez améliorer l'apparence et l'expérience utilisateur de vos applications React.