Materjali kasutajaliidese tuum on fantastiline lahendus Reacti arendajatele, kes soovivad kiiremaks arendamiseks kasutada eelehitatud komponente. See on tuntud oma visuaalselt vapustavate ja kasutajasõbralike komponentide poolest, mis toovad disainiprotsessi nii praktilisust kui ka lihtsust. Materjal-UI sisaldab üle 50 komponendi, mis kõik on loodud arendaja aja ja energia säästmiseks. Nüüd uurime, kuidas seadistada oma rakenduse jaoks materjali kasutajaliidese tuum.
Materjali kasutajaliidese seadistamine
Materjali kasutajaliidese seadistamisel algab kõik installimisest.
npm install @material-ui/core
See käsk installib teie rakendusse Material-UI põhipaketi. Väga oluline on tagada, et teie keskkond oleks JavaScripti käitamiseks seadistatud, vastasel juhul võib see käsk ebaõnnestuda.
Kui Material-UI tuum on installitud, saate nüüd importida ja kasutada selle komponenti oma rakenduses.
import Button from '@material-ui/core/Button';
function App() {
return <Button color="primary">Hello World</Button>;
}
export default App;
Ülaltoodud koodilõigul on meil lihtne rakendus, kuhu oleme importinud nupu Material-UI tuumast ja kasutanud seda oma rakenduse funktsioonis.
Materjali kasutajaliidese põhikomponentidesse süvenemine
Materjali kasutajaliidese tuumal on rohkem kui 50 eelnevalt määratletud komponendid mis rahuldavad rakenduse paigutuses erinevaid vajadusi. Paljud neist komponentidest on kohandatavad ja pakuvad arendajatele palju paindlikkust. Mõned tähelepanuväärsed näited hõlmavad kaarte, märke, nuppe, märkeruutusid, ikoone ja palju muud.
Nende komponentide kasutamiseks peate lihtsalt seda tegema importida ja integreerida need vastavalt teie koodile. Näiteks näeb materjali kasutajaliidese edenemisriba lihtne kasutamine välja järgmine:
import CircularProgress from '@material-ui/core/CircularProgress';
function CircularIndeterminate() {
return <CircularProgress />;
}
Ülaltoodud koodis importisime laadimisnäidiku kuvamiseks komponendi CircularProgress.
Materjali ja kasutajaliidese teemastamise jõud
Materjali kasutajaliidese üks tähelepanuväärseid omadusi on selle võimas teemade kujundamise võimalus. Pakkides oma rakenduse ThemeProvideri komponendiga ja lisades sellele teema, saate muuta kogu rakenduse välimust.
Uurime lihtsat näidet:
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
primary: purple,
},
});
<ThemeProvider theme={theme}>
<Button color="primary">A purple theme button</Button>
</ThemeProvider>
Selles näites lõime lilla põhivärviga teema, seejärel pakkisime rakenduse ThemeProvider komponendiga.
Materjali kasutajaliidese tuum paistab silma kui oluline tööriist Reacti arenduse kiiruse ja tootlikkuse suurendamiseks. Olgu need atraktiivsed komponendid, kohandamisvõimalused või võimsad temaatilised valikud – see on mõeldud arendajatele, kes soovivad luua sisukaid ja köitvaid kasutajaliideseid.
