Színválasztó hozzáadása a React alkalmazáshoz sokkal könnyebbé teheti a felhasználók számára a használni kívánt színekkel kapcsolatos döntések meghozatalát. A színválasztók nagyszerű eszközt jelentenek azoknak a felhasználóknak, akik grafikus alkalmazással vagy bármely, a személyre szabást támogató alkalmazással dolgoznak.
A react-color könyvtár a lehetőségek széles skáláját és számos színválasztó stílust kínál az Ön igényeinek megfelelően.
Színválasztó hozzáadása az alkalmazáshoz
A react-color könyvtár megkönnyíti a színválasztó hozzáadását a React alkalmazáshoz. Ez a könyvtár egyszerű és intuitív módot biztosít a felhasználók számára, hogy színeket válasszanak ki alkalmazásaikhoz. A kód használata egyszerű, és nagyszerű felhasználói élményt nyújt. Mielőtt hozzáadna egy színválasztót, először meg kell tennie hozzon létre egy egyszerű reagáló alkalmazást.
A react-color áttekintése
A react-color könyvtár nagyszerű módja annak, hogy színválasztót adjon a React alkalmazáshoz. Könnyen használható felületet kínál, amely lehetővé teszi a felhasználók számára, hogy a színek széles skálájából válasszanak. A könyvtár kellékeket is tartalmaz, amelyek segítségével testreszabhatja a színválasztót.
A kód, amellyel színválasztót adhat hozzá a React alkalmazáshoz, egyszerű. A react-color könyvtár használatához először telepítenie kell a könyvtárat a segítségével npm, a Node.js csomagkezelője.
npm reagálok-színEzután egyszerűen adja hozzá a következő kódot a színválasztót megjeleníteni kívánt összetevőhöz:
import Reagál tól től'reagál'
import { SketchPicker } tól től'react-color'osztályÖsszetevőkiterjedReagál.Összetevő{
Vakol() {
Visszatérés<SketchPicker />
}
}
exportalapértelmezett Összetevő
A fenti kód egy alapszínválasztót jelenít meg. Lehetővé teszi a felhasználók számára, hogy különböző színek közül válogatjanak. A kiválasztó megjeleníti a kiválasztott szín HEX kódját is, amelyet az alkalmazás más részein is használhat.
Rendelkezésre álló kellékek
A react-color könyvtár kellékeket biztosít a színválasztó testreszabásához. Ezekkel a kellékekkel módosíthatja a picker méretét, a rendelkezésre álló színeket és még sok mást.
Alább találhatók a Color Picker elérhető kellékei:
- szélesség: A színválasztó szélessége képpontokban.
- magasság: A színválasztó magassága képpontokban.
- szín: A választó kezdeti színe.
- onChange: Visszahívási funkció, amely akkor fut le, ha a szín megváltozik.
- onChangeComplete: Visszahívási funkció, amely akkor fut le, amikor a színváltás befejeződött.
A következő kód megmutatja, hogyan kell használni az összes elérhető kelléket a Színválasztóhoz:
import Reagál tól től'reagál'
import { SketchPicker } tól től'react-color'
osztályÖsszetevőkiterjedReagál.Összetevő{
Vakol() {
Visszatérés (
szélesség={200}
magasság={200}
szín="#ff0000"
onChange={(szín) => konzol.log (szín)}
onChangeComplete={(szín, esemény)=> konzol.log (szín)}
/>
)
}
}
exportalapértelmezett Összetevő
A fenti kód 200 képpont széles, 200 képpont magas, #ff0000 kezdeti szín és színpaletta színválasztót jelenít meg. Megjelenik a színkód beviteli mezője és az alfa csatorna is. Amikor a szín megváltozik, meghívja az onChange visszahívást, és naplózza az új színt a konzolon.
További színválasztók hozzáadása
A react-color könyvtár számos különböző színválasztót kínál, és az utolsó részben használt SketchPicker mellett a ChromePickert is használhatja.
Importálja a ChromePickert ugyanúgy, mint a SketchPickert:
import { ChromePicker } tól től'react-color';A ChromePicker importálása után a következő kód hozzáadásával használhatja azt az alkalmazásban:
szín={ ez.state.background }
onChangeComplete={ ez.handleChangeComplete }
disableAlpha={igaz}
/>A ChromePicker ugyanazokat a kellékeket használja, mint a SketchPicker, de van néhány további lehetőség is, például az alfa csatorna letiltása, amit a disableAlpha prop segítségével tehet meg. A színt közvetlenül is beállíthatja a színtartóval.
Más színválasztók is elérhetők a react-color könyvtárban, például a Block, a Twitter és a GitHub. Mindegyik válogatónak megvannak a saját kellékei, ezért mindenképp nézze meg a dokumentációt további információkért.
Javítsa felhasználói élményét a színválasztóval
Színválasztó hozzáadása a React alkalmazáshoz nagyszerű módja a felhasználói élmény javításának. Lehetővé teszi a felhasználók számára, hogy gyorsan és egyszerűen válasszanak ki színeket az alkalmazásokhoz. A színválasztót felhasználóbarátabbá is teheti a Tailwind CSS használatával.
