Komponenty z żelaza. Pisz komponenty jak Google - Frontendowa Siłka

Jeden to jest labelka, drugi to jest wariant. Na UI wygląda to tak, że wariant to dodaje klasę CSS-ową, dodaje kolor, labelka dodaje content. Do tego mamy tutaj w HTML-u naszym taki switch, który po wariantach przelatuje i sprawdza jakieś tam ikonki. Więc znamy dany wariant, więc wiemy jaką ikonkę przyporządkować. Labelka, wariant, klasy. W CSS-ie niewiele się dzieje. Myślę, że nie ma potrzeby komentować. Jeśli chodzi o wywołanie takiego komponentu, to myślę, że też znane wszystkim syntax. O ile oczywiście pracujecie w Angularze. Przypominam, Frontendowa Siłka jest angularowa w zasadzie, więc czasami NX-owa.

Nie podoba mi się w tym, że musieliśmy zmodyfikować tutaj ten wariant. Jak to rozwiązać? Nie wiem, choć się domyślam. Tutaj na ratunek przychodzi nam kompozycja. No właśnie, i jak sobie pogrzebiecie w Githubie materiala, to znajdziecie tam parę fajnych rzeczy i jedną z tych fajnych rzeczy jest kompozycja. Co to znaczy? To znaczy, że jak jestem teraz na Githubie Angulara i jestem w komponencie Karta. I w karcie możecie znaleźć coś takiego, że w HTML-u jest tam ng-content, czyli teoretycznie do karty da się dodać wszystko, co chcemy. Ale dalej mamy coś takiego jak card-header.

Jest to element karty, który po prostu możemy umieścić w dowolnym miejscu, ale on ma zawsze określoną strukturę, czyli ma zawsze jakiś awatar. Ten awatar jest najczęściej po lewo. Mamy do tego jakiś title, mamy czasami subtitle i ewentualnie dalszy content. Mamy jeszcze tam jakieś inne rzeczy, typu jakieś obrazki w różnych wielkościach. Nieważne. Najważniejsze jest to, że te wszystkie elementy mają konkretne miejsce. Po prostu w szeregu mają się ustawić w odpowiednim miejscu. A to jest właśnie robione przez kompozycję. I dlatego material, jako UI-owa biblioteka, jest bardzo rozszerzalny. Czyli nie piszemy do Angulara, weźcie, dodajcie tutaj nowy input, bo potrzebujemy.

Ponieważ jeśli zerkniecie do kartów, tutaj do kart... To macie różne selekty. To jest po prostu sposób, w jaki Angular będzie chwytał te komponenty. Tutaj macie przykład zwykłego komponentu, czyli jeśli byście użyli tej dyrektywy jako HTML tag, a nie jako dyrektywa. A tutaj jest użycie tego jako dyrektywy. Nie będę wchodził dalej w szczegóły. Myślę, że tutaj temat dyrektyw jest całkiem nieźle pokryty przez Angular. Możemy też to pokazać. Co, w sensie te selektory? Na naszym przykładzie, żeby dwie opcje były. A, komponent, no tak, jasne. Dobrze, więc wchodzimy w takim razie, tutaj mamy UI icon i weźmy na start sukcesy.

I... I tyle. Więc jak dostaniecie na rozmowie rekrutacyjnej takie pytanie, jak zrobić rozszerzalny komponent, no to po obejrzeniu tego odcinka Miejmy nadzieję, ta odpowiedź przyjdzie wam naturalnie do głowy. Tak, a oczywiście polecam poszpiranie sobie po implementacji z Google'a, z Angular Materiala. Mają wzloty i upadki, czasami lepiej lub gorzej to wygląda, ale na pewno jest sporo miejsc do czerpania inspiracji. I to myślę, że dzisiaj na tyle. Zmęczyłeś się? Ja chciałem ci bardzo serdecznie podziękować za to, że to zdrajnowałeś. Zdrajnowałeś? Zdrajnowałeś? I am not fucking drunk.