Komponenty UI / UX w Angular są znane jako Materiały kątowe. onepomoc w działaniu aplikacji Angular wydajnie . Jeśli jednak jeszcze ich nie znasz, oto artykuł, który pomoże Ci szczegółowo poznać materiały Angular. Również to uzyskać dogłębną wiedzę o Angular, rozważ zapisanie się ' od Edureka.
W tym artykule omówię następujące tematy:
- Wprowadzenie do materiałów kątowych
- Instalacja materiału kątowego
- Kątowe komponenty materiałowe
- Materiał kątowy CDK
Wprowadzenie do materiałów kątowych
Materiały zostały wprowadzone jako język projektowania opracowany przez Google w 2014 roku. Wygląd materiału jest narzędziemdla frameworków front-end, co jest pomocne wizualny , ruch , i interakcja projekt. Pomaga także dostosować się do różnych urządzeń i różnych rozmiarów ekranu. Po pierwsze, został oznaczony jako AngularJS, aby zwiększyć liczbę tych aplikacji atrakcyjny i graj szybciej . Następnie Google całkowicie przepisał kod od podstaw i usunął JS, tj. i nazwał to we wrześniu 2016 r. Później Google oznaczył Material Design jako Angular, który używa i nazwał go Angular Materials.
Materiały kątowe lub składniki interfejsu użytkownika (UI) ułatwiają projektowanie aplikacji w formacie zbudowany sposób. Przyciągają użytkowników i robią to łatwiejszy dostęp elementy lub komponenty obecne w aplikacji. Pomagają również w projektowaniu aplikacji w atrakcyjny sposób i niepowtarzalny style i kształty . Te komponenty pomagają ulepszyć twoją aplikację zgodny , szybki , wszechstronny a nawet projekt czuły strony internetowe.
Instalacja materiału kątowego
Teraz zacznijmy od krótkiego samouczka, jak zainstalować Angular Materials. Po pierwsze, upewnij się, że masz zainstalowany Angular w swoim systemie. Jeśli nie znasz Angulara, skorzystaj z łącza na . Po skonfigurowaniu wszystkiego możesz dodać materiały kątowe do swojego projektu za pomocą następującego polecenia:
of add @ angular / material
Najpierw poprosi Cię o wybranie wstępnie utworzonej nazwy motywu lub motywu niestandardowego.
Musisz wybrać gotowy motyw „Indygo / Różowy”, który jest domyślnym motywem do stylizacji aplikacji. Możesz także wybrać motyw „Niestandardowy”, aby dostosować pliki motywów, które zawierają wszystkie popularne style.
Następnie poprosi Cię o skonfigurowanie HammerJS . HammerJS to popularna biblioteka, używana głównie w aplikacjach Angular. Dodaje obsługę gestów dotykowych, takich jak przesuwanie, przesuwanie, szczypanie, obracanie i wiele innych, szczególnie w aplikacjach mobilnych.
Możesz wybrać „Tak” lub „Nie”. HammerJS może być przydatne podczas korzystania z aplikacji na telefonach komórkowych. Ponieważ telefony komórkowe oferują ekrany dotykowe, te gesty są bardziej przydatne i mogą wyglądać modnie w aplikacji mobilnej.
Po dokonaniu wyboru poprosi Cię o skonfigurowanie Animacje przeglądarki dla materiału kątowego.
Musisz wybrać „Tak”, aby móc używać animacji w swojej aplikacji. Animacje kątowe sprawiają, że Twoja aplikacja jest przyjemniejsza i łatwiejsza w użyciu. Może to poprawić wrażenia z korzystania z aplikacji i przyciągnąć uwagę użytkowników.
Następnie zainstaluje to Angular Materials w twojej aplikacji.
Kątowe komponenty materiałowe
Jak wspomniano wcześniej, kątowe komponenty materiałowe to nic innego UI / UX Komponenty projektowe. Zawierają różne komponenty, takie jak kontrolki formularzy, nawigacja, przyciski i wskaźniki, wyskakujące okienka i wiele innych. Te komponenty pomagają we wdrażaniu wzorców zgodnie ze specyfikacją Material Design.
Idąc dalej, zobaczmy kilka przykładów implementacji tych komponentów w aplikacji Angular.
Nawigacja
Najpierw omówię komponenty w Nawigacji.
- pasek narzędzi
Musisz wpisać następujący kod w app.component.html plik, aby użyć komponentu Toolbar w aplikacji.
Samouczek dotyczący materiałów kątowych to kontener z materiału Angular, który jest używany do nagłówków i tytułów. Kolor kontener można zmienić przy użyciu kolor własność.Domyślnie paski narzędzi używają neutralnego koloru tła w oparciu o bieżący motyw, tj. Jasny lub ciemny.Możesz wybrać trzy domyślne motywy: 'podstawowy' , 'akcent' lub 'ostrzec' .Aby użyć tego paska narzędzi, musisz najpierw zaimportować go do app.module.ts plik z materiałów kątowych za pomocą następującego polecenia:
importuj {MatToolbarModule} z „@ angular / material”Później musisz również dodać ten moduł w import: [] sekcja znajdująca się w app.module.ts plik.
import: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
W przypadku paska narzędzi Mat-Toolbar musisz dodać „ MatToolbarModule ”.
Teraz obsłużmy Twój projekt za pomocą następującego polecenia:
serwowania -o
Spowoduje to otwarcie projektu w domyślnej przeglądarce systemu, jak pokazano poniżej:
Jeśli chcesz zmienić kolor paska narzędzi zgodnie z własnym wyborem, możesz to zrobić za pomocą arkusza stylów CSS. Pokażę przykład.
Najpierw musisz wymazać kolor nieruchomość od pojemnik, a następnie wpisz następujące polecenie CSS kod w app.component.css plik.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Teraz podaj swój projekt, aby zobaczyć wynik.
- Menu
Następnie omówię składnik menu. Musisz wpisać następujący kod w swoim app.component.html plik.
Samouczek dotyczący materiałów kątowych Pomoc dotycząca ustawień menuDodajmy trochę stylizacji do Menu przycisk. Musisz wpisać następujący kod w swoim app.component.css plik.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = 'spacja' służy do dodawania odstępów między „Nazwą paska narzędzi” a „Opcją menu”.
Jeśli nie znasz arkusza stylów CSS, możesz zapoznać się z naszym blogiem pod adresem aby uzyskać szczegółowe informacje.
Podobnie jak w przypadku paska narzędzi Toolbar i kontenerów, aby zaimportować, musisz wykonać tę samą procedurę, co powyżej MatMenuModule i MatButtonModule od materiał kątowy i dodaj je import: [] sekcja znajdująca się w app.module.ts plik.
Udostępnij projekt teraz, aby wyświetlić wynik.
Formanty
Teraz omówię składniki w Form Control.
- Pole formularza
Jak sama nazwa wskazuje, Form-Field jest używane do wprowadzania danych przez użytkownika. Najczęściej służy do Rejestracji użytkownika w aplikacji lub na stronie internetowej.
Musisz wpisać następujący kod w app.component.html plik, aby użyć składnika Form-Field w aplikacji.
Formanty
Nazwa
Jak zwykle musisz zaimportować MatFormFieldModule i MatInputModule i dodaj je import: [] sekcja znajdująca się w app.module.ts plik. Powyższy kod jest zwykle używany do wprowadzania nazw, takich jak „Imię”, „Nazwisko” itp. Możesz nawet użyć walidatorów i ustawić pole jako obowiązkowe. Możesz go na przykład użyć w polu E-mail. Możesz ukryć lub odkryć tekst haseł. W celach informacyjnych sprawdź poniższy kod:
Wpisz swój adres e-mail {{getErrorMessage ()}} Wpisz swoje hasło {{ukryj? 'visibility_off': 'visibility'}}W Twoim app.component.css musisz dodać następujący kod:
.example-container {padding-left: 50px}Teraz w twoim app.component.ts plik, który musisz zaimportować FormControl i Walidatory od @ kątowe / formy informator.
importuj {FormControl, Validators} z „@ angular / forms”Musisz nawet dodać tekst, aby wyświetlić błąd w następującej klasie.
export class AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? „Musisz wprowadzić wartość”: this.email.hasError („email”)? 'Nieprawidłowy adres e-mail': ''} hide = true}Odnosząc się do powyższej procedury, musisz wpisać następujący kod w swoim app.module.ts plik, aby zaimportować niezbędne moduły.
import {FormsModule, ReactiveFormsModule} z „@ angular / forms” import {MatIconModule} z „@ angular / material”Później musisz dodać te moduły w import: [] Sekcja.
- Przycisk radiowy
Przyciski radiowe są zwykle używane do wybierania spośród różnych opcji. Możesz sprawdzić następujący kod w celach informacyjnych.
Dla app.component.html plik,
Płeć
Mężczyzna Kobieta
Dla app.component.css plik,
mat-radio-button {Padding-left: 50px}Teraz musisz zaimportować MatRadioModule i dodaj to import: [] sekcja znajdująca się w app.module.ts plik.
Później musisz udostępnić projekt, aby wyświetlić wynik.
Idąc dalej, omówię materiał CDK Angular Material.
Materiał kątowy CDK
CDK, znany również jako Komponentowy zestaw deweloperski , to biblioteka predefiniowane zachowania w Angular Material, czyli zestawie narzędzi, które implementują wspólne wzorce interakcji i funkcje aplikacji . Nie ma żadnych stylów specyficznych dla Material Design. Zobaczmy przykład CDK.
- Pole tekstowe
Komponent Pole tekstowe udostępnia narzędzia do pracy z polami wprowadzania tekstu. Możesz użyć komponentów CDK w polu tekstowym, aby zmienić rozmiar danych wejściowych. Zobaczmy przykład, jak go wdrożyć.
Dla app.component.html plik,
Materiał kątowy CDK
Rozmiar czcionki 10px 12px 14px 16px 18px 20px Automatyczny rozmiar tekstu
Dla app.component.ts musisz najpierw zaimportować niezbędne komponenty.
importuj {CdkTextareaAutosize} z „@ angular / cdk / text-field” importuj {NgZone, ViewChild} z „@ angular / core” import {take} z „rxjs / operators”Teraz musisz wpisać następujący kod wewnątrz klasy.
SQL Server Integration Services SSIS - samouczek krok po kroku
eksportuj klasę AppComponent {konstruktor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Następnie musisz zaimportować MatSelectModule i dodaj to import: [] sekcja znajdująca się w app.module.ts plik.
Na koniec musisz udostępnić projekt, aby wyświetlić wynik.
To nie jest wniosek, a Angular Materials zawiera kilka innych składników. Możesz się do nich odwołać z oficjalna strona internetowa materiału kątowego.
Na tym chciałbym zakończyć mój blog. Mam nadzieję, że masz jasność co do podstaw Angular Material.Jeśli masz jakiekolwiek wątpliwości lub pytania dotyczące tego artykułu, nie wahaj się ich opublikować w sekcji komentarzy poniżej.
Jeśli chcesz dowiedzieć się wszystkiego, czego właśnie dowiedziałeś się z tego bloga, a także więcej Kątowy i przygotuj swoją karierę na biegłego programistę Angular, a następnie rozważ zapisanie się do naszego ' .
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „Angular Material”, a my skontaktujemy się z Tobą tak szybko, jak to możliwe.