Home-theater-designers
Una entrada de selecció és un component d'aplicació web útil que us permet triar un valor entre moltes opcions sense ocupar gaire espai. Però l'estil predeterminat pot ser avorrit i xocar amb la resta del disseny.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
React Select ofereix una solució flexible i personalitzable per millorar l'aparença i la funcionalitat de les entrades desplegables.
ordinador portàtil connectat a wifi però sense accés a Internet de Windows 10
Instal·lació de React Select
Integració de React amb altres biblioteques o tecnologies , com React Select, React Redux i molts més, poden simplificar el procés de desenvolupament.
Per començar amb React Select, heu d'instal·lar-lo al vostre projecte. A feu-ho amb npm , executeu aquesta ordre de terminal al directori del vostre projecte:
npm i --save react-select
Això instal·larà i configurarà la biblioteca al vostre projecte React, perquè pugueu començar a utilitzar-lo.
Creació d'entrades de selecció amb React Select
Ara que heu configurat la biblioteca, podeu utilitzar-la per crear entrades seleccionades. Per fer-ho, utilitzaràs el Seleccioneu component. Aquest és un component altament personalitzable que permet als usuaris seleccionar opcions d'una llista.
Aquí teniu un exemple de com utilitzar el component Selecciona:
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
Aquest exemple comença important el fitxer Seleccioneu component de ' reaccionar-seleccionar ”. Defineix un opcions matriu amb tres objectes, cadascun amb a valor i a etiqueta propietat. La propietat value representa el valor que el formulari enviarà al backend quan l'envieu. La propietat de l'etiqueta és el text que el component Selecciona mostrarà al menú desplegable.
Quan renderitzeu el component Select, passeu-li la matriu d'opcions utilitzant el opcions prop.
Amb aquest bloc de codi, la biblioteca React Select generarà un desplegable com aquest:
Personalització de les entrades de selecció
React Select ofereix diverses maneres de personalitzar les entrades seleccionades. Podeu utilitzar classes CSS o aplicar estils en línia directament a les entrades seleccionades, segons les vostres preferències.
Personalització amb classes CSS
La biblioteca React Select proporciona a className suport per al Seleccioneu component. Utilitzeu aquest nom de classe prop per aplicar un full d'estil en cascada (CSS) personalitzat estils als vostres components Select.
Per 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
El bloc de codi anterior és similar a l'anterior, però utilitza el className prop per aplicar una classe CSS personalitzada al fitxer Seleccioneu component. Proporcioneu un nom a la prop className i podeu utilitzar-lo per aplicar estils CSS al component:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Després de definir els estils, l'entrada seleccionada tindrà aquest aspecte:
Personalització amb estils en línia
També podeu definir estils en línia en un objecte que passeu a través de estils suport de la Seleccioneu component. Això us proporciona més control sobre l'estil dels elements individuals.
Aquí teniu 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'objecte de suport, estils personalitzats , conté propietats d'estil per al component Selecciona control , opció , i menú parts. Aquestes propietats són funcions que prenen dos arguments: estils bàsics i estat .
El paràmetre baseStyles representa els estils predeterminats proporcionats per React Select, mentre que el paràmetre state representa l'estat actual de l'element. En aquest exemple, les funcions utilitzen l'operador de propagació per combinar els estils base amb estils addicionals per a cada part del component.
Després d'aplicar aquests estils, l'entrada seleccionada hauria de ser així:
Afegir funcionalitat a les entrades de selecció
React Select ofereix diverses funcions per millorar la funcionalitat de les entrades seleccionades. Podeu habilitar la funció de selecció múltiple i de cerca, i fins i tot crear components desplegables personalitzats.
Funcionalitat de selecció múltiple
Per activar la funcionalitat de selecció múltiple als vostres menús desplegables, passeu el isMulti prop al component Selecciona. Això permet als usuaris seleccionar diverses opcions al menú desplegable.
Per 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
Aquest exemple mostra com utilitzar el isMulti prop per afegir la funcionalitat de selecció múltiple a les entrades seleccionades.
Funcionalitat de cerca
La biblioteca React Select ofereix una funcionalitat de cerca integrada per filtrar opcions fàcilment. De manera predeterminada, el component Selecciona mostra l'entrada de cerca quan obriu el menú desplegable. Els usuaris poden escriure l'entrada de cerca per filtrar les opcions disponibles.
Per habilitar la funcionalitat de cerca, passeu el és cercable prop al Seleccioneu component. Com el isMulti prop, isSearchable accepta un valor booleà.
quantes imatges poden contenir 32 GB
Aquí teniu un exemple de com utilitzar l'accessori isSearchable per habilitar la funcionalitat de cerca:
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
La representació del bloc de codi anterior mostrarà una entrada de selecció amb funcionalitat de cerca. Es veurà i funcionarà així:
Creeu components desplegables personalitzats
React Select us permet crear components desplegables personalitzats mitjançant el complement de components. Podeu anul·lar els components predeterminats proporcionats per React Select i personalitzar l'aparença i el comportament del menú desplegable segons el vostre gust.
Per 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
Aquest bloc de codi mostra com crear components personalitzats per a una entrada seleccionada mitjançant l' components suport de la Seleccioneu component. Importa el components objecte que és una col·lecció de components predefinits que podeu utilitzar per personalitzar l'aparença i el comportament de diversos elements a les vostres entrades seleccionades.
El codi defineix dos components funcionals: Opció personalitzada i Indicador desplegable personalitzat . El component CustomOption pren un objecte com a paràmetre. Aquest objecte conté diverses propietats que proporciona React Select, com ara innerProps i etiqueta .
El component CustomDropdownIndicator pren accessoris com a paràmetre. Aquest component mostra un indicador desplegable personalitzat amb un símbol de fletxa cap avall. El codi crea un components personalitzats objecte que mapeja els components CustomOption i CustomDropdownIndicator amb els components corresponents Opció i Indicador desplegable claus.
Finalment, aquest codi passa l'objecte customComponents als components prop del component Select. Això mostrarà una entrada seleccionada amb els components personalitzats, amb aquest aspecte:
Els components estàndard poden ser més potents i atractius
React Select és una biblioteca potent que us permet crear entrades selectes belles i elegants a React. Podeu personalitzar les entrades seleccionades, afegir-hi funcionalitats i crear components desplegables personalitzats. Aprofitant aquesta biblioteca, podeu millorar l'aspecte i l'experiència d'usuari de les vostres aplicacions React.