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.

No ale tak, mamy labelkę, mamy wariant. No dobra, więc dodajemy kolejny status, wariant. No to jakbyśmy chcieli go dodać, to trzeba by było zrobić następujące rzeczy. Musielibyśmy dodać tutaj kolejny typ, więc załóżmy, że jakieś info, a nie, przepraszam, info już mamy, WARN. Do tego musimy oczywiście ten nasz komponent rozszerzyć, porozszerzać, więc już modyfikujemy UIComponent. Następnie wchodzimy w HTML. Tutaj musimy dodać nowego case'a. OK. I labelka, na szczęście labelki nie zmieniamy. No dobra, ale... Oczywiście to jest taki trochę prosty przykład, ale...

No bo pozbywamy się... Myślę, że labelkę możemy się w ogóle pozbyć od razu, right away. Bo wystarczy, że zrobimy coś takiego. ng-content? Tak jest. Tą labelkę. Przetakuję, siedzę cicho. Na razie wszystko wygląda dobrze. Potwierdzasz. Approve. Dobra, i ta labelka nam tu jest do niczego absolutnie niepotrzebna, bo możemy po prostu wrzucić tu zwykły tekst, bo to jest dokładnie to samo. Cyk, cyk, cyk, tekst jest. Sprawdźmy jeszcze. A zróbmy coś takiego, taką sztuczkę. Odwróci się, tadam, odwróciło się. Czyli ta struktura jest tutaj trzymana, więc to, co wepchniemy do tego ng-contentu i tutaj trzeba być lekko ostrożnym, jeśli tworzycie takie komponenty, które są potencjalnie rozszerzalne, bo tutaj można wrzucić dosłownie wszystko.

Czyli możemy też tutaj to w zasadzie obrapować batonem. I z tym trzeba uważać. No bo niekoniecznie ten button tutaj powinien być. Więc na poziomie selektorów można to bardzo ładnie ograć, tak żeby ten komponent był rozszerzalny, ale jednocześnie ograniczony do tego, jak chcecie, żeby on wyglądał. Więc z tym ng-contentem ostrożnie. No dobrze. I w zasadzie labelka... Czyżbyśmy mogli się pozbyć labelki? Możemy się pozbyć labelki, tylko trzeba ją oczywiście teraz usunąć, bo nie ma takiego atrybutu, który jest, no nie ma takiej dyrektywy, więc taki atrybut również nie istnieje. No dobrze.