Next.js 13 w Praktyce: Stylowanie formularza
Projekt aplikacji SaaS
8 godz. 8 min · Next.js · Full-stack i Programowanie
Daniel NoworytaFull stack DeveloperCzego się nauczysz
- Pełne zrozumienie architektury i możliwości frameworka Next.js
- Zdolność tworzenia bezpiecznej autoryzacji i autentykacji z Clerk
- Efektywne zarządzanie danymi za pomocą Prismy i PostgreSQL na DigitalOcean
- Umiejętność budowania intuicyjnej nawigacji za pomocą routingu Next.js
- Umiejętność wdrożenia aplikacji na Vercel
- Dogłębne zrozumienie zarządzania stanem i wykorzystywania server actions
Autoryzacja i autentykacja z Clerk
Naucz się tworzyć bezpieczne systemy uwierzytelniania i autoryzacji, korzystając z Clerk. Pokażę Ci, jak to robić krok po kroku, aby Twoje aplikacje były bezpieczne i profesjonalne.
Integracja z bazą danych za pomocą Prismy
Zrozumiesz, jak skutecznie i bezboleśnie połączyć swoją aplikację Next.js z bazą danych PostgreSQL na DigitalOcean. Pokażę Ci, jak używać Prismy, aby ułatwić ten proces.
Routing i nawigacja
Dowiesz się, jak zarządzać routingiem i nawigacją w swojej aplikacji, aby użytkownicy mogli łatwo i intuicyjnie poruszać się po Twojej stronie.
Deployment na Vercel
Pokażę Ci, jak z łatwością wdrożyć swoją aplikację na Vercel, jednym z najpopularniejszych środowisk hostingowych dla aplikacji Next.js.
Zarządzanie stanem i server actions
Nauczysz się zarządzać stanem aplikacji i jak wykorzystać server actions w praktyce, co pozwoli Ci na tworzenie bardziej zaawansowanych i dynamicznych funkcji.
Dla kogo jest ten kurs?
Ten kurs jest dla osób, które już mają pewne doświadczenie z JavaScript i chcą zgłębić swoje zrozumienie Next.js. Zakładamy, że znasz podstawy TypeScript, TailwindCSS, ale nie potrzebujesz doświadczenia z Next.js - wszystko wyjaśnię Ci od podstaw!
Teraz, kiedy mamy już nasz Moka przy MOK przeniesiony
na kod, zajmijmy się wystylizować tego formularza w taki sposób,
żeby to wyglądało w miarę podobnie do tego co mamy tutaj na naszym screenie.
Przejdźmy do naszego edytora kodu.
Zostawmy na żywo podgląd tutaj po prawej
stronie i zaczniemy sobie edycję naszych komponentów.
Otóż jeżeli chodzi o te dwa importy, no to widzimy, że label
musimy na pewno przenieść do góry, tak jak to mamy tutaj.
Natomiast nad naszym input mamy tu jakąś ekstra gwiazdkę.
Czyli zacznijmy powoli.
Zacznijmy od wystylizowana tutaj jednego
elementu, bo tak naprawdę jeżeli uda nam się wystylizować poprawnie ten element, to
bardzo dużo tych importów ma bardzo podobne style.
Będziemy mogli sobie to prawdopodobnie
używać Później także zajmiemy się najpierw tym jednym elementem, żeby.
Móc. Przenieść label do góry i żeby móc tak
naprawdę tą czerwoną gwiazdkę też zastosować.
Czyli mamy tutaj nasz pierwszy element. Mamy.
Label i mamy nasz input na nazwę naszej subskrypcji.
Zacznijmy sobie od sterowania naszego
label Class name i tutaj sobie zrobimy padding bottom na 2 ustawimy.
Jeżeli chodzi o
tekst, który ustawimy na mniejszy niż nam się to powinno troszeczkę zmniejszyć.
Jeżeli chodzi o kolor tekstu to też mamy zdecydowanie inny kolor tekstu.
Niech to będzie desing 600.
Na chwilę obecną mamy to już zmniejszone.
Teraz jeżeli chodzi o te dwa elementy to
na pewno musimy tutaj zastosować jakiś wrapper z tego względu, że po pierwsze
do tego nam musimy sobie dorobić ikonkę, więc możemy sobie tutaj wstawić.
Ja znalazłem w internecie na Hiro na remix Icons.
Jakiej klasy tej musimy tutaj użyć to będzie Eri i dalej będziemy mieli Star.
Fill.
I tutaj padding bottom możemy sobie zrobić na 2 text ustawimy sobie bardzo mały i
chcemy zmniejszyć tą gwiazdkę na 6 pikseli.
I. Text red zróbmy sobie 700.
W tym momencie pojawia nam się gwiazdka.
Natomiast oczywiście
ten label musiałby mieć tutaj jakieś dodatkowe style, żebyśmy mogli
tak naprawdę wyśrodkować ten tekst, tą gwiazdkę.
Czyli możemy sobie przejść do naszego Labana.
Spróbujemy nadać tutaj Flex.
Flex.
Items Center i pomiędzy tymi tematami ustawimy sobie na dwójkę.
No bo dwa piksele jeszcze mniej tak naprawdę.
No już mamy tak naprawdę ustawiony tutaj ten widok.
Sprawdźmy sobie jeszcze nasz mózg.
No i czcionka jest dużo cieńsza, także możemy sobie tak wrzucić.
Jeżeli chodzi o Font Little.
W naszą stronę już wygląda to dużo lepiej.
Dobrze, to mamy nasz label.
Jeżeli chodzi o ten
odstęp tutaj od naszego importu, no to musimy sobie to też tutaj
wszystko wystylizować, tak że zaczniemy teraz stylizować nasz import.
Jeżeli chodzi o import, no to zaczniemy tutaj od klas name.
I tak zaczniemy od tego, że
chcemy go wyświetlać, blokować, chcemy, żeby miał full.
Mamy już teraz pełną szerokość naszego rapera.
Jeżeli chodzi o kolejne rzeczy, które by nam się przydały na tym imporcie.
No to chcemy rundę i zrobimy rank na medium, żeby był zaokrąglony.
Jeżeli chodzi o border to zrobimy sobie 0.
Jeżeli chodzi o BG to zrobiłem sobie link. I.
Niech będzie 200 żeby to troszkę wyróżniać.
Całej reszty już pokazał ten input.
Jeżeli chodzi o kolejne rzeczy czyli p i x 2 ustalimy sobie.
P y. Też na 2.
Czyli możemy sobie zrobić pena 2, ustawić padding na dwójkę tekst niech będzie small
text, niech będzie link i wybierzemy sobie kolor może z 900 800.
Zobaczmy. Na chwilę obecną to będzie wyglądać.
Jest ok. Myślę dodatkowo.
Kolejna rzecz, którą się musimy zająć.
No to outline.
Chcemy wyłączyć outline, który jest domyślnie.
Teraz jak sobie tabulacji przechodzę, to nie mam żadnego okleina niebieskiego.
Widzisz, następny input ma ten odcień niebieski, natomiast shift
shift to przepraszam, tutaj już tego outline u nie mamy.
My sobie ustawimy nasz custom outline,
czyli zrobimy sobie ring jeden, do tego ring insert zapiszemy, już mamy ring.
Natomiast cały czas ten kolor mamy domyślny, taki jaki jest w przeglądarce.
Dlatego możemy sobie zrobić ring ring.
I ustawić kolor na 300.
Zapiszemy sobie.
Dodatkowo możemy sobie zrobić plays holder.
Tutaj wystylizować.
Zobaczmy czy mamy jakieś play. Tak powinno być.
Subskrypcje.
Czyli możemy sobie przejść do naszego kodu i tutaj wpisać Please holder subskrypcję.
Już w tym momencie powinniśmy mieć plan folder na naszym pustym imporcie.
Mamy i teraz możemy sobie ten plan troszeczkę wystylizować, czyli Play Sword.
I tutaj zrobimy sobie kolor.
Tekst z img.
Zróbmy na 400.
Już tam się to troszeczkę zmieniło.
Jeżeli chodzi o kolejną rzecz zrobimy sobie fokus styl.
Zrobimy sobie ring.
Może na dwójkę, żeby troszeczkę był bardziej widoczny.
Czyli na Focusie widzisz, że jak przejdę
na inny to mamy ten ring taki jedno pixel owy.
Natomiast jak wrócę shift tab to jeszcze obrączka jest dużo większa.
Jeżeli chodzi o Fokus Ring zrobimy sobie insert no i kolor Fokus Ring.
Chciałbym sobie tutaj ustalić.
Na ring.
950, żeby jednak
usuwane pole było bardziej widoczne, że akurat to jest aktywne pole.
Teraz mamy. Taki.
Fajny kolor ciemniejszy. Dobrze.
Mamy nasz pierwszy input tak naprawdę wystylizowany i teraz
możnaby się zastanowić nad tym, żeby sobie wyciągnąć tak naprawdę ten class name.
Bo z tego co widzę, to on tak naprawdę
będzie się powtarzał tutaj we wszystkich naszych komputerach.
Zróbmy sobie na razie coś takiego, że
spróbujemy po prostu skopiować tę klasę do wszystkich naszych elementów.
Sprawdzimy jak to wszystko się będzie nam tutaj układało.
Czyli wlasnym na kategorie też sobie tutaj wrzucimy.
Jeżeli chodzi o wartość do laba wrzucimy i do środka.
Mamy kategorie już tak samo wystylizowane.
Jeżeli chodzi o klasy to input wrzucimy tutaj na nasz select.
Sprawdzimy czy rzeczywiście możemy zastosować tak naprawdę te same style.
No generalnie rzecz biorąc nie wygląda to tak tragicznie.
Będziemy musieli tutaj sobie popracować nad tym.
Natomiast przejdźmy do następnych, następnych importów.
Myślę, że takie podejście jest ok z tego względu, że później widzimy, czy
rzeczywiście możemy sobie wyeksportować jeden komponent.
To działa w każdym przypadku.
Jeżeli nie, to możemy się potem zastanowić, w jaki sposób można ograć to
jednym komponentem, który może będziemy przekazywać jakieś propsy.
W zależności od tego jaki typ komponentu będzie, to taki styl sobie przyjmie.
Także przejdźmy teraz do kolejnego komponentu.
Mamy tutaj avatar URL.
Sprawdźmy nasz design, naszą firmę.
I tutaj mamy mamy tylko.
Tak naprawdę to nie jest MasterChef Pole, czyli nie potrzebujemy tej gwiazdki.
No ale tutaj też będzie się dużo rzeczy różniło.
Natomiast jako bazowy styl możemy sobie też wkleić to, co mamy tutaj avatar URL.
Jeżeli chodzi o nasz label to też możemy
sobie jak najbardziej skopiować ten class name.
Myślę, że powinno to sprawić, że będzie to wyglądało podobnie.
Cała reszta jest ok.
Następnie ten tekst tutaj, tekst tutaj też musimy sobie wystylizować.
To jest nasze normalne p.
Czyli tutaj przejdźmy do klas. No i tutaj.
Potrzebujemy kilka rzeczy padding top
ustawimy sobie, usuniemy ten tak troszeczkę tego input.
Dodatkowo tekst zrobimy sobie na 10 pixeli.
Gdyby to był dosyć mały tekst.
Jeżeli chodzi o font to chcemy lite.
I jeżeli chodzi o kolor to text desing zróbmy sobie na 700 troszeczkę wyblakły.
Zapiszemy sobie te informacje.
No już ten napis wygląda myślę dużo bliżej tego co mamy na naszym designie.
Dobrze, Kolejna rzecz to mamy ekspansję information cost, czyli tutaj
też możemy posłużyć się tak naprawdę jeżeli chodzi o input to naszym stylem.
Jeżeli chodzi o label to też możemy sobie
skopiować ten styl i wkleić sobie do tego laba.
Sprawdzimy sobie jak to wszystko wygląda.
Koszt też musi być.
Jest polem wymaganym dla tego będziemy potrzebowali naszą ikonkę.
Tutaj pod słowem cost mamy, że to jest pole wymagane.
Dodatkowo jeżeli chodzi o selection to też tutaj sobie zrobimy.
Na razie styl to takie bazowe, które mamy.
Myślę, że na chwilę obecną jest ok.
Za chwilkę rysujemy tutaj. Ten.
Impuls tym kosztem i z selected na końcu.
Dodatkowo kolejna rzecz którą potrzebujemy to kolejny tutaj label.
Musimy sobie wystylizować.
Mamy klasę.
Label tutaj.
I mamy style nasz Select.
Czyli w tym miejscu.
No i next payment też możemy od razu na input wrzucić nasze style.
Zapiszemy to sobie. No już ten import wygląda dużo lepiej i
jeżeli chodzi o label to też możemy sobie skopiować style z naszych tabeli powyżej.
Za chwilkę sprawdzimy jak możemy to sobie wszystko pogrupować.
Fajnie.
Jeżeli chodzi o te batony na dole, toteż zajmijmy się teraz nimi sterowaniem.
Tych batonów potrzebujemy, żeby generalnie
one wyglądały inaczej, bo na naszym naszym designie.
Jeżeli spojrzymy na to jednak te batony są.
Cancel jest troszeczkę mniej widoczny niż ten niosą skrypty.
Dlatego teraz zajmiemy się tym tymi stylami.
Przejdźmy najpierw do tego guzika.
On Cancel i.
Class name i zaczniemy sobie pisać style.
Czyli Flex full.
Zrobimy.
Chcemy żeby była cała szerokość
Items Center jeżeli chodzi o czas i fit też sobie
zrobimy Center round i chcemy żeby ten guzik był dosyć bardzo zaokrąglony.
Jeżeli chodzi o border to myślę, że możemy sobie zrobić customowe
border jedno pixel, bo 2 opisowe będzie jednak troszeczkę za duże w naszym
przypadku pisać naszego komponentu żeby to zobaczyć.
Już mamy guzik Cancel zaczyna przybierać jakiś wygląd.
Jeżeli chodzi o kolor border to link i zróbmy sobie farbę 500.
Jeżeli chodzi o X ustawiłem sobie. Na.
4, y też na 4 to zróbmy sobie po prostu PN 4.
Zapiszemy to sobie.
Już jest troszkę większy ten baton.
Teraz font zrobimy sobie na medium.
Ten napis cancel był bardziej widoczny leading non.
Tutaj mamy po prostu line height ustalamy
na troszkę mniejszy, żeby troszkę zmniejszyć ten button.
To samo moglibyśmy zrobić tutaj grając padding.
Natomiast możemy sobie globalnie ustawić mniejszy line height.
I tekst.
Z link 500 już sobie ustawiliśmy. Myślę, że jest ok.
To jak to teraz wygląda?
Oczywiście też będziemy musieli
prawdopodobnie sobie ten button odsunąć od całej reszty.
Natomiast najpierw, teraz przejdźmy do tego batona Class Name.
I tutaj zaczniemy od. Flex.
Fuel.
Podobnie jak w poprzednim Items Center czas i też Center.
Podobnie jak poprzednim Round Algi, tak.
To są style, które się nie zmieniają.
Bedzie leasing i tu będziemy potrzebować doping.
Zróbmy sobie 900 na chwilę obecną.
Jeżeli chodzi o PX y ustawimy też podobnie jak w poprzednim guziku.
Font na medium.
I leading man.
Żeby znowu zmniejszyć trochę wielkość.
Linii i tekst.
Musimy sobie ustawić na 50 albo zróbmy sobie 100.
To nie będzie różnica.
Tak, mamy dwa guziki już cancel i add.
Wniosek 1.
Widzisz, że te dwa guziki tak naprawdę różnią się tylko i wyłącznie tymi stylami?
Czyli prawdopodobnie moglibyśmy sobie wyciągnąć te dwa guziki.
Jako że korzystamy z tego podobnego stylu, tutaj można byłoby zrobić button jako
komponent globalny, którą przekazujemy secondary primary.
I.
W zależności od tego ustawiamy sobie tutaj odpowiednie kolory, kolor i kolor tekstu.
Myślę, że jest to jak najbardziej do zrobienia, natomiast zostawię to jako
zadanie domowe dla Ciebie do dalszego rozwoju tej aplikacji.
Jeżeli chodzi o to jak te guziki od Ciebie odsunąć, to myślę, że możemy sobie je
tutaj zamknąć w papierze, bo póki co nie mamy.
One i tak muszą być tak naprawdę koło
siebie cały czas, tak że zamkniemy je w jednym drzewie.
I tutaj class. Name.
Ustawimy sobie na flex flex. Call.
I czas Safari Center. I cap.
Na 4 możemy sobie też zapiszemy.
Odnośnie powinno Cię odsunąć jeżeli chodzi o odstępy od całej reszty też możemy sobie
tutaj jak najbardziej margin top ustawić na 10 i to też pozwoli nam odsunąć
te guziki od całej reszty naszego formularza.
Przejdźmy teraz do sterowania tych
importów, żeby one były też jakby tutaj w jednej linijce.
Bo jeżeli chodzi o name. I.
Category mamy to w jednej linijce.
Później website jest też importem, który jest w jednej linijce.
Czyli przejdźmy do naszego edytora kodu i zobaczmy gdzie są dwa.
Pierwsze importy mamy tutaj.
Nasz label, nasz input.
I tutaj mamy drugi label i drugi.
Input.
Typu select.
Czyli te dwie rzeczy chcielibyśmy zamknąć w jednym kontenerze.
Czyli najpierw robimy sobie globalny kontener na na dwie
rzeczy Możemy jest to swobodnie do środka przenieść.
I. Zapiszę.
I teraz w tym momencie potrzebujemy tak
naprawdę zamknąć sobie ten label i ten input też w jeden kontener.
Natomiast ten główny kontener tutaj u góry.
Też.
Musimy powiedzieć, że musi być ustawiony na class.
Name Flex.
Items Center.
I ustawimy sobie na 4.
Pomiędzy tymi cenami to nam się zmieniło wyświetlanie.
Natomiast teraz musimy przeskoczyć do pojedynczych importów tak żeby ten label
wskoczył do góry i ten po prostu przeskoczył na dół.
W jaki sposób to zrobimy?
Oczywiście możemy rapować pojedyncze impulsy tutaj w kolejny wrapper.
Kolejny div i tutaj. Class.
Name.
Możemy sobie ustawić na flex.
Tak naprawdę nawet nie musimy, bo
wystarczy nam, że ustawimy jedna druga i powinno to już zrobić nam całą robotę.
Tak, myślę, że to samo musimy zrobić z tym importem.
Czyli tutaj też robimy sobie komponent div.
I wstrzykuje to wszystko do środka klasy VIP.
Jedną, drugą
zapisujemy sobie i już mamy tak naprawdę wygląd bardzo zbliżony do tego.
Mi się nie podobają jeszcze.
Odstępy mamy dużo mniejsze pomiędzy label a input.
Czyli przejdźmy do naszego komponentu. Zobaczymy.
U nas te odstępy są dużo większe i sprawdźmy co jest za to odpowiedzialne.
Gap mamy ok.
Padding bottom tutaj mamy ustawione na 2.
Myślę, że ten padding bo to możemy sobie spokojnie tutaj
wykasować i w tym labelu też sobie kasujemy padding bottom dwójkę
na 0 i już mamy bardziej zbliżone to do tego co widzimy.
Na.
Okapie, który dostarczył nam nasz designer.
Przejdźmy teraz do zmiany tych dwóch napisów,
bo na razie nie wyglądają one poprawnie tak jak powinny, czyli ten title
tutaj w naszym przypadku musimy sobie wystylizować zdecydowanie w inny sposób.
I tak zaczniemy. Klasycznym.
I w tym przypadku potrzebujemy tekst.
2 XL powinno nam powiększyć już ten napis i font.
Zróbmy sobie medium.
Myślę, że jest ok na chwilę obecną.
Teraz jeżeli chodzi o description do name tutaj też możemy sobie
odsunąć ten description od całej reszty naszego formularza.
Generalnie tutaj jest większa przerwa, czyli przejdźmy sobie tutaj zrobimy.
Zaczniemy od margin bottom na 4.
Powinno to odsunąć nam od całej reszty jeżeli chodzi o wygląd tego tekstu.
Margin top też możemy ustawić na 5, żeby odsunąć ten tekst od głównego tytułu.
Jeżeli chodzi o font, to
myślę, że medium tutaj jak najbardziej zrobi robotę i bleeding.
Zrobimy normal żeby troszeczkę zmniejszyć jednak wielkość tej lini.
I. Tekst możemy pozostawić, to tak naprawdę
leading też tutaj nie ma wielkiego znaczenia, bo daliśmy sobie marginesy,
także możemy sobie to jak najbardziej usunąć i to nie będzie
miało żadnego wpływu na wygląd naszego formularza.
I tę. Klasę, którą mamy.
To możemy sobie tak naprawdę przenieść we wszystkie.
Dialog description.
Które używamy w tym formularzu i powinno
tak naprawdę to też zmienić wygląd na taki, jaki byśmy chcieli.
Jeżeli chodzi o wszystkie napisy.
Tak, ocenialiśmy te rzeczy od siebie.
Jest to jak najbardziej zabieg, którego pożądamy w tym przypadku,
bo wszystko to ma być usunięte mniej więcej na tę samą odległość.
Teraz przejdźmy do rysowania następnych komponentów naszego formularza.
Ja sobie troszeczkę to to okno tutaj
większe, żebyśmy mieli trochę większe i więcej tekstu.
Jak widzisz wszystko tutaj używając cały CSS.
Zaczynają się nam powtarzać style, dlatego
prawdopodobnie będziemy musieli zrobić to jakiś faktoring, żeby też łatwiej.
Było. Utrzymywać tą aplikację.
Natomiast jako faktor zostawiam to Tobie jako zadanie domowe.
Myślę, że podobne komponenty jak importy,
którym style się powtarzają warto byłoby sobie wyciągnąć na osobny komponent i
zrobić to tak, żeby łatwiej było Ci utrzymywać tą aplikację.
Natomiast wróćmy teraz do naszych styli.
I tutaj kolejna rzecz, na której musimy
się skupić to ten avatar URL, który musimy rysować.
Przejdźmy sobie. Mamy nasz General Information.
Mamy pierwszą grupę
naszych importów, która już wygląda dobrze, którą się zajęliśmy.
I teraz przejdźmy do kolejnej grupy, czyli ten avatar URL.
Tutaj potrzebujemy kilku rzeczy.
Zdecydowanie.
Póki co tak naprawdę nie mamy żadnego
tutaj przedrostka http, dlatego będziemy musieli sobie skorzystać
z jakiegoś custom owego rozwiązania i myślę, że
dobrze byłoby sobie jako ćwiczenie zbudować po prostu taki taki import.
Dlatego teraz możemy sobie spokojnie tutaj zacząć od budowy tego.
Zaczniemy od tego, że input tutaj
zamkniemy customowe wrapper i tutaj skorzystamy sobie z triku z
absolutnego pozycjonowania naszych elementów.
Czyli musimy sobie najpierw
nałożyć wrapper relatywny na nasz input, gdzie wpisujemy adres URL naszego avatara.
I tutaj zaczniemy od nadania klasycznym relative.
I tak naprawdę jeżeli chodzi o klasę Relative to jest tyle.
Dodatkowo tutaj do importu będziemy
potrzebowali nasz customowe elementy czyli div.
I tutaj class name i potrzebujemy klasy Absolut.
Musimy sobie ustawić to na insert.
Jeżeli chodzi o Y.
Po 0 left na 0 i flex. I.
Items center sobie ustawimy co chcemy mieć tutaj.
My chcemy mieć tak naprawdę ten napis.
Potrzebujemy napisu https.
I.
Dwukropek i slash.
Zróbmy sobie.
Tutaj w naszym w naszym kodzie, czyli https dwukropek slash.
Sprawdźmy sobie jak to już teraz wygląda.
Mamy tutaj coś się pojawiło.
Teraz musimy zadbać o to, żeby ten napis miał odpowiednie tło.
I tak naprawdę, żeby to się odróżniało od całości.
Czyli jeżeli spojrzymy na design, to ten
napis tutaj ma dużo ciemniejsze tło niż cała reszta.
Czyli możemy sobie zacząć od tego, żeby
widzieć tak naprawdę, gdzie jest nasz element.
Przejdźmy do kodu.
I tak mamy nasz customowe elementy jeżeli chodzi o Round big Leasing.
Zróbmy na razie napięcie, sprawdźmy jak to będzie wyglądało.
Troszeczkę jednak za ciemny.
400 jest ok.
Potrzebujemy jeszcze padding sobie ustawić na ten element.
Czyli padding ustalamy na 2.
No i już mamy taki
zalążek tego, jak to powinno wyglądać, jeżeli chodzi o Corner Realm.
Musimy też wrzucić.
Rondel.
Medium mieliśmy.
Natomiast problem z tym, że mamy tutaj po
prawej stronie zaokrąglenie, którego oczywiście nie chcemy.
Teraz musimy sobie z nim poradzić.
I tutaj z pomocą przychodzi nam klasa
Stali, więc możemy ustawić, że po prawej stronie nic.
My, czyli Randy R.
I on.
Zapiszemy to sobie.
No i już tutaj po prawej stronie nie mamy żadnego zaokrąglenia.
Teraz jest ten problem.
Jak widzisz ja coś wpisuję, to jest wszystko pod spodem.
Dlatego teraz musimy to
tak naprawdę usunąć ten input i możemy to zrobić dwojako.
Możemy nam dać padding, co też nie będzie złym rozwiązaniem.
Jeżeli to ma być jakieś customowe rozwiązanie
to myślę, że jest jak najbardziej ok i dodamy teraz na lewą stronę pady i
sprawdzimy w jaki sposób będzie to wyglądało.
Oczywiście prawdopodobnie też będziemy
musieli sobie tutaj zastosować nasz player holder, którego obecnie nie
mamy, a w designie jest class holder jako google.com.
Czyli wróćmy do naszej.
Do naszego kodu ustawił sobie folder google.com.
I teraz jak już mamy podgląd na to jak
wygląda play folder widzi, że jest to jednak przesunięte.
Ja sobie to przesunę w lewą stronę, żeby cały czas widzieć podgląd na to.
I musimy sobie tak naprawdę jeżeli chodzi
o Please holder ustawić odpowiedni padding na lewą stronę i zaczniemy od 5.
Troszkę nam się to przesunęło, natomiast jest to za mały padding.
Zaczniemy od 0 dziesiątkę jeszcze jest za mały 20.
Tutaj jednak wartość 20 będzie najlepszym rozwiązaniem.
W naszym przypadku możemy to tak jak najbardziej zostawić.
Tutaj użytkownik wie, że ma po prostu dopisać kawałek adresu.
My w naszej logice będziemy musieli dostosować tą logikę do tego, żeby z tego
kawałka stworzyć odpowiedni adres URL użytkownika.
Kolejna rzecz, którą musimy zrobić to oscylować.
Podobnie ten komponent to będzie podobna trudność, bo jeżeli sobie przejdziemy,
zobaczymy nasz design, to ten selektor powinien być na końcu umiejscowiony.
Czyli podobna zasada, którą mieliśmy tutaj
możemy sobie wykorzystać pozycjonowanie absolutne
i do tego dodatkowo jeszcze przyda się fajna funkcjonalność związana.
Właśnie starłem CSS, która pozwala Ci
wyłączyć domyślne scrollowania input w przeglądarce.
To jeżeli teraz sobie przejdę i przejdę na
ten select i wpiszę sobie non zobacz, że select tak naprawdę traci
ten szablon, który mieliśmy na końcu i tak naprawdę o to nam chodzi, bo
w naszym designie tak naprawdę nie ma nic powiedziane o naszym Chevron.
Myślę, że możemy jak najbardziej sobie ten Chevron D aktualizować, czyli wyłączyć i
przejdźmy do naszego kodu jeszcze raz tutaj.
I zajmijmy się teraz budowaniem tego.
Mamy tutaj input i select.
Potrzebujemy znowu jakiegoś rapera, który będzie pozycjonowanie relatywnie, żebyśmy
mogli sobie te dwie rzeczy tutaj wsadzić, czyli klas name relative.
No i tutaj do środka możemy sobie wrzucić
póki co nasz select i nasz input to będzie już rzucona w jednego diva.
Sprawdźmy jak to będzie wyglądało. Mamy.
Tak naprawdę widok się nie zmienił.
Teraz możemy sobie złapać nasz select
i jeżeli chodzi o klasę name możemy znowu skorzystać z tego samego
z tej samej zasady, którą mieliśmy tutaj Absolute Insert.
I Left. 0.
Natomiast w naszym przypadku potrzebujemy Absolute Insert i right, sir.
Czyli przejdźmy do naszych klas.
Ja sobie wkleję te dwie klasy i dodaje RAID 0.
No i w tym momencie tak naprawdę sprawdźmy sobie widok naszego formularza.
No na razie mamy ten select za duży.
Mamy tutaj prawdopodobnie mój full.
Jak usuniemy utwór, zobaczymy jak się będzie zachowywał.
Już w tym momencie przesuną się na prawą
stronę i pozwala to użytkownikowi wybrać odpowiednią walutę.
Dodatkowo mamy możliwość podania odpowiedniej sumy.
Jeżeli chodzi o koszt, czyli 12 99 euro.
Już w tym momencie użytkownik może sobie
przejść dalej do podawania kolejnych informacji.
Jeżeli chodzi
o styl tego selektora, możemy sobie skopiować style tutaj z tego elementu.
Wróćmy do tego.
Tutaj label na avatar. URL i.
Mamy tutaj. To jest ten element, czyli mamy absolute
insert left i jeżeli sobie zrobimy flex items center, download.
End.
Round vernon potrzebujemy i będzie leasing.
Możemy sobie skopiować te dwie
tutaj właściwości i przejdźmy do naszego selektora.
I mamy. Widzimy link ustawiony na 200.
Sprawdźmy czy tam był kolor 400 czyli ten widzieć link.
Już mamy warning, że wykorzystujemy tę samą klasę rand.
My w naszym przypadku nie potrzebujemy po lewej stronie zaokrąglenia.
Tutaj.
Czy jak sobie teraz to zapiszemy to już to wygląda dużo lepiej?
Myślę, że to jak wygląda to w tym momencie jest jak najbardziej do zaakceptowania.
Możemy przejść do cywilizowania naszych kolejny rzeczy.
Sprawdźmy sobie jak to wszystko wygląda tutaj.
Tutaj skorzystamy z normalnego selektora.
Powinniśmy tutaj, bo tak naprawdę ta
logika tutaj nie jest do końca do zastosowania.
W naszym przypadku musielibyśmy pisać kolejną logikę do tego, żeby policzyć.
Ile. Sobie tutaj użytkownik wpisał miesięcy.
W zależności od tego moglibyśmy przerobić na fatalną na roczną subskrypcję.
Natomiast my sobie to zostawimy.
Po prostu zostawimy prosty selektor dla naszego użytkownika.
I w tym momencie jak użytkownik przejdzie sobie tutaj do wybierania miesiąca,
no to sprawdźmy sobie jeszcze w jaki sposób moglibyśmy tutaj
naprawić sobie ten Chevron po prawej stronie.
Ostatnią rzeczą, którą chciałem tutaj poprawić będzie wygląd tych selektorów.
Póki co przyznasz mi pewnie, że nie wyglądają one za ciekawie.
Dlatego wróćmy do momentu, w którym określiliśmy sobie nasz input type select.
Mamy tutaj pierwszy tego typu input.
Jeżeli chodzi o selektor, możemy sobie zacząć od tak naprawdę od A.
Non. Jeżeli zapiszemy.
Zauważ, że już nie mamy żadnego chevron a na dole.
No ale to sprawi, że będziemy musieli
sobie tak naprawdę input typu select customowe zbudować.
No i będziemy potrzebowali dodatkową
ikonkę, którą sobie będziemy musieli odpowiednio
wypozycjonować tutaj na pozycji tego input.
A do tego stworzymy sobie tutaj tak jak nas.
Name. I w naszym przypadku będzie.
To R i.
Down i zrobimy.
Line.
Zapiszemy to sobie.
Zobacz, że pojawiło się już tutaj coś, co
tak naprawdę chcemy mieć w tym miejscu i sobie wypozycjonować.
I żeby to zrobić musimy skorzystać z Trapera.
Na ten select wrzucimy ten select i tu i tutaj.
Do środka zapiszemy sobie klasę damy na Relative
i skorzystamy z tego samego, tak naprawdę z tej samej zasady.
Tutaj chcemy sobie to wypozycjonować.
Absolutnie insert na Y sobie zrobimy 0 i write.
0.
Zapiszemy to wszystko.
Zobacz, mamy już wypozycjonowanie.
Ten element, jeżeli chodzi o to w jaki sposób on się
ułoży, więc zrobimy sobie Flex Items Center.
Już mamy to dane i możemy jeszcze dodać sobie po prostu.
Padding na.
Prawą stronę wielkości 2.
Sprawdźmy jak to będzie wyglądać.
Myślę, że już ten select wygląda tutaj dużo lepiej.
Jeżeli chodzi o kolor to też możemy sobie zrobić tekst.
Z. Ink M400.
No i już mamy mniej więcej widok tego typu.
To tak jakbyśmy chcieli. Możemy sobie skopiować.
To tak naprawdę ten sam select mamy tutaj, czyli blank period.
Poszukajmy w naszym kodzie billing period.
I tutaj mamy input typu select jest właśnie tu.
Dlatego możemy sobie to zamknąć w dwie.
Wklejamy nasz tag. I.
Kleimy nasz select do tego rapera.
Na Relative Przypominam.
I zapisujemy to.
Oczywiście jeszcze brakuje nam tutaj.
A no i mamy już widok naszego formularza.
Tak jak byśmy chcieli mieć.
Teraz przejdziemy do logiki polegającej na dodawaniu nowej subskrypcji.