Angular: Dynamiczne style i jednostki CSS

Angular 10+

0:00W poprzednich lekcjach stworzyć tutaj

0:02bardzo fajny taki interaktywny formularz gdzie tam się pojawiają elementy i

0:06zmieniają aczkolwiek jego wygląd jest taki dość surowy a sceptyczne

0:12może ktoś troszeczkę styl jak style dodawać w HTML u to już wiemy i klasy.

0:18Zobaczymy czy możemy tez tyle I klasy

0:20zmieniać dodawać także dynamicznie z pomocą Lara czy pismak tutaj piszą e-mail.

0:26Chciałbym np.

0:27żeby ten element pokazywał od razu temat poprawny czy nie w trakcie pisania czy

0:31musiał czekać aż klika tylko już od razu mi tak email wali

0:35i powiedz mi jeśli jest błąd no to chciałbym sobie tutaj ustalić

0:39że ten element Still że jego stylem mają być powiedzmy takie że border.

0:49Powiedzmy ma być.

0:52Importerów Boston.

0:59Powiedzmy red. Jeśli jest błąd.

1:01Zobaczymy jak to zadziała czy działać tak

1:03jak wcześniej po prostu przypisuje sobie wartość i jest czerwony.

1:07Super aczkolwiek w ten sposób to ja właściwie przypisuje to tak jakby

1:11cały atrybut gdybym chciał powiedzmy zrobić kilka z tym w ten sposób czyli

1:16Border bo to chciałem do tego jeszcze dodać powiedzmy sobie Bagram koło.

1:25Na przykład w ten sposób

1:27zobacz co się stanie jeśli zmienię tło właśnie jeśli zmienię tło.

1:34To kasuje podkreślenie jeśli zmienię podkreślenie kasuje tło więc

1:40już musiałem wszystkie style naraz wymienić.

1:42Jest na to lepszy sposób natomiast cały styl wymieniać.

1:46Zobaczmy styl jest obiektem.

1:50Czy nie musimy całego stylu wymieniać.

1:52Możemy wejść w konkretne style i zmienić tylko ten styl który chcemy.

1:57Uwagę na to że tutaj w CSS się piszemy to

2:00z myśliwcami w krypcie śnieg oznacza podejmowanie

2:05więc musimy po prostu wszystkie długie nazwy typu Border błoto itd Marcin itd

2:11musimy zamienić na Kammel CC czy na duże małe litery przeplatane zamiast myśliwców.

2:16Czyli spróbujmy wykazuje całkowicie styl w ten sposób.

2:22Wszystkie usunęły i ustaleń jeden styl

2:25Stalin Border bo to Kola był już mogę precyzyjnie określić tylko jeden styl np.

2:34czerwone i to jest inny styl np.

2:39Grand.

2:43Mogę to zrobić powiedzmy w ten sposób.

2:45I jak widzisz zmiana drugiego stylu nie zmienia.

2:481. Czy możemy precyzyjnie określać które

2:50chcemy sceny tyle zmienić nie niszcząc nie usuwając pozostałych.

2:55I teraz jak to możemy zrobić.

2:58Jeśli chciałbym w tym punkcie zmienić style to przestaję

3:03i nie piszę od razu wartości całego stylu tylko mogę tutaj po kropce Border bo to

3:12Anglia jest na tyle fajne że pozwala nam on nie tylko w ten sposób się dostać.

3:18Pozwala on nam zapisać to w oryginalny sposób czyli taki CSS z myśliwcami ja po

3:23prostu to koncertuje na wersję dla was kredytową i przypisuje to we właściwe

3:28miejsce więc akurat jest to bardzo fajna rzecz i tu wpisze nie red.

3:33Bo co to jest. Tutaj muszę coś kodowa kryptonim red.

3:36Nie ma takiej zmiennej red.

3:38Więc muszę tutaj robić np.

3:40String ciąg znaków czy tu jest całe wyrażenie.

3:45Którego wartość jest wartością jest String literki red.

3:51Zobaczmy jak to działa bo.

3:55Jest czerwone co jest fajne dzięki temu że mamy Aguilera.

4:00Dzięki temu że tutaj styl

4:02pokazywanie chyba tych bloków jest kontrolowane przez tą zmienną teraz

4:06to za każdym razem się przeklina kiwać przez wszystkie kroki.

4:09Mógł od razu ustawić pasek formatu i powiedziałam to dużo łatwiej testować

4:15tak czyli od razu to będzie cały czas dostępne.

4:18Super i teraz tak z każdą liderką jak tu piszemy to chcemy rywalizować.

4:24Jest poprawny i znowu można by funkcje zrobić tak samo jak update.

4:29Można by może być od razu tutaj więc ja zrobię na razie taką brzydką

4:33realizację sprawdzę czy mail RF jest powiedzmy długość jego.

4:42Większa też od 3 taka prosta nawigacja.

4:45Jeśli tak to czy czerwone a jak nie to zielone

4:50może jeśli odwrotnie jeśli mniejsze od trzech zobaczymy raz dwa trzy cztery.

4:58Czego tu brakuje.

4:59Jest to ten sam przykład spójrzmy wcześniej.

5:01Tutaj brakuje eventu.

5:03Jeśli my nie będzie eventu jeśli nie ma np.

5:06set time out i jeśli nie ma tutaj Impact albo klik no tego nie zrobi.

5:13Więc co musimy użyć tutaj jakiejś funkcji.

5:16Czyli zrobię sobie też import.

5:17Czyli na każdą zmianę

5:19tutaj stworzy jakąś funkcję update mail i zrobimy to realizację w środku tabeli.

5:29Tu mogę przekazać event target.

5:33I tu dostajemy teraz e-maila czyli e-mail jest.

5:37Nie tu.

5:38Tylko tu możemy od razu zaktualizować e-mail użytkownika.

5:44Jeśli co i jeśli teraz jego długość wydaje się zgadzać

5:49możemy to sprawdzić tutaj nie poprzez szefa tylko poprzez user kropka e-mail

5:55komentarz o tym że żeby akurat tutaj przekręt darował się

6:01musisz przez jakiś event dane wsadzić do modelu i dopiero możesz się pobrać się

6:05łączyć elementy przez szefa no też nie super zobaczmy czy prasie.

6:09Czy to działa.

6:11Zmiana e-maila zmienia model zmieni model.

6:16No to powinni zmienić się też kolor Gierek powinien zaktualizować na ekranie

6:20trzy literki i robi się zielone dwie literki jest czerwone wskażą literą.

6:26Możemy nie tylko tekst zmieniać chować elementy możemy też zmienić styl

6:30odpowiednio tutaj zależnie od tego co robimy.

6:34Ja więc wrócę tutaj formy na Folc żeby on

6:38dopiero pokazywał się wtedy kiedy będzie potrzebny i zmniejszy jedną rzecz

6:42powiedzmy że ten cały ten komunikat do góry był troszkę większy.

6:47Chciałem powiedzmy żeby on miał tutaj Still.

6:523 4 rem np.

6:55czy nie tylko REM i to będzie found sex rozmiar czcionki 4.

7:01I zobaczmy jak to wygląda.

7:06Są piszemy Bob i jest to dość duże

7:11jak ktoś tu jeszcze pisał więcej czyli Bob The Chance.

7:15No to jest tragedia to za dużo.

7:17Chciałbym żeby ten tekst dynamicznie zmniejszał się zależnie od długości życia

7:21jest za długi to robi się mniejsze co możemy z tym zrobić.

7:24Możemy stworzyć sobie tutaj wyrażenie czyli zamiast na sztywno pisać taki styl

7:29to ja to zamierzam sobie kredytowe nawiasem.

7:33Wartość tego stylu mieszkam tutaj

7:37i tutaj muszę zrobić skomplikowaną rzecz bo musiałbym od tych czterech jednostek

7:41odjąć jakąś wartość i na końcu do klatki jeszcze jednostkę bo pamiętaj że

7:48potrzebujemy jednostki więc musiałbym powiedzmy odniósł nam link

7:51by uzyskać jakiś procent powiedzmy czy gdzieś

7:57na 100 albo może na 10 jakiś taki bardzo skomplikowana formuła powstaje.

8:02Czyli chciałbym od 4 Romów odjąć jedną dziesiątą długości.

8:10I dodać jednostkę RM i zobaczymy czy to zadziała.

8:16Lub super.

8:24Pięknie teraz co to jest fajne to dokładnie jednostki na końcu.

8:28Więc co możemy zrobić zamiast okradać jednostkę.

8:31że my jesteśmy tutaj po tej stronie.

8:33Może być torem.

8:34Może być to m.

8:36Mogą być piksele mogą być nawet procenty

8:38gdy musiał piksele i powiedzmy zacząć od 40 pikseli i

8:43podejmować powiedzmy tutaj długość nie wiem razy 0.5 5.

8:55Też to działa też nie ma problemu możemy zmienić jednostkę na inną np.

8:59na Mr Remy i zrobić sobie jakieś inne

9:03bardzo skomplikowane wyliczenia w Teksasie i to dla różnych jednostek tak muszą

9:08zdobyć te marginesu fryzjerów czcionek parkingów.

9:11Wszystko co ma jednostkę powinno nam to ładnie działać.

9:18Czyli jak widzisz bardzo fajnie nam to działa.

9:21Możemy dynamicznie ustawiać style które związane są z konkretnymi wartościami.

9:25Możemy też bardzo łatwo ustawić im dowolne jednostki.

9:28Możemy malarze także modyfikować

9:30dynamicznie klasy CSS owe ale o tym już w kolejnej lekcji.