An warware: shigarwa na kayan ui core ta amfani da

Material UI core shine kyakkyawan bayani ga masu haɓaka React waɗanda ke son amfani da abubuwan da aka riga aka gina don haɓakawa cikin sauri. Ya shahara don abubuwan gani-na gani da abubuwan da suka dace da masu amfani waɗanda ke kawo aiki da sauƙi ga tsarin ƙira. Material-UI ya mallaki abubuwa sama da 50, duk an tsara su don adana lokacin haɓakawa da kuzari. Yanzu, bari mu nutse kan yadda ake saita Material UI core don aikace-aikacen ku.

Saita Material-UI

Lokacin da yazo don saita Material-UI, duk yana farawa da shigarwa.

npm install @material-ui/core

Wannan umarnin zai shigar da ainihin fakitin Material-UI a cikin aikace-aikacenku. Yana da mahimmanci don tabbatar da cewa an saita mahallin ku don gudanar da JavaScript ko kuma wannan umarni na iya gazawa.

Da zarar an shigar da Material-UI core, yanzu zaku iya shigo da amfani da sashin sa a cikin aikace-aikacenku.

import Button from '@material-ui/core/Button';

function App() {
  return <Button color="primary">Hello World</Button>;
}

export default App;

A cikin snippet lambar da ke sama, muna da aikace-aikace mai sauƙi inda muka shigo da maɓalli daga Material-UI core kuma muka yi amfani da shi a cikin aikin mu na App.

Zurfafa zurfafa cikin Kayan-UI's Core Components

Material UI core yana da fiye da 50 abubuwan da aka riga aka ƙayyade waɗanda ke biyan buƙatu daban-daban a cikin shimfidar aikace-aikacen. Yawancin waɗannan abubuwan haɗin gwiwar ana iya daidaita su kuma suna ba da sassauci mai yawa ga masu haɓakawa. Wasu sanannun misalan sun haɗa da katunan, baji, maɓalli, akwatunan rajista, gumaka, da ƙari mai yawa.

Don amfani da waɗannan abubuwan haɗin, kuna buƙatar kawai shigo da hadewa su a cikin lambar ku daidai. Misali, sauƙin amfani da mashaya ci gaba na Material-UI zai yi kama da haka:

import CircularProgress from '@material-ui/core/CircularProgress';

function CircularIndeterminate() {
  return <CircularProgress />;
}

A cikin lambar da ke sama, mun shigo da bangaren CircularProgress don nuna alamar lodi.

Ƙarfin Material-UI Jigo

Ɗaya daga cikin abubuwan ban mamaki na Material-UI shine ƙarfin jigon sa. Ta hanyar naɗe aikace-aikacenku tare da ɓangaren ThemeProvider da samar da shi jigo, zaku iya canza kamannin aikace-aikacenku gaba ɗaya.

Bari mu bincika misali mai sauƙi:

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>

A cikin wannan misalin, mun ƙirƙiri jigo mai launin fari na shuɗi, sannan muka naɗe aikace-aikacenmu tare da ɓangaren ThemeProvider.

Material-UI core ya fito waje azaman kayan aiki mai mahimmanci don haɓaka saurin haɓakawa da haɓaka aiki a cikin haɓaka React. Ko ya kasance kayan aikin sa masu ban sha'awa, damar gyare-gyare, ko zaɓuɓɓukan jigo masu ƙarfi, abin tafiya ne ga masu haɓakawa waɗanda ke neman ƙirƙirar mu'amala mai ma'ana da jan hankali.