Strony WWW z SystemFlow: Praca z Ikonami

SystemFlow 1.0+

0:00W tej lekcji chciałbym pomówić o ikonach,

0:01które możemy łatwo wykorzystać w ramach System Flow.

0:04W zakładce Design znajdziesz sekcję ikon

0:06albo możesz kliknąć tutaj w sekcji Overview na ikony.

0:09I to jest strona, która wprowadza do tego, jak korzystać z ikon.

0:12Jest to bardzo proste.

0:13Mamy możliwość korzystania z Material

0:15Design ikon fontu, który jest za budowany do system Flow i dzięki temu możemy

0:20korzystać ze wszystkich ikon, które znajdują się w ramach Material Design.

0:24Referencja Material Design Ikon

0:26pozwala Ci przeglądać ikony ze względu na ich właściwości.

0:30Na przykład, możemy zobaczyć sobie ikonę Outline albo Round albo tutaj.

0:34Będziemy korzystać w wielu przypadkach z ikon Field.

0:37I to, co warto zapamiętać, to po prostu nazwa ikony, np.

0:42Alarm czy App Booking czy API.

0:44I taką nazwę będziemy wykorzystywać w ramach System Flow.

0:48Korzystając już z właściwych ikon

0:50prostszym scenariuszu moglibyśmy skorzystać z dowolnego elementu, np.

0:54Text Docka, a następnie wpisać w treści tekst bloga, przykładowo API.

0:59I teraz, ponieważ korzystamy właśnie z ikon Font, ten tekst API możemy łatwo

1:04zamienić na ikonę, po prostu dodając odpowiednią klasę.

1:07Do tego text blocka.

1:08A ta klasa w naszym przypadku to icons.

1:11Korzystamy w związku z tym z klasy Material Icons i już teraz co prawda nie

1:14do końca to widać, ale klikniemy na ikonkę i teraz już mamy taką ikonę dodaną.

1:19Gdybyśmy chcieli ją zmienić, możemy dwa razy kliknąć zaznaczyć wszystko za pomocą

1:23Command a czy kontrolka zmazać, a następnie wpisać przykładowo alarm na

1:27klawiaturze i dzięki temu otrzymamy kolejną ikonę.

1:31Ten prosty sposób możemy zamieniać treść tekst na ikony.

1:34I dodatkowo mamy też przygotowane

1:37komponenty, które są komponentami zawierającymi ikony np.

1:41figur, ikon.

1:42Więc można skorzystać z takiego komponentu i po prostu umieścić go tutaj.

1:46Command wyszukuje.

1:47Wklejam Pitera ikon i mamy taki specjalny komponent.

1:51W momencie gdy korzystamy z komponentów

1:53najczęściej korzystamy z override do tego, aby nadpisać ikonę.

1:57Mamy obecnie tutaj Star, ale jak piszemy API to zmieni nam się to na ikonkę z API.

2:02W ten prosty sposób możemy łatwo podmieniać ikony w ramach

2:05komponentów, a te ikony występują w rozmaitych komponentach, np.

2:09w sekcji Feature read.

2:10Jak widzisz, mamy też sporo ikon, które możemy tutaj podmieniać.

2:14To też jest ta strzałka też jest ikoną.

2:16Tutaj gwiazdka też jest ikoną.

2:17Mamy też przykładowo sekcję pricing, w których mamy sporo ikon w listach.

2:21Same listy też często zawierają ikony i gdybyśmy chcieli na przykład użyć takiego

2:25pressingu i wstawiamy go tutaj do naszego dokumentu.

2:29To mamy w postaci override.

2:32Również informację o tym, że możemy tę ikonę zmienić.

2:35I rzeczywiście w takim przypadku, gdzie

2:36mamy listę, gdzie mamy przykład dużo ikon, zdecydowanie lepiej

2:40przed linkowanie takiego komponentu zmienić sobie ikony, np.

2:44możemy skorzystać z tej ikony API.

2:47I dopiero teraz możemy od linkować

2:49instancje po to, żeby dokonywać jakichś kolejnych zmian, np.

2:52edytować te elementy listy. Dlaczego?

2:55Ponieważ teraz mamy już zmienione

2:56wszystkie ikony, a tak to po od linkowaniu musielibyśmy zmieniać każdą z osobna.

3:00Ponieważ ikony tak naprawdę są fontem, to

3:03również ich właściwości będą dziedziczone z pomocą font.

3:07Jeśli teraz zaznaczę materiał ikony, a następnie przejdę do ustawień, to

3:11zobaczysz, że mamy tutaj konkretną klasę, która jest przypisana do tych elementów.

3:15I jeśli chciałbym zmienić rozmiar w ramach całej tej klasy

3:19w ramach wszystkich instancji tej klasy, to mógłbym to zrobić w sekcji typografii.

3:23Przykładowo mamy tutaj rozmiar 1 RM.

3:26Jeśli teraz ustawimy się na tym polu i

3:28wciśniemy strzałkę w dół, to będziemy mieli 0.9 i wszystkie ikony zostały od

3:33razu zmienione, więc możemy tym sposobem zmienić sobie wielkość ikon

3:37i też dostosowywać ich centrowanie przez ewentualnie zmianę line height.

3:41Pamiętajmy jednak, że takie zmiany mają

3:44zastosowanie do tej aktualnej klasy, w ramach której pracujemy.

3:47Więc jeśli nie chcemy sobie nadpisać tej konkretnej klasy, to powinniśmy stworzyć

3:52jakąś kolejną kombo klasę Command Reader czy Enter i wpisać naszą klasę.

3:57Wtedy zmienili byśmy tylko i wyłącznie ten jeden element.

4:00Co jeśli chcielibyśmy zmodyfikować

4:03klasę Icon List Item, a w tym momencie modyfikujemy tę ostatnią klasę?

4:08Kolor Text primary 60.

4:10Możemy na chwilę usunąć tą klasę, czyli class.

4:13W tym momencie edytujemy Icon list item i

4:16wszystkie list itemy będą miały takie właściwości ikony.

4:21Czyli np.

4:22w tych ogólnych właściwościach możemy zmienić rozmiar i ustawić go na 090 rema.

4:29W ten sposób,

4:31a następnie dopiero odtworzyć tą klasę, czyli CT Primary 60 np.

4:36300, Kundery 60.

4:37I wtedy już mamy pewność, że wszystkie ikony list items będą po prostu miały

4:41mniejszy rozmiar, natomiast później dopiero koloruje.

4:44My je tą konkretną klasą.

4:46Dokumentacji znajdziesz także informacja o

4:48tym, że w przypadku ikon możemy korzystać także z dodatkowych klas Material Icons,

4:53Outline oraz SZARP po to, żeby zastosować tutaj różne style, np.

4:58właśnie styl Outline, który tutaj mamy.

5:00I należy to zrobić w taki sposób, że może

5:03rozpakuj my sobie te instancje wewnątrz mamy ten ficzer icon ripper maila icons.

5:09Może wcześniej jeszcze zmieńmy tą ikonę i użyjmy tutaj ikony Account podkreślenie

5:14box, bo wiem, że ta ikona ma wariant outline i wtedy możemy zmienić tą klasę,

5:20czyli klikamy na niej tutaj w środku albo klikamy na strzałkę i wybieramy Runtime

5:25class, a następnie na końcu stawiamy spację i wpisujemy Outline.

5:29I teraz return Enter pozwoli nam

5:32zmienić styl tej ikony właśnie na ikonę typu outline z jednym typem komponentów,

5:37którym często wykorzystujemy ikony są przyciski.

5:39Jeśli przeniosę się do dokumentacji i

5:41przejdę do buttonów, to zobaczysz, że każdy wariant przycisku

5:45praktycznie ma też wariant z ikoną po prawej i po lewej stronie.

5:48W tym akurat przypadku korzystamy z takiego buttona, który nazywa się Medium

5:53Outline i używamy go bez ikony, Natomiast równie dobrze moglibyśmy z tego samego

5:59przycisku skorzystać z betonem, jeśli kopiujemy tą nazwę do schowka.

6:03A teraz przejdźmy do miejsca, w którym znajduje się ten button fluid.

6:07Możemy go usunąć i w tym i w bloku

6:09wstawiamy to, co znajduje się w schowku, czyli button Medium out i zobaczysz, że

6:14mamy tutaj wariant text on albo wariant, w którym znajduje się ikona

6:18po prawej stronie lub ikona po lewej stronie, albo sama ikona.

6:21Wybierzmy wariant z ikoną po lewej stronie.

6:24I teraz wstawiliśmy ten właśnie typ przycisku, ale z ikoną po lewej stronie.

6:28Można by było dodać

6:29do niego te pozostałe klasy, aby go formatować tak jak wcześniej.

6:33Natomiast dla nas istotne jest to, że mamy tutaj konkretną ikonę.

6:36Ta ikona to face, ale możemy to zmienić np.

6:39na look i będziemy mieli ich z kłódką.

6:42A jeśli chcemy dostosować więcej właściwości i ustawień tego elementu, no

6:45to oczywiście od niego samego dodajemy kolejne klasy.

6:48W każdym razie w przyciskach też korzystamy z ikon dokładnie na tej samej

6:52zasadzie i również znajdują się one najczęściej w override, tak aby nie trzeba

6:56było od nich kopiować przycisku, tylko można było to zmienić.

6:59W większości przypadków przyciskach właśnie te override się przydają

7:03najbardziej, bo szybko możemy zmienić ikonę i tekst.

7:06I to w zasadzie wystarczy, ponieważ większość parametrów właściwości przycisku

7:10możemy z custom i działać dla całego frameworku na stronach dokumentacji.

7:14O tym jeszcze powiem w osobnej lekcji.

7:16Natomiast warto wiedzieć jak z tych

7:18komponentów korzystać w kontekście ikon i wydaje mi się, że na razie to wszystko.

7:22A teraz przenieśmy się jeszcze na chwilę

7:24do firmy po to, żebyś mógł zobaczyć jak tutaj pracuje się z ikonami.

7:27Jest to bardzo proste, ponieważ wszystkie.

7:29A sety są odwzorowane i również mamy tutaj stronę pages.

7:32Jeśli rozwiniesz sobie stronę, na samym dole znajduje się sekcja z ikonami i mam

7:37osobną podstronę z ikonami wypełnionymi outline oraz Sharp.

7:41Stąd oczywiście możemy te ikony zaczerpnąć

7:44do naszego projektu, przeglądać je, skopiować i wkleić w dowolne miejsce.

7:48Ale zwróć proszę uwagę na to, że każda z

7:50tych ikon też jest osobnym symbolem i jest odpowiednio nazwana.

7:53Dokładnie tak, jak ma to miejsce w tej referencji Material Design.

7:57W związku z tym, jeśli chcielibyśmy

7:59taką ikonkę Back Report wyszukać prościej będąc np.

8:03na jakiejś osobnej podstronie, pracując z jakimś frameworku, to tak naprawdę

8:06najlepiej jest skierować się do Assets i tutaj w wyszukiwarce wpisać icon back np.

8:13i powinniśmy już znaleźć tą ikonkę Buckley port.

8:17Jeśli umieścimy taką ikonę na scenie, to teraz możemy zrobić jeszcze jedną ciekawą

8:21rzecz, ponieważ wszystkie ikony da się podmienić za pomocą funkcji słowa.

8:26Znajdziesz ją tutaj w prawej części.

8:27Jeśli klikniesz na instalację Back Report,

8:30to możesz teraz zobaczyć wszystkie ikony, przeglądać je.

8:33Oczywiście możesz też wpisać nazwę danej ikony, np.

8:36class i zostanie ona znaleziona.

8:38Możesz także zmienić tą ikonę z sekcji Range i wybrać sobie inny typ ikon.

8:44Przechodzimy tutaj do ikon, następnie wybieramy np.

8:46Outline i wybieramy jakąś kategorię tych ikon.

8:50I tutaj wybieramy sobie odpowiednią ikonę.

8:52I to również zadziała.

8:54Czyli teraz podnieśliśmy instancję, a to

8:56jest jeszcze o tyle fajne, że tak naprawdę zmieniając wcześniej jakieś parametry tej

9:00ikony, czyli przykładowo powiększając ją tutaj, zmieniając jej kolor, zauważ, że

9:05ikony korzystają też z kolorów, które są we frameworku.

9:08Więc możemy zmienić to teraz na inny kolor.

9:11I jeśli teraz będziemy chcieli ją

9:13podmienić na jakąś inną, to zauważ, że te właściwości dotyczące rozmiaru oraz koloru

9:18i innych rzeczy, które na tym ustawimy pozostają.

9:21Więc bardzo łatwo możemy w ten sposób podmieniać elementy za pomocą słaba.

9:25To wszystko, co chciałem pokazać Ci w tej lekcji o ikonach.

9:28Jeśli chodzi o korzystanie z innych setów

9:30ikon niż Material Design, na razie nie mamy tego obsłużone.

9:34System Flow natomiast Ty możesz spokojnie korzystać sobie z ikon fontów.

9:38Standardowo tak jak robię już wcześniej, to w firmie czy web flow

9:41należy doinstalować taki font i po prostu wykorzystać odpowiednią klasę czy klasę w

9:46zaimportować jako grafiki i bez problemu też można ich używać.

9:50System Flow w powiązaniu z naszym frameworkiem to wszystko na teraz.

9:53Dzięki za uwagę. Do usłyszenia.