Introduksjon til Material UI

Laget av Camilla Larsen

Agenda

Design libraries gir oss tilgang til ferdigbygde komponenter vi enkelt kan benytte
Hjelper med å holde en rød tråd igjennom et prosjekt.
Hele teamet kan benytte samme design og unngå forvirring
Hjelper oss å kode enda raskere

Material UI er en åpen og gratis React komponent bibliotek.

Material UI sine sider, tilbyr veldig grundig og oversiktlig dokumentasjon på hvordan deres bibliotek fungerer og hvordan man setter i gang.

Se litt rundt på Material UI sine sider, og finn en navigasjon, list og card som du skal benytte på siden din.
Husk å opprett det som components som du kan gjenbruke.

Box komponenten fra MUI, laget en ny div tagg for oss som default verdi, men vi kan også skifte det til for eksempel til en span tagg.
Fordelen ved bruk av box komponenten er at vi kan benytte xs props, som gjør det lettere med kjapp styling

Hjelper oss med å holde samme tekst styling gjennom hele prosjektet, samtidig som at vi kan følge SEO regler.
Vi henviser først til hvilken variant (styling)
Deretter til hvilken tagg som skal bli lest av (component)
Finnes flere forskjellige varianter (se neste slide)

Les og følg dokumentasjonen, slik at dere kan benytte material UI icons

https://mui.com/material-ui/material-icons/

Ved noe hjelp av slidene og det vi har gått igjennom nå, skal du sette opp en veldig enkel forside, som er responsiv på både mobil, ipad og desktop.
Her må du i tillegg, gjerne undersøke grid løsningen til Material UI for å løse det.

Vi kan tilpasse MUI theme koden til å passe vårt design, slik at hvert komponent vi bruker automatisk får riktig styling.

Vi kan endre den originale farge paletten, men vi kan også legge til våre egne farger.

Vi kan også tilpasse komponentene, slik som vist under.

Arbeidet du allerede har gjort hittil i forelesningen, trenger eget tema. Endre fargepaletten, teksten og komponentene til ditt eget design