I-Material UI core iyisixazululo esihle sabathuthukisi be-React abafuna ukusebenzisa izinto ezakhelwe ngaphambilini ukuze bathuthuke ngokushesha. Idume ngezinto zayo ezibukeka kahle nezisebenziseka kalula eziletha kokubili ukusebenza nokulula enqubweni yokuklama. I-Material-UI inezingxenye ezingaphezu kuka-50, zonke eziklanyelwe ukonga isikhathi namandla kanjiniyela. Manje, ake singene ngaphakathi kokuthi ungawumisa kanjani umgogodla we-Material UI wohlelo lwakho lokusebenza.
Isetha i-Material-UI
Uma kuziwa ekusetheni i-Material-UI, konke kuqala ngokufaka.
npm install @material-ui/core
Lo myalo uzofaka iphakheji eyinhloko ye-Material-UI kuhlelo lwakho lokusebenza. Kubalulekile ukuqinisekisa ukuthi indawo okuyo yonke ilungiselelwe ukusebenzisa i-JavaScript noma-ke lo myalo ungase uhluleke.
Uma i-Material-UI core isifakiwe, manje ungakwazi ukungenisa futhi usebenzise ingxenye yayo kuhlelo lwakho lokusebenza.
import Button from '@material-ui/core/Button';
function App() {
return <Button color="primary">Hello World</Button>;
}
export default App;
Kumazwibela ekhodi ngenhla, sinohlelo lokusebenza olulula lapho singenise khona inkinobho ku-Material-UI core futhi sayisebenzisa ngaphakathi komsebenzi wethu wohlelo lokusebenza.
Ukumba Ujule Ezingxenyeni Eziyinhloko Ze-Material-UI
I-Material UI core inokungaphezu kuka-50 izingxenye ezichazwe ngaphambilini enikezela ngezidingo ezahlukahlukene kusakhiwo sohlelo lokusebenza. Eziningi zalezi zingxenye zingenziwa ngendlela oyifisayo futhi zinikeza ukuguquguquka okukhulu konjiniyela. Izibonelo ezimbalwa eziphawulekayo zihlanganisa amakhadi, amabheji, izinkinobho, amabhokisi okuhlola, izithonjana, nokunye okuningi.
Ukuze usebenzise lezi zingxenye, udinga nje ngenisa futhi uhlanganise bangene kukhodi yakho ngokufanele. Isibonelo, ukusetshenziswa okulula kwebha yokuqhubeka ye-Material-UI kuzobukeka kanje:
import CircularProgress from '@material-ui/core/CircularProgress';
function CircularIndeterminate() {
return <CircularProgress />;
}
Kule khodi engenhla, singenise ingxenye ye-CircularProgress ukuze sibonise inkomba yokulayisha.
Amandla Wetimu ye-Material-UI
Esinye sezici eziphawulekayo ze-Material-UI yikhono layo letimu elinamandla. Ngokusonga uhlelo lwakho lokusebenza ngengxenye ye-ThemeProvider futhi ulunikeze itimu, ungashintsha ukubukeka kwalo lonke uhlelo lwakho lokusebenza.
Ake sihlole isibonelo esilula:
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>
Kulesi sibonelo, sidale itimu enombala oyinhloko onsomi, bese sigoqa uhlelo lwethu lokusebenza ngengxenye ye-ThemeProvider.
I-Material-UI core igqama njengethuluzi elibalulekile lokukhulisa isivinini nokukhiqiza ekuthuthukisweni kwe-React. Noma ngabe izingxenye zayo ezikhangayo, amandla okwenza ngokwezifiso, noma izinketho zetimu ezinamandla, iwuhambo oluya konjiniyela abafuna ukudala izixhumanisi zomsebenzisi ezinengqondo nezihehayo.
