Шта је МУИ и како га можете користити у својим РеацтЈС пројектима?

У септембру 2021, компанија раније позната као Материал-УИ променила је име у МУИ. Ова промена се догодила углавном зато што многи људи нису могли да разликују Материал-УИ од Материал Десигн-а (систем дизајна).

МУИ је започео као имплементација Материал Десигн-а скројеног за Реацт апликације. Данас се бренд шири и тражи да створи нови систем дизајна, који ће бити алтернатива материјалном дизајну.

Акроним МУИ значи Материјал за прављење корисничког интерфејса, а у овом чланку ћете научити тачно како да користите МУИ за прављење Реацт корисничког интерфејса.

Како приступити МУИ-ју у Реацт-у?

МУИ је доступан као нпм пакет. Стога, све што треба да урадите да бисте му приступили је да извршите следећу линију кода у оквиру вашег Реацт пројекта:

нпм инсталл @муи/материал @емотион/реацт @емотион/стилед

Под претпоставком да сте већ инсталиран Реацт на вашем уређају, имате потпун приступ МУИ библиотеци и свим њеним компонентама. МУИ има преко стотину различитих компоненти које спадају у једну од следећих категорија:

• Инпутс
• Приказ података
• Повратна информација
• Површине
• Навигација
• Лаиоут
• Утилс
• Мрежа података
• Датум време

Након инсталирања МУИ-а као нпм пакета, коришћење библиотеке у оквиру вашег пројекта је једноставно као и увоз потребну компоненту у одговарајућој датотеци и убацивање ваших стилских преференција на одређене локације УИ.

Ако желите да креирате страницу за пријаву за своју Реацт апликацију, то је неколико МУИ компоненти које можете да користите које ће уштедети време и помоћи вам да креирате чист дизајн.

Креирање Реацт компоненте за пријаву

Да бисте креирали нову компоненту у Реацт-у, једноставно идите до Реацт-ове срц фасцикле и креирајте нову фасциклу компоненте. Фасцикла компоненти може бити дом за све ваше компоненте, почевши од компоненте за пријављивање.

Повезан: Шта је РеацтЈС и за шта се може користити?

Датотека Сигнин.јс

импорт Реацт фром 'реацт';
фунцтион Сигнин() {
повратак (

);
}
екпорт дефаулт Сигнин;

Након креирања компоненте за пријављивање, време је да је повежете са Реацт апликацијом тако што ћете је увести у компоненту апликације (која се налази у фасцикли срц).

Ажурирана датотека Апп.јс

импорт Реацт фром 'реацт';
импорт Сигнин из './цомпонентс/Сигнин';
фунцтион Апп() {
повратак (






);
}
извоз подразумеване апликације;

Сада можете почети да истражујете МУИ компоненте које желите да користите на страници за пријаву.

Шта је типографска компонента?

Компонента типографије припада категорији приказа података МУИ-ја и има тринаест подразумеваних варијанти. Ови укључују:

• х1
• х2
• х3
• х4
• х5
• х6
• титл1
• титл2
• тело1
• тело2
• дугме
• Наслов
• оверлине

Варијанта коју изаберете треба да зависи од текста који желите да прикажете. На пример, ако желите да прикажете наслов, можете слободно да користите било коју од шест варијанти наслова у свом корисничком интерфејсу. Једноставно убаците варијанту проп и изабрану вредност у компоненту типографије.

Коришћење примера компоненте типографије

импорт Реацт фром 'реацт';
импорт Типограпхи фром '@муи/материал/Типограпхи';
фунцтион Сигнин() {
повратак (


 Пријавите се 



);
}
екпорт дефаулт Сигнин;

Важан закључак из кода изнад је да сваки пут када уметнете нову компоненту у свој кориснички интерфејс, такође ћете морати да је увезете на врх Реацт датотеке компоненте. Ажурирање компоненте за пријављивање са компонентом типографије (као што се види у коду изнад) ће произвести следећи излаз у вашем претраживачу:

Шта је компонента текстуалног поља?

Компонента текстуалног поља припада категорији уноса. Ова компонента има две једноставне функције; омогућава корисницима да уносе или уређују текст у корисничком интерфејсу. Компонента поља текста користи три варијанте, и то обрубљену, попуњену и стандардну, при чему је истакла варијанта подразумевана. Стога, ако желите да користите подразумевану компоненту текстуалног поља, не морате да укључите варијантни пропс. Компонента поља текста такође користи неколико других реквизита, укључујући ознаку, обавезно, тип, ид, онемогућено, итд.

Коришћење примера компоненте текстуалног поља

импорт Реацт фром 'реацт';
импорт ТектФиелд из '@муи/материал/ТектФиелд';
импорт Типограпхи фром '@муи/материал/Типограпхи';
фунцтион Сигнин() {
повратак (


 Пријавите се 
лабел="Е-маил адреса"
потребан
ид="е-пошта"
наме="е-маил"
/>
лабел="Лозинка"
потребан
ид="лозинка"
наме="лозинка"
типе="пассворд"
/>



);
}
екпорт дефаулт Сигнин;

Горњи код ће произвести следећи излаз у вашем претраживачу:

Као што име сугерише, компонента везе функционише на исти начин као и обична ЦСС веза. Спада у категорију навигације и има традиционалне хреф и таргет пропс. Поред тога, има боју, варијанту и подвучену подлогу.

Повезан: Како користити реквизите у РеацтЈС-у

Међутим, нема потребе да користите додатне реквизите осим ако не желите да ваша веза изгледа јединствено. На пример, подразумевана вредност подвученог пропа је „увек“, а друге две вредности које можете да доделите пропсу су „ноне“ и „ховер“.

Према томе, потребно је да укључите пропс за подвлачење у своју компоненту само када не желите да нема подвлачења или када желите да има стање лебдења.

заборави шифру?

Уметање кода изнад у постојећу компоненту за пријављивање ће произвести следећи излаз у вашем претраживачу:

Шта је компонента дугмета?

Компонента дугмета такође припада категорији уноса и придржава се опште функционалности дугмади, која преноси радње корисника вашој апликацији. Ова компонента користи једну од три варијанте (текстуална, садржана и контура), а свака варијанта се може појавити у једном од три стања — примарном, онемогућеном и повезаном.

Подразумевана варијанта компоненте дугмета је текст. Стога, ако желите садржано или оцртано дугме, мораћете да користите варијантни проп да бисте то назначили. Поред варијантног реквизита, компонента дугмета такође има обрађивач онцлицк и реквизит у боји—између осталог.

Коришћење примера компоненте дугмета

 Пријавите се

Уметање кода изнад у компоненту за пријављивање ажурираће ваш кориснички интерфејс тако да изгледа овако:

Сада имате интерактивно дугме које лебди када миш пређе преко њега. Али све компоненте су хоризонталне и не изгледа сјајно.

Шта је компонента кутије?

Тхебокцомпонент је управо оно што вам треба да организујете услужне компоненте (као што је компонента дугмета) у вашој Реацт апликацији. Компонента кутије користи анск проп, који има приступ свим својствима система (као што су висина и ширина) која су вам потребна да организујете компоненте у корисничком интерфејсу.

Коришћење примера компоненте кутије

импорт Реацт фром 'реацт';
импорт Линк фром '@муи/материал/Линк';
импорт ТектФиелд из '@муи/материал/ТектФиелд';
импорт Типограпхи фром '@муи/материал/Типограпхи';
импорт { Буттон, Бок } фром '@муи/материал';
фунцтион Сигнин() {
повратак (


ск={{
мој: 8,
приказ: 'флек',
флекДирецтион: 'колона',
алигнИтемс: 'центар',
}}>
 Пријавите се 
лабел="Е-маил адреса"
потребан
ид="е-пошта"
наме="е-маил"
маргин="нормал"
/>
лабел="Лозинка"
потребан
ид="лозинка"
наме="лозинка"
типе="пассворд"
маргин="нормал"
/>
хреф="#"
ск={{мр: 12, мб: 2}}
>
заборави шифру?

варијанта="садржана"
ск={{мт: 2}}
>
Пријавите се





);
}
екпорт дефаулт Сигнин;

Омотавањем компоненте бок-а око услужних компоненти (и коришћењем ск проп-а) у коду изнад, ефективно ћете креирати структуру флексибилне колоне. Горњи код ће произвести следећу страницу за пријаву Реацт у вашем претраживачу:

Шта је МУИ мрежна компонента?

Компонента мреже је још једна корисна компонента МУИ за учење. Спада у категорију изгледа МУИ-а и олакшава одзив. Омогућава програмеру да постигне респонзивни дизајн због свог система распореда од 12 колона. Овај систем распореда користи пет подразумеваних тачака прекида МУИ за креирање апликација које се прилагођавају било којој величини екрана. Ове тачке прекида укључују:

• кс (изузетно мали и почиње од 0пк)
• см (мало и почиње од 600 пиксела)
• доктор медицине (средњи и почиње од 900 пиксела)
• лг (велико и почиње од 1200 пиксела)
• кл (изузетно велико и почиње од 1536 пиксела)

Компонента МУИгрид ради на исти начин као и ЦСС флекбок својство по томе што има једносмерни систем родитељ-подређени заснован на два типа распореда — контејнер (родитељ) и ставке (подређени). Међутим, компонента МУИ мреже олакшава угнежђену мрежу, где ставка може бити и контејнер.

Истражите друге опције стила за РеацтЈС апликације

Овај чланак вас учи како да инсталирате и користите МУИ библиотеку у вашим Реацт апликацијама. Научите како да користите неке основне компоненте (као што је типографија) и неке од напреднијих структурних компоненти (као што је компонента кутије).

МУИ библиотека је једноставна за коришћење, ефикасна и одлично ради са Реацт апликацијама. Али то не значи да је то једина опција стила доступна за Реацт програмере. Ако правите Реацт апликацију, слободни сте да користите МУИ библиотеку или било који ЦСС оквир за стилизовање апликације.

Кадеисха Кеан (Објављено 33 чланка)

Кадеисха Кеан је програмер комплетног софтвера и писац технике/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производећи материјал који може лако да разуме сваки почетник у технологији. Она је страствена у писању, развоју занимљивог софтвера и путовању светом (кроз документарне филмове).

Више од Кадеисхе Кеан