Оживите своје досадне падајуће меније помоћу ове флексибилне Реацт библиотеке.
Изабрани унос је корисна компонента веб апликације која вам омогућава да изаберете вредност из многих опција без заузимања много простора. Али подразумевани стил може бити досадан и у супротности са остатком вашег дизајна.
Реацт Селецт пружа флексибилно и прилагодљиво решење за побољшање изгледа и функционалности падајућих улаза.
Инсталирање Реацт Селецт-а
Интеграција Реацт-а са другим библиотекама или технологијама, као што су Реацт Селецт, Реацт Редук и многи други, могу да поједноставе процес развоја.
Да бисте започели са Реацт Селецт-ом, потребно је да га инсталирате у свој пројекат. До урадите то користећи нпм, покрените ову терминалну команду у директоријуму вашег пројекта:
npm i --save react-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
Овај пример почиње увозом Изаберите компонента из “реаговати-одабери”. Он дефинише ан Опције низ са три објекта, сваки са а вредност и а етикета имовина. Својство валуе представља вредност коју ће образац послати на позадину када га пошаљете. Својство лабела је текст који ће компонента Селецт приказати у падајућем менију.
Када рендерујете компоненту Селецт, проследите јој низ опција користећи Опције проп.
Са овим блоком кода, библиотека Реацт Селецт ће генерисати падајући мени овако:
Прилагођавање Селецт Инпутс
Реацт Селецт пружа различите начине прилагођавања одабраних улаза. Можете користити ЦСС класе или применити уметнуте стилове директно на изабране улазе, у складу са вашим жељама.
Прилагођавање помоћу ЦСС класа
Реацт Селецт библиотека пружа а Назив класе проп за Изаберите саставни део. Користите овај реквизит цлассНаме да примените прилагођени каскадни стилски лист (ЦСС) стилова вашим компонентама Селецт.
На пример:
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
Горњи блок кода је сличан претходном, али користи Назив класе проп за примену прилагођене ЦСС класе на Изаберите саставни део. Наведите име у цлассНаме проп и можете га користити да примените ЦСС стилове на компоненту:
.select {
color: #333333;
font-family: cursive;
inline-size: 30%;
font-size: 11px;
}
Након дефинисања стилова, ваш изабрани унос ће изгледати овако:
Прилагођавање помоћу уграђених стилова
Такође можете дефинисати инлине стилове у објекту који прослеђујете преко стилова проп оф тхе Изаберите саставни део. Ово вам даје већу контролу над стилом појединачних елемената.
Ево примера:
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
реквизит објекат, цустомСтилес, садржи својства стила за компоненту Селецт контролу, опција, и мени делови. Ова својства су функције које узимају два аргумента: басеСтилес и држава.
Параметар басеСтилес представља подразумеване стилове које обезбеђује Реацт Селецт, док параметар стања представља тренутно стање елемента. У овом примеру, функције користе оператор ширења за комбиновање основних стилова са додатним стиловима за сваки део компоненте.
Након примене ових стилова, ваш изабрани унос би требало да изгледа овако:
Додавање функционалности за Селецт Инпутс
Реацт Селецт пружа неколико функција за побољшање функционалности одабраних улаза. Можете омогућити вишеструки избор и функцију претраживања, па чак и креирати прилагођене падајуће компоненте.
Функционалност вишеструког избора
Да бисте омогућили функцију вишеструког избора у падајућем менију, проследите исМулти проп на компоненту Селецт. Ово омогућава корисницима да изаберу више опција из падајућег менија.
На пример:
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
Овај пример показује како се користи исМулти проп да додате функционалност вишеструког избора вашим одабраним улазима.
Функционалност претраге
Реацт Селецт библиотека пружа уграђену функцију претраживања за лако филтрирање опција. Подразумевано, компонента Селецт приказује унос за претрагу када отворите падајући мени. Корисници могу да унесу унос за претрагу како би филтрирали доступне опције.
Да бисте омогућили функцију претраге, проследите исСеарцхабле проп то тхе Изаберите саставни део. Као исМулти проп, исСеарцхабле прихвата логичку вредност.
Ево примера како да користите исСеарцхабле проп да бисте омогућили функцију претраживања:
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
Приказивање блока кода изнад ће приказати изабрани унос са функцијом претраживања. Изгледаће и функционисати овако:
Креирајте прилагођене падајуће компоненте
Реацт Селецт вам омогућава да креирате прилагођене падајуће компоненте користећи компоненте проп. Можете заобићи подразумеване компоненте које пружа Реацт Селецт и прилагодити изглед и понашање падајућег менија према свом укусу.
На пример:
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
Овај блок кода показује како да креирате прилагођене компоненте за одабрани улаз користећи компоненте проп оф тхе Изаберите саставни део. Увози компоненте објекат који је колекција унапред дефинисаних компоненти које можете користити да прилагодите изглед и понашање различитих елемената у вашим одабраним улазима.
Код дефинише две функционалне компоненте: ЦустомОптион и ЦустомДропдовнИндицатор. Компонента ЦустомОптион узима објекат као параметар. Овај објекат садржи различита својства која Реацт Селецт пружа, на пример иннерПропс и етикета.
Компонента ЦустомДропдовнИндицатор узима реквизити као параметар. Ова компонента приказује прилагођени падајући индикатор са симболом стрелице надоле. Код ствара а цустомЦомпонентс објекат који мапира компоненте ЦустомОптион и ЦустомДропдовнИндицатор у одговарајуће Опција и ДропдовнИндицатор кључеви.
Коначно, овај код прослеђује објекат цустомЦомпонентс компоненти компоненте Селецт компоненте. Ово ће приказати одабрани унос са прилагођеним компонентама, који ће изгледати овако:
Стандардне компоненте могу бити снажније и атрактивније
Реацт Селецт је моћна библиотека која вам омогућава да креирате прелепе и елегантне одабране улазе у Реацт-у. Можете прилагодити одабране улазе, додати им функционалност и креирати прилагођене падајуће компоненте. Користећи предности ове библиотеке, можете побољшати изглед и корисничко искуство својих Реацт апликација.