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

Siemaneczko, Frontendowe Świry. Witamy Was na Frontendowej Siłce. Ja nazywam się Aleksander Lubych. Ja nazywam się Jakub Pawlak. Lecimy! Dzisiaj będziemy dalej wchodzić w temat naszego projektu, a zajmiemy się dzisiaj naszym UI-komponentem, który rozpoczęliśmy w ostatnim odcinku. No i co będziemy robić? Mamy taki prosty budge, mamy taki prosty status component i pojawiło się wymaganie, że mamy dodać nowy status. No dobra, no to co byśmy zrobili tak by default? Zapewne to wygląda dla Was znajomo, czyli mamy jakieś dwa inputy. Jestem teraz aktualnie w UI komponencie, mam dwa inputy.

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.

I z wariantem w zasadzie jest bardzo analogiczna sytuacja, ponieważ tutaj wariant, ja wprowadziłem nowy wariant, więc nadal, żeby ten komponent był w pełni Pisz komponenty jak Google-Frontendowa Siłka. No, musisz mi trochę więcej dzisiaj pomagać, bo ja tutaj odwalam całą robotę, ja się zmęczę, a ty się nawet nie spocisz. Możemy oczywiście to zamienić na dyrektywę. I w ten sposób... SuccessVariant, wszystko spoko.

Widzisz, jak jestem zmęczony? Ledwo mówię. No, zmęczył cię ten temat. Widzę, widzę, widzę. Dlatego następna Frontendowa Siłka będzie trener. Ja jestem wtedy na urlopie. Nie ma upierdalania się. Nie masz opcji. Nie ma, nie ma tak. Dobra, do zobaczenia w kolejnym odcinku Frontendowej Siłki albo Subiektywnego Frontendu. Do zobaczenia.