Poživite svoje dolgočasne spustne menije s to prilagodljivo knjižnico React.
Izbirni vnos je uporabna komponenta spletne aplikacije, ki vam omogoča, da izberete vrednost med številnimi možnostmi, ne da bi zavzeli veliko prostora. Toda privzeti stil je lahko dolgočasen in v nasprotju s preostalim dizajnom.
React Select ponuja prilagodljivo in prilagodljivo rešitev za izboljšanje videza in funkcionalnosti spustnih vnosov.
Namestitev React Select
Integracija Reacta z drugimi knjižnicami ali tehnologijami, kot so React Select, React Redux in mnogi drugi, lahko poenostavijo razvojni proces.
Če želite začeti uporabljati React Select, ga morate namestiti v svoj projekt. Za naredite to z uporabo npm, zaženite ta terminalski ukaz v vašem imeniku projekta:
npm i --save react-select
To bo namestilo in nastavilo knjižnico v vašem projektu React, tako da jo lahko začnete uporabljati.
Ustvarjanje izbranih vnosov z React Select
Zdaj, ko ste nastavili knjižnico, jo lahko uporabite za ustvarjanje izbranih vnosov. Če želite to narediti, boste uporabili
Izberite komponento. To je zelo prilagodljiva komponenta, ki uporabnikom omogoča izbiro možnosti s seznama.Tu je primer uporabe komponente Select:
import React from"react"
import Select from"react-select"functionApp() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]return (
</div>
)
}
exportdefault App
Ta primer se začne z uvozom Izberite komponenta iz "reagiraj-izberi”. Določa an opcije niz s tremi predmeti, vsak z a vrednost in a oznaka premoženje. Lastnost vrednosti predstavlja vrednost, ki jo bo obrazec poslal v zaledje, ko ga oddate. Lastnost label je besedilo, ki ga bo komponenta Select prikazala v spustnem meniju.
Ko upodabljate komponento Select, ji posredujte niz možnosti z uporabo opcije prop.
S tem blokom kode bo knjižnica React Select ustvarila spustni meni, kot je ta:
Prilagajanje izbranih vhodov
React Select ponuja različne načine prilagajanja izbranih vnosov. Uporabite lahko razrede CSS ali uporabite vgrajene sloge neposredno za izbrane vnose, glede na vaše želje.
Prilagajanje z razredi CSS
Knjižnica React Select ponuja a className rekvizit za Izberite komponento. Uporabite ta prop className za uporabo Cascading Style Sheet (CSS) po meri slogov v komponente Select.
Na primer:
import React from"react"
import Select from"react-select"functionApp() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]return (
exportdefault App
Zgornji blok kode je podoben prejšnjemu, vendar uporablja className prop za uporabo razreda CSS po meri za Izberite komponento. Podajte ime v prop className in ga lahko uporabite za uporabo slogov CSS za komponento:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Ko definirate sloge, bo vaš izbrani vnos videti takole:
Prilagajanje z vgrajenimi slogi
Prav tako lahko definirate vgrajene sloge v predmetu, ki ga posredujete prek stilov rekvizit za Izberite komponento. Tako imate več nadzora nad slogom posameznih elementov.
Tukaj je primer:
import React from"react"
import Select from"react-select"functionApp() {
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>
)
}
exportdefault App
Predmet rekvizita, customStyles, vsebuje slogovne lastnosti za komponente Select nadzor, možnost, in meni deli. Te lastnosti so funkcije, ki sprejmejo dva argumenta: baseStyles in država.
Parameter baseStyles predstavlja privzete sloge, ki jih ponuja React Select, medtem ko parameter stanja predstavlja trenutno stanje elementa. V tem primeru funkcije uporabljajo operator spread za kombiniranje osnovnih slogov z dodatnimi slogi za vsak del komponente.
Po uporabi teh slogov bi moral vaš izbrani vnos izgledati takole:
Dodajanje funkcionalnosti izbranim vhodom
React Select ponuja več funkcij za izboljšanje funkcionalnosti izbranih vnosov. Omogočite lahko funkcijo več izbir in iskanja ter celo ustvarite spustne komponente po meri.
Multi-Select Funkcionalnost
Če želite omogočiti funkcijo več izbir v spustnih menijih, prenesite isMulti prop na komponento Select. To uporabnikom omogoča izbiro več možnosti iz spustnega menija.
Na primer:
import React from"react"
import Select from"react-select"functionApp() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
{ value: "grapes", label: "Grapes" },
{ value: "orange", label: "Orange" },
]return (
</div>
)
}
exportdefault App
Ta primer prikazuje, kako uporabljati isMulti prop za dodajanje funkcije več izbir vašim izbranim vnosom.
Funkcionalnost iskanja
Knjižnica React Select ponuja vgrajeno funkcijo iskanja za enostavno filtriranje možnosti. Privzeto komponenta Izberi prikaže iskalni vnos, ko odprete spustni meni. Uporabniki lahko vnesejo iskalni vnos za filtriranje razpoložljivih možnosti.
Če želite omogočiti funkcijo iskanja, prenesite isSearchable prop na Izberite komponento. Kot isMulti prop, isSearchable sprejme logično vrednost.
Tukaj je primer, kako uporabiti podlago isSearchable za omogočanje funkcije iskanja:
import React from"react"
import Select from"react-select"functionApp() {
const options = [
{ value: "apple", label: "Apple" },
{ value: "apricot", label: "Apricot" },
{ value: "mango", label: "Mango" },
{ value: "mangosteens", label: "Mangosteens" },
{ value: "avocado", label: "Avocado" },
]return (
</div>
)
}
exportdefault App
Upodabljanje zgornjega bloka kode bo prikazalo izbrani vnos s funkcijo iskanja. Izgledalo in delovalo bo takole:
Ustvarite spustne komponente po meri
React Select vam omogoča ustvarjanje spustnih komponent po meri z uporabo elementa komponent. Privzete komponente, ki jih ponuja React Select, lahko preglasite in prilagodite videz in obnašanje spustnega menija po svojem okusu.
Na primer:
import React from"react"
import Select, { components } from"react-select"functionApp() {
const CustomOption = (obj) => (
{obj.label}</span>
marginInlineStart: "0.2rem" }}>Fruit</span>
</div>
)const CustomDropdownIndicator = (props) => (
↓</span>
</components.DropdownIndicator>
)const options = [
{ value: "apple", label: "Apple" },
{ value: "pineapple", label: "Pineapple" },
{ value: "watermelon", label: "Watermelon" },
]const customComponents = {
Option: CustomOption,
DropdownIndicator: CustomDropdownIndicator,
}return<Selectoptions={options}components={customComponents} />
}
exportdefault App
Ta blok kode prikazuje, kako ustvariti komponente po meri za izbrani vnos z uporabo komponente rekvizit za Izberite komponento. Uvaža komponente objekt, ki je zbirka vnaprej določenih komponent, ki jih lahko uporabite za prilagajanje videza in obnašanja različnih elementov v izbranih vnosih.
Koda določa dve funkcionalni komponenti: CustomOption in Custom DropdownIndicator. Komponenta CustomOption vzame predmet kot parameter. Ta objekt vsebuje različne lastnosti, ki jih ponuja React Select, npr innerProps in oznaka.
Komponenta CustomDropdownIndicator zavzame rekviziti kot parameter. Ta komponenta upodobi spustni indikator po meri s simbolom puščice navzdol. Koda ustvari a customComponents objekt, ki preslika komponente CustomOption in CustomDropdownIndicator v ustrezne Možnost in Spustni indikator ključi.
Končno ta koda posreduje objekt customComponents v prop komponente komponente Select. To bo upodobil izbrani vnos s komponentami po meri, ki bo videti takole:
Standardne komponente so lahko zmogljivejše in privlačnejše
React Select je zmogljiva knjižnica, ki vam omogoča ustvarjanje čudovitih in elegantnih izbranih vnosov v Reactu. Izbrane vnose lahko prilagodite, jim dodate funkcionalnost in ustvarite spustne komponente po meri. Z izkoriščanjem prednosti te knjižnice lahko izboljšate videz in uporabniško izkušnjo svojih aplikacij React.
