Komponen UI / UX di Angular, dikenal sebagai Bahan Sudut. Merekamembantu Aplikasi Angular bekerja efisien . Namun, jika Anda belum menyadarinya, berikut adalah artikel untuk membantu Anda mempelajari Materi Sudut secara detail. Juga, to dapatkan pengetahuan mendalam tentang Angular, pertimbangkan untuk mendaftar ' dari Edureka.
Pada artikel ini, saya akan membahas topik-topik berikut:
Pengantar Material Sudut
Bahan diperkenalkan sebagai bahasa desain yang dikembangkan oleh Google pada tahun 2014. Desain Material adalah alatuntuk kerangka kerja front-end, yang membantu Anda visual , gerakan , dan interaksi rancangan. Ini juga membantu Anda beradaptasi di berbagai perangkat dan ukuran layar yang berbeda. Pertama, itu ditandai ke AngularJS untuk membuat aplikasi ini lebih banyak menarik dan tampil lebih cepat . Kemudian, Google sepenuhnya menulis ulang kode dari awal dan menghapus JS, mis. , dan menamakannya pada September 2016. Kemudian, Google menandai Desain Material ke Angular, yang menggunakan , dan menamakannya Angular Materials.
Bahan Sudut atau komponen User-Interface (UI) membantu Anda mendesain aplikasi dalam file tersusun cara. Mereka menarik pengguna dan membuatnya lebih mudah diakses elemen atau komponen yang ada dalam aplikasi Anda. Mereka juga membantu dalam mendesain aplikasi Anda dengan cara yang menarik, dengan unik gaya dan bentuk . Komponen ini membantu dalam membuat aplikasi Anda lebih banyak konsisten , cepat , serba guna dan bahkan desain responsif situs web.
Instalasi Material Sudut
Sekarang, mari kita mulai dengan tutorial singkat tentang cara memasang Angular Materials. Hal pertama yang pertama, pastikan Anda telah menginstal Angular di sistem Anda. Jika Anda tidak terbiasa dengan Angular, lihat tautan di . Setelah Anda menyiapkan semuanya, Anda dapat menambahkan Angular Materials ke proyek Anda menggunakan perintah berikut:
dari tambahkan @ sudut / bahan
Pertama, Anda akan diminta untuk memilih nama tema prebuilt atau tema kustom.
Anda harus memilih tema prebuilt “Indigo / Pink” yang merupakan tema default untuk mendesain aplikasi Anda. Anda juga dapat memilih tema 'Kustom' sehingga Anda dapat menyesuaikan file tema Anda yang menyertakan semua gaya umum.
Selanjutnya, Anda akan diminta untuk menyiapkan HammerJS . HammerJS adalah pustaka populer, sebagian besar digunakan dalam aplikasi Angular. Ini menambahkan dukungan untuk gerakan sentuh seperti Swipe, Pan, Pinch, Rotate dan banyak lagi, terutama di aplikasi seluler.
Anda dapat memilih 'Ya' atau 'Tidak'. HammerJS dapat berguna saat Anda menggunakan aplikasi Anda di ponsel. Karena ponsel menawarkan layar sentuh, gerakan ini lebih berguna dan mungkin terlihat trendi di aplikasi seluler Anda.
Setelah Anda memilih pilihan Anda, selanjutnya akan meminta Anda untuk mengatur Animasi Browser untuk Material Sudut.
Anda harus memilih 'Ya' sehingga Anda dapat menggunakan animasi pada aplikasi Anda. Animasi Sudut membuat aplikasi Anda lebih menyenangkan dan lebih mudah digunakan. Ini dapat meningkatkan pengalaman aplikasi dan pengguna Anda yang menarik perhatian pengguna.
Selanjutnya, ini akan memasang Angular Materials di aplikasi Anda.
Komponen Material Sudut
Seperti yang disebutkan sebelumnya, Komponen Material Angular tidak lain adalah UI / UX Komponen Desain. Mereka berisi berbagai macam komponen seperti Kontrol Formulir, Navigasi, Tombol & Indikator, Popup, dan banyak lagi. Komponen ini membantu Anda menerapkan pola sesuai dengan spesifikasi Desain Material.
Ke depannya, mari kita lihat beberapa contoh cara menerapkan komponen ini di Aplikasi Angular Anda.
Navigasi
Pertama, saya akan membahas komponen-komponen dalam Navigasi.
- Toolbar
Anda perlu mengetik kode berikut di app.component.html file untuk menggunakan komponen Toolbar dalam aplikasi Anda.
Tutorial Material Sudut adalah container dari material Angular yang digunakan untuk header dan title. Warna file wadah dapat diubah dengan menggunakan warna Properti.Secara default, bilah alat menggunakan warna latar belakang netral berdasarkan tema saat ini, yaitu terang atau gelap.Anda dapat memilih tiga tema default yaitu: 'utama' , 'aksen' , atau 'memperingatkan' .Untuk menggunakan toolbar ini, Anda harus mengimpornya terlebih dahulu app.module.ts file dari bahan Angular menggunakan perintah berikut:
impor {MatToolbarModule} dari '@ angular / material'Nanti, Anda juga perlu menambahkan modul ini di impor: [] bagian yang terletak di app.module.ts mengajukan.
impor: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Untuk Mat-Toolbar, Anda perlu menambahkan ' MatToolbarModule '.
Sekarang, mari kita layani proyek Anda menggunakan perintah berikut:
melayani -o
Ini akan membuka proyek Anda di browser default sistem Anda seperti yang ditunjukkan di bawah ini:
Jika Anda ingin mengubah warna toolbar sesuai pilihan Anda, Anda dapat melakukannya dengan bantuan CSS stylesheet. Mari saya tunjukkan sebuah contoh.
Pertama, Anda perlu menghapus warna properti dari wadah dan kemudian, ketikkan yang berikut ini CSS kode di app.component.css mengajukan.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Sekarang, layani proyek Anda untuk melihat hasilnya.
- Tidak bisa
Selanjutnya saya akan membahas Komponen Menu. Anda perlu mengetik kode berikut di app.component.html mengajukan.
Tutorial Material Sudut Bantuan Pengaturan MenuMari tambahkan beberapa gaya pada Tidak bisa tombol. Anda perlu mengetik kode berikut di app.component.css mengajukan.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = 'spasi' digunakan untuk menambahkan spasi antara 'Nama Toolbar' dan 'Opsi Menu'.
Jika Anda tidak terbiasa dengan CSS stylesheet, Anda dapat merujuk ke blog kami di untuk mengetahui lebih dalam.
Sama seperti Toolbar, untuk digunakan dan kontainer, Anda harus mengikuti prosedur yang sama seperti di atas, untuk mengimpor MatMenuModule dan MatButtonModule dari bahan sudut dan menambahkannya impor: [] bagian terletak di app.module.ts mengajukan.
Sajikan proyek Anda sekarang untuk menampilkan hasilnya.
Kontrol Formulir
Sekarang, saya akan membahas komponen-komponen di Form Control.
- Formulir Bidang
Seperti namanya, Form-Field digunakan untuk input yang diberikan oleh pengguna. Ini paling sering digunakan untuk Pendaftaran pengguna, dalam aplikasi atau situs web.
Anda perlu mengetik kode berikut di app.component.html file untuk menggunakan komponen Form-Field dalam aplikasi Anda.
Kontrol Formulir
Nama
Seperti biasa, Anda perlu mengimpor MatFormFieldModule dan MatInputModule dan menambahkannya impor: [] bagian yang terletak di app.module.ts mengajukan. Kode di atas biasanya digunakan untuk memasukkan Nama seperti 'Nama Depan', 'Nama Belakang', dll. Anda bahkan dapat menggunakan Validator dan membuat bidang wajib. Misalnya, Anda dapat menggunakannya untuk kolom Email. Anda dapat menyembunyikan atau menampilkan teks untuk Kata Sandi. Untuk referensi Anda, lihat kode di bawah ini:
Masukkan email Anda {{getErrorMessage ()}} Masukkan sandi Anda {{sembunyikan? 'visibility_off': 'visibility'}}Dalam Anda app.component.css file, Anda perlu menambahkan kode berikut:
.example-container {padding-left: 50px}Sekarang, di app.component.ts file, Anda perlu mengimpor FormControl dan Validator dari @ sudut / bentuk direktori.
impor {FormControl, Validators} dari '@ angular / forms'Anda bahkan perlu menambahkan teks untuk menampilkan kesalahan di dalam kelas berikut.
kelas ekspor AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('required')? 'Anda harus memasukkan nilai': this.email.hasError ('email')? 'Bukan email yang valid': ''} hide = true}Mengacu pada prosedur di atas, Anda perlu mengetikkan kode berikut di file app.module.ts file untuk mengimpor modul yang diperlukan.
impor {FormsModule, ReactiveFormsModule} dari '@ angular / forms' import {MatIconModule} dari '@ angular / material'Nanti, Anda perlu menambahkan modul ini ke dalam impor: [] bagian.
- Tombol radio
Tombol Radio umumnya digunakan untuk memilih pilihan di antara opsi yang berbeda. Anda dapat melihat kode berikut untuk referensi.
Untuk app.component.html mengajukan,
Jenis kelamin
Pria Wanita
Untuk app.component.css mengajukan,
mat-radio-button {Padding-left: 50px}Sekarang, Anda perlu mengimpor MatRadioModule dan tambahkan impor: [] bagian yang terletak di app.module.ts mengajukan.
Nanti, Anda perlu melayani proyek Anda untuk menampilkan hasilnya.
Ke depannya saya akan membahas Angular Material CDK.
Bahan Sudut CDK
CDK, juga dikenal sebagai Kit Pengembangan Komponen , adalah perpustakaan perilaku yang telah ditentukan sebelumnya di Angular Material, yaitu seperangkat alat yang mengimplementasikan umum pola interaksi dan fitur aplikasi . Itu tidak memiliki gaya khusus untuk Desain Material. Mari kita lihat contoh CDK.
- Bidang Teks
Komponen Bidang Teks menyediakan utilitas untuk bekerja dengan bidang masukan teks. Anda dapat menggunakan komponen CDK pada Text Field untuk mengubah ukuran input. Mari kita lihat contoh bagaimana menerapkannya.
Untuk app.component.html mengajukan,
Bahan Sudut CDK
Ukuran font 10px 12px 14px 16px 18px 20px Autosize textarea
Untuk app.component.ts file, Anda perlu mengimpor komponen yang diperlukan terlebih dahulu.
impor {CdkTextareaAutosize} dari '@ angular / cdk / text-field' import {NgZone, ViewChild} dari '@ angular / core' import {take} dari 'rxjs / operator'Sekarang, Anda perlu mengetikkan kode berikut di dalam kelas.
apa kata yang dipesan di java
ekspor kelas AppComponent {konstruktor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Selanjutnya, Anda perlu mengimpor MatSelectModule dan tambahkan impor: [] bagian yang terletak di app.module.ts mengajukan.
Akhirnya, Anda perlu melayani proyek Anda untuk menampilkan hasilnya.
Ini bukan kesimpulan dan ada beberapa komponen lain di Material Angular. Anda dapat merujuknya dari situs resmi Bahan Sudut.
Dengan ini, saya ingin mengakhiri blog saya. Saya harap Anda jelas tentang dasar-dasar Material Angular.Jika Anda memiliki keraguan atau pertanyaan tentang artikel ini, jangan ragu untuk mempostingnya di bagian komentar di bawah.
Jika Anda ingin mempelajari semua yang baru saja Anda pelajari dari blog ini, dan lebih banyak lagi tentang Angular , dan persiapkan karier Anda untuk menjadi Pengembang Angular yang mahir, lalu pertimbangkan untuk mendaftar ke kami ' .
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar di blog 'Materi Sudut' ini dan kami akan menghubungi Anda kembali secepatnya.