Search…
🗂
Components - części składowe aplikacji
Na stronie Components znajdziesz zestaw wszystkich komponentów dostępnych w ramach Material UI. Abyś mógł łatwiej się w nich odnaleźć podzieliliśmy je na 6 sekcji, bazując na sposobie ich podziału w ramach lewego paska nawigacyjnego ze strony https://material-ui.com.

Jak korzystać z komponentów?

Pomimo, że wszystkie komponenty współdzielą jedną stronę sposób pracy z ich wykorzystaniem może się nieco różnić. Wynika to z podziału zgodnie z którym wśród komponentów możemy wyróżnić komponenty proste złożone i grupowe. Poniżej opisujemy, jak najwygodniej będzie Ci pracować z każdym z tych wariantów.

Komponenty proste (o małej liczbie wariantów)

Do tej kategorii zaliczyliśmy komponenty, w przypadku których możliwe jest przedstawienie wszystkich ich wariantów w ramach pojedynczej sekcji. Ich dodatkową cechą jest to, że same w sobie tworzą całość, czyli mogą być używane samodzielnie, bez łączenia ich w większe grupy. Przykład takich komponentów to: Avatar, Badge, Checkbox, Tooltip.
Wykorzystanie tego typu komponentów jest najprostsze, ponieważ jedyne co musisz zrobić, to skopiować komponent, który Cię interesuje oraz zmodyfikować jego podstawowe właściwości (tekst, ikonę, obrazek).

Przykład

Poniżej możesz zobaczyć przykład wykorzystania w ten sposób komponentu Button. Załóżmy, że naszym celem jest utworzenie wypełnionego dużego przycisku typu secondary z ikonką plusa po lewej stronie i napisem "Add to favorites". Kroki będą wyglądać następująco:
  1. 1.
    Skopiuj komponent, który chcesz użyć. W naszym przypadku będzie to button/contained/large/icon-left/secondary/default.
  2. 2.
    Z przytrzymanym klawiszem Ctrl/Cmd kliknij dwukrotnie na tekst i wprowadź nową wartość "Add to favorites". Zwróć uwagę, że przycisk automatycznie zwiększył swój rozmiar, aby dopasować się do nowej zawartości.
  3. 3.
    Przejdź do elementu ikonki i z wykorzystaniem funkcjonalności instance zmień ją na icons > content > add. Po zmianie komponentu kolor ikony wróci do wartości domyślnej. W związku z tym warto, abyś ponownie ustawił go na palette / secondary / contrastText.

Komponenty złożone (o dużej liczbie wariantów)

W tej kategorii znajdują się komponenty posiadające tak wiele wariantów, że zaprezentowanie ich wszystkich w ramach jednej sekcji byłoby możliwe, ale stanowiłyby duże utrudnienie w ich dalszym wykorzystaniu (ciężko jest wybrać właściwy komponent spośród 300 możliwości). W tym przypadku komponenty również mogą funkcjonować samodzielnie, bez łączenia ich w większe grupy. Przykłady takich komponentów to: TextField, Alert, Select.
W tym przypadku wykorzystanie komponentu również zaczyna się od skopiowania jego określonego wariantu. Tym razem jednak w ramach sklonowanego komponentu możesz odnaleźć dodatkowe komponenty zagnieżdżone, które domyślnie zostały ukryte. Dzięki ich odkrywaniu oraz modyfikacjom możesz tworzyć różne dodatkowe warianty.

Przykład

Aby lepiej wyjaśnić, jak to działa, posłużymy się przykładem komponentu TextField. Poza domyślną wersją może on posiadać ikonkę lub dodatkowy tekst znajdujący się na jego początku lub końcu. Na potrzeby przykładu załóżmy, że chcemy stworzyć TextField z ikonką po lewej stronie, dodatkowym tekstem na końcu oraz tekstem pomocniczym pod spodem. Kroki będą prezentowały się następująco:
  1. 1.
    Skopiuj komponent, który chcesz użyć. W naszym przypadku będzie to text-field/outlined/medium/primary/empty.
  2. 2.
    W lewym pasku nawigacji rozwiń maksymalnie sklonowany komponent, aby zobaczyć jego komponenty składowe. Zauważysz, że TextField posiada 4 niewidoczne komponenty: helper-text, prefix, suffix, oraz label-wrapper.
  3. 3.
    Przywróć widoczność elementu helper-text, dzięki czemu uzyskasz dodatkowy tekst pomocniczy. Zwróć uwagę, że za sprawą auto-layout'u komponent automatycznie zmienił swoją wysokość, aby uwzględnić w niej nowy element.
  4. 4.
    Przywróć widoczność elementu suffix. Powinieneś zobaczyć dodatkowy tekst znajdujący się na końcu TextField'a.
  5. 5.
    Ostatnim krokiem jest dodanie ikonki. W tym celu najpierw przywróć widoczność elementu prefix. Kiedy to zrobisz zauważysz, że zarówno prefix jak i suffix domyślnie ustawione są na dodatkowy tekst. Aby zamienić tekst na ikonę zaznacz komponent prefix i z wykorzystaniem funkcji zmiany instancji zmień "adornment" na "icon".

Komponenty grupowe

Komponenty, które nie mogą funkcjonować samodzielnie i wymagają łączenia ich w większe grupy. Przykładem takich komponentów są: List, ButtonGroup, Table, Stepper, AppBar.
W przypadku komponentów, które mogą występować jedynie w grupach każda sekcja zawiera pojedyncze elementy, z których możemy "poskładać" potrzebny nam komponent. W takiej sytuacji to do nas należy zadecydowanie, jak będzie wyglądała ostateczna grupa.

Przykład

Za przykład komponentu grupowego może posłużyć AppBar. Przechodząc do jego sekcji możesz zauważyć, że znajdują się tam wyłącznie komponenty składowe, z których możesz ułożyć ostateczną wersję AppBar'a. Załóżmy, że chcesz utworzyć prosty pasek nawigacyjny zawierający kolejno ikonkę menu, tytuł obecnej strony oraz ikonkę do rozwijania menu. Aby utworzyć taki komponent powinieneś:
  1. 1.
    Skopiować potrzebne komponenty: navigation-icon, title/normal, overflow-icon.
  2. 2.
    Poskładać komponenty w ostateczną wersję AppBar'a.
  3. 3.
    Utworzyć nowy master component, który będziesz wykorzystywał w swoich layoutach.
Więcej przykładów złożonych w całość komponentów grupowych możesz zobaczyć w ramach strony 🖼️ Frames.

Budowa sekcji z komponentem

Ten rozdział zawiera informacje o założeniach przyjętych podczas tworzenia Material UI Kit. Ich znajomość przyda Ci się, gdy będziesz chciał wprowadzać modyfikacje w ramach swojej kopii projektu. Niemniej jeśli zamierzasz korzystać z komponentów w niezmienionej formie, wiedza z tego rozdziału nie będzie Ci potrzebna.
Jak możesz zauważyć, pomimo różnic w typach komponentów każda sekcja ułożona jest w zbliżony sposób. Składają się na nią:

Nagłówek

Zawiera nazwę zestawu komponentów (odpowiadającej nazwie znajdującej się na stronie Material UI) oraz odniesienia do dokumentacji. Często odnajdziesz tam 2 linki, z których pierwszy prowadzić będzie do oficjalnej dokumentacji Material Design'u (dowiesz się stamtąd, kiedy i w jaki sposób korzystać z danego komponentu) a drugi do dokumentacji Material UI (dowiesz się dzięki niej, jakie są różne warianty komponentu oraz jakie interakcje może on obsługiwać). Czasami zobaczysz w sekcji wyłącznie link do strony Material UI. Wynika to z faktu, że Material UI poza komponentami zdefiniowanymi w obrębie Material Design'u posiada także zestaw swoich własnych komponentów stworzonych wedle tych samych standardów.

Master i Master Elements

Komponenty z kategorii Master stanowią bazę na podstawie, której możemy tworzyć finalne wersje różnych komponentów. Nie posiadają one cienia oraz korzystają ze specjalnej palety kolorystycznej, w której nazwy kolorów zapisywane są jako Docs / *. Dzięki nim możemy tworzyć (i modyfikować) komponenty kaskadowo.
Ideę kaskadowej modyfikacji najlepiej obrazuje przykład komponentu Button. Na początku definiujemy tam Master Elements, do których należą tekst, prawa ikonka oraz lewa ikonka - każde w 3 rozmiarach. Następnie z wykorzystaniem tych elementów tworzymy komponenty kategorii Master, dodając do układanki nowy podział na wariant (contained, outlined, text). Następnie na bazie komponentów Master tworzymy ostateczne wersje naszych przycisków, dodając do wcześniejszych właściwości kolor oraz stan.
Kaskadowość to podejście, w ramach którego tworzymy kolejne komponenty poprzez modyfikację stylów komponentów już istniejących. Każdy kolejny element w kaskadzie powinien mieć sprecyzowane wszystkie właściwości swojego rodzica oraz rozszerzać je o dodatkowe właściwości.
Aby lepiej ujrzeć kaskadę możemy zapisać te informacje w formie tabeli:
Typ
Rozmiar
Wariant
Kolor
Stan
Master Elements
Master
Button
Załóżmy teraz, że chciałbyś, aby niezależnie od wielkości przycisku użyty w nim font był równy temu, określonemu w motywie jako typography / button. Bez kaskadowości zapewnianej przez komponenty z kategorii Master musiałbyś edytować 162 komponenty przycisków (81 z małym tekstem i 81 z dużym tekstem). Dzięki podejściu kaskadowemu musisz edytować jedynie 2 komponenty: master/button/elements/text/large oraz master/button/elements/text/small.
Podsumowując
  1. 1.
    Master Elements wykorzystujemy do budowy komponentów kategorii Master. Na bazie komponentów Master tworzymy ostateczne wersje naszych komponentów.
  2. 2.
    Master i Master Elements nie powinny posiadać cieni i powinny korzystać z palety kolorystycznej Docs / *
  3. 3.
    Gdy chcesz modyfikować jakąkolwiek właściwość komponentu zmodyfikuj ją na jak najniższym poziomie kaskady.

Particles

Czasami napotykamy na sytuację, gdy nasz główny komponent występuje w wielu wariantach, ale mimo to jesteśmy w stanie napotkać w nim elementy, które nie są zależne od wariantu (wyglądają zawsze tak samo). Jako przykład takiego komponentu możemy wykorzystać Snackbar. Występuje on w 3 wariantach: tylko tekst, tekst z akcjami po prawej stronie, tekst z akcjami pod spodem. Niezależnie od wariantu jaki przyjmiemy, właściwości tekstu nie zmieniają się (tekst ma zawsze ten sam font, oraz kolor).
W tego typu sytuacji, aby uzyskać kaskadowość nie musimy odwoływać się do komponentów Master. Zamiast tego możemy skorzystać z innej kategorii komponentów o nazwie Particles.
Particles to w pełni ostylowane komponenty, które nie mogą być używane samodzielnie i zawsze są częścią większego komponentu.
Tak więc, w przypadku omawianego Snackbar'a tworzymy jeden komponent dla tekstu (snackbar/particle/message), a następnie wykorzystujemy go we wszystkich wariantach ostatecznego komponentu. Dzięki temu zyskujemy jeden punkt, z którego możemy modyfikować style wiadomości we wszystkich Snackbar'ach na raz.

Komponenty

Ostatnią i najczęściej również największą część każdej sekcji stanowią komponenty. Szczegóły dotyczące ich użycia omówiliśmy już na początku tej strony.
Last modified 1yr ago