Material UI jezgra je fantastično rješenje za React programere koji žele koristiti unaprijed izgrađene komponente za brži razvoj. Poznat je po svojim vizualno zadivljujućim komponentama jednostavnim za korištenje koje donose praktičnost i jednostavnost u proces dizajniranja. Material-UI posjeduje više od 50 komponenti, a sve su dizajnirane da uštede vrijeme i energiju programera. Zaronimo sada u to kako postaviti jezgru korisničkog sučelja materijala za svoju aplikaciju.
Postavljanje Material-UI
Kada je riječ o postavljanju Material-UI, sve počinje instalacijom.
npm install @material-ui/core
Ova naredba će instalirati osnovni paket Material-UI u vašu aplikaciju. Ključno je osigurati da je vaše okruženje postavljeno za pokretanje JavaScripta jer inače ova naredba možda neće uspjeti.
Nakon što je jezgra Material-UI instalirana, sada možete uvesti i koristiti njezinu komponentu u svojoj aplikaciji.
import Button from '@material-ui/core/Button';
function App() {
return <Button color="primary">Hello World</Button>;
}
export default App;
U gornjem isječku koda imamo jednostavnu aplikaciju u koju smo uvezli gumb iz jezgre Material-UI i upotrijebili ga unutar naše funkcije aplikacije.
Kopanje dublje u temeljne komponente Material-UI
Material UI jezgra ima više od 50 unaprijed definirane komponente koji služe različitim potrebama u izgledu aplikacije. Mnoge od ovih komponenti mogu se prilagoditi i pružaju veliku fleksibilnost programerima. Nekoliko značajnih primjera uključuje kartice, značke, gumbe, potvrdne okvire, ikone i još mnogo toga.
Da biste iskoristili ove komponente, jednostavno morate uvesti i integrirati u svoj kod prema tome. Na primjer, jednostavna upotreba trake napretka Material-UI izgledala bi ovako:
import CircularProgress from '@material-ui/core/CircularProgress';
function CircularIndeterminate() {
return <CircularProgress />;
}
U gornjem kodu uvezli smo komponentu CircularProgress za prikaz indikatora učitavanja.
Snaga materijalnog tematiziranja korisničkog sučelja
Jedna od izvanrednih značajki Material-UI je njegova snažna mogućnost temiranja. Umotavanjem aplikacije u komponentu ThemeProvider i davanjem teme možete promijeniti izgled cijele aplikacije.
Pogledajmo jednostavan primjer:
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>
U ovom smo primjeru stvorili temu s primarnom bojom ljubičaste, a zatim omotali našu aplikaciju s komponentom ThemeProvider.
Material-UI jezgra ističe se kao bitan alat za povećanje brzine i produktivnosti u React razvoju. Bilo da se radi o njegovim atraktivnim komponentama, mogućnostima prilagodbe ili snažnim temama, to je pravo mjesto za programere koji žele stvoriti smislena i zadivljujuća korisnička sučelja.
