Komponen UI / UX di Angular, dikenali sebagai Bahan Sudut. Merekabantu Aplikasi Sudut melakukan dengan cekap . Walau bagaimanapun, jika anda belum menyedarinya, berikut adalah artikel untuk membantu anda mempelajari Bahan Sudut secara terperinci. Juga, to dapatkan pengetahuan mendalam mengenai Angular, pertimbangkan untuk mendaftar ' dari Edureka.
Dalam artikel ini, saya akan membahas topik berikut:
Pengenalan Bahan Sudut
Bahan diperkenalkan sebagai bahasa reka bentuk yang dikembangkan oleh Google pada tahun 2014. Reka Bentuk Bahan adalah alatuntuk rangka depan, yang membantu anda visual , gerakan , dan interaksi reka bentuk. Ini juga membantu anda menyesuaikan diri di pelbagai peranti dan saiz skrin yang berbeza. Pertama, ia ditandakan ke AngularJS untuk menjadikan aplikasi ini lebih banyak menarik dan membuat persembahan lebih pantas . Kemudian, Google menulis semula sepenuhnya kod itu dari awal dan mengeluarkan JS iaitu. , dan menamakannya pada bulan September 2016. Kemudian, Google menandakan Reka Bentuk Bahan ke Sudut, yang menggunakan , dan menamakannya Bahan Sudut.
Bahan Sudut atau komponen User-Interface (UI) membantu anda merancang aplikasi anda dalam berstruktur cara. Mereka menarik pengguna dan membuatnya lebih senang diakses elemen atau komponen yang terdapat dalam aplikasi anda. Mereka juga membantu merancang aplikasi anda dengan cara yang menarik, dan unik gaya dan bentuk . Komponen ini membantu menjadikan aplikasi anda lebih banyak konsisten , pantas , serba boleh dan juga reka bentuk responsif laman web.
Pemasangan Bahan Sudut
Sekarang, mari kita mulakan dengan tutorial ringkas mengenai cara memasang Bahan Angular. Perkara pertama yang pertama, pastikan anda memasang Angular dalam sistem anda. Sekiranya anda tidak biasa dengan Angular, rujuk pautan di . Setelah anda menyiapkan semuanya, anda boleh menambahkan Bahan Sudut ke projek anda menggunakan arahan berikut:
tambah @ sudut / bahan
Pertama, ia akan meminta anda memilih nama tema prabuilt atau tema tersuai.
Anda perlu memilih tema prabuilt 'Indigo / Pink' yang merupakan tema lalai untuk menggayakan aplikasi anda. Anda juga dapat memilih tema 'Custom' sehingga Anda dapat menyesuaikan file tema Anda yang mencakup semua gaya umum.
Seterusnya, ia akan meminta anda menyiapkannya HammerJS . HammerJS adalah perpustakaan yang popular, digunakan terutamanya dalam aplikasi Angular. Ia menambahkan sokongan untuk isyarat sentuhan seperti Swipe, Pan, Pinch, Rotate dan banyak lagi, terutama dalam aplikasi mudah alih.
Anda dapat memilih 'Ya' atau 'Tidak'. HammerJS boleh berguna semasa anda menggunakan aplikasi anda di telefon bimbit. Oleh kerana telefon bimbit menawarkan paparan sentuh, gerak isyarat ini lebih berguna dan mungkin kelihatan bergaya di aplikasi mudah alih anda.
Selepas anda memilih pilihan anda, seterusnya ia akan meminta anda menyiapkannya Animasi Penyemak Imbas untuk Bahan Sudut.
Anda harus memilih 'Ya' sehingga Anda dapat menggunakan animasi pada aplikasi Anda. Animasi Angular menjadikan aplikasi anda lebih senang dan senang digunakan. Ini dapat meningkatkan pengalaman aplikasi dan pengguna anda yang menarik perhatian pengguna.
Selepas itu, ini akan memasang Bahan Sudut dalam aplikasi anda.
Komponen Bahan Sudut
Seperti disebutkan sebelumnya, Komponen Bahan Sudut tidak lain dan tidak bukan UI / UX Komponen Reka Bentuk. Mereka mengandungi pelbagai komponen seperti Kawalan Bentuk, Navigasi, Butang & Petunjuk, Munculan dan banyak lagi. Komponen ini membantu anda melaksanakan corak mengikut spesifikasi Reka Bentuk Bahan.
Melangkah ke depan, mari kita lihat beberapa contoh cara menerapkan komponen ini dalam Aplikasi Sudut anda.
Navigasi
Pertama, saya akan membincangkan komponen dalam Navigasi.
- Bar alat
Anda perlu menaip kod berikut di app.component.html fail untuk menggunakan komponen Toolbar dalam aplikasi anda.
Tutorial Bahan Sudut adalah bekas dari bahan Sudut yang digunakan untuk tajuk dan tajuk. Warna dari bekas boleh ditukar dengan menggunakan warna harta benda.Secara lalai, bar alat menggunakan warna latar neutral berdasarkan tema semasa iaitu sama ada terang atau gelap.Anda boleh memilih tiga tema lalai iaitu: ‘Utama’ , ‘Loghat’ , atau 'Memberi amaran' .Untuk menggunakan bar alat ini, anda mesti mengimportnya terlebih dahulu app.module.ts fail dari bahan sudut menggunakan arahan berikut:
import {MatToolbarModule} dari '@ angular / material'Kemudian, anda juga perlu menambahkan modul ini di import: [] bahagian yang terletak di app.module.ts fail.
import: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Untuk Mat-Toolbar, anda perlu menambahkan “ MatToolbarModule '
Sekarang, mari servis projek anda menggunakan arahan berikut:
berkhidmat -o
Ini akan membuka projek anda pada penyemak imbas lalai sistem anda seperti yang ditunjukkan di bawah:
Sekiranya anda ingin mengubah warna bar alat mengikut pilihan anda, anda boleh melakukannya dengan bantuan helaian gaya CSS. Mari saya tunjukkan contoh.
Pertama, anda perlu memadam warna harta tanah dari bekas dan kemudian, taipkan yang berikut CSS kod di app.component.css fail.
bar alatan tikar {background-color: / * color-of-your-choice * / color: / * text-color * /}Sekarang, serahkan projek anda untuk melihat hasilnya.
- Menu
Seterusnya, saya akan membincangkan Komponen Menu. Anda perlu menaip kod berikut di app.component.html fail.
Tutorial Bahan Sudut Bantuan Tetapan MenuMari tambahkan beberapa gaya pada Menu butang. Anda perlu menaip kod berikut di app.component.css fail.
.space {flex: 1 1 auto} .btns {lebar: 100px tinggi: 40px font-size: besar-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}kelas = 'ruang' digunakan untuk menambahkan jarak antara 'Toolbar Name' dan 'Menu Option'.
Sekiranya anda tidak mengenali lembaran gaya CSS, anda boleh merujuk ke blog kami di untuk mendalami.
Sama seperti Toolbar, untuk digunakan dan bekas, anda perlu mengikuti prosedur yang sama seperti di atas, untuk mengimport MatMenuModule dan MatButtonModule dari bahan sudut dan masukkannya import: [] bahagian yang terletak di app.module.ts fail.
Layan projek anda sekarang untuk memaparkan hasilnya.
Kawalan Bentuk
Sekarang, saya akan membincangkan komponen dalam Form Control.
- Medan Bentuk
Seperti namanya, Form-Field digunakan untuk input yang diberikan oleh pengguna. Ini paling sering digunakan untuk Pendaftaran pengguna, dalam aplikasi atau laman web.
Anda perlu menaip kod berikut di app.component.html fail untuk menggunakan komponen Form-Field dalam aplikasi anda.
Kawalan Bentuk
Nama
Seperti biasa, anda perlu mengimport MatFormFieldModule dan MatInputModule dan masukkannya import: [] bahagian yang terletak di app.module.ts fail. Kod di atas biasanya digunakan untuk memasukkan Nama seperti 'First Name', 'Last Name', dll. Anda bahkan boleh menggunakan Validator dan menjadikan bidang wajib. Contohnya, anda boleh menggunakannya untuk medan E-mel. Anda boleh menyembunyikan atau menyembunyikan teks untuk Kata Laluan. Untuk rujukan anda, lihat kod di bawah:
Masukkan e-mel anda {{getErrorMessage ()}} Masukkan kata laluan anda {{sembunyikan? 'visibility_off': 'keterlihatan'}}Dalam anda app.component.css fail, anda perlu menambahkan kod berikut:
.contoh-bekas {padding-left: 50px}Sekarang, di dalam anda app.component.ts fail, anda perlu mengimport FormControl dan Pengesah dari @ sudut / bentuk direktori.
import {FormControl, Validators} dari '@ angular / form'Anda bahkan perlu menambahkan teks untuk memaparkan kesalahan dalam kelas berikut.
kelas eksport AppComponent {email = FormControl baru ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('diperlukan')? 'Anda mesti memasukkan nilai': this.email.hasError ('e-mel')? 'Bukan e-mel yang sah': ''} hide = true}Merujuk kepada prosedur di atas, anda perlu memasukkan kod berikut di app.module.ts fail untuk mengimport modul yang diperlukan.
import {FormsModule, ReactiveFormsModule} dari '@ angular / form' import {MatIconModule} dari '@ angular / material'Kemudian, anda perlu menambahkan modul ini di import: [] bahagian.
- Butang radio
Tombol Radio umumnya digunakan untuk memilih pilihan di antara pelbagai pilihan. Anda boleh melihat kod berikut untuk rujukan.
Untuk app.component.html fail,
Jantina
Lelaki Perempuan
Untuk app.component.css fail,
mat-radio-butang {Padding-left: 50px}Sekarang, anda perlu mengimport MatRadioModule dan tambahnya import: [] bahagian yang terletak di app.module.ts fail.
Kemudian, anda perlu menjalankan projek anda untuk memaparkan hasilnya.
Melangkah ke hadapan, saya akan membincangkan CDK Bahan Sudut.
CDK Bahan Sudut
CDK, juga dikenali sebagai Kit Dev Komponen , adalah perpustakaan tingkah laku yang telah ditentukan dalam Bahan Sudut, yang merupakan sekumpulan alat yang melaksanakan umum corak interaksi dan ciri aplikasi . Ia tidak mempunyai gaya khusus untuk Reka Bentuk Bahan. Mari kita lihat contoh CDK.
- Medan Teks
Komponen Bidang Teks menyediakan utiliti untuk bekerja dengan bidang input teks. Anda boleh menggunakan komponen CDK pada Medan Teks untuk mengubah ukuran input. Mari kita lihat contoh cara melaksanakannya.
Untuk app.component.html fail,
CDK Bahan Sudut
Saiz fon 10px 12px 14px 16px 18px 20px Autosize textarea
Untuk app.component.ts fail, anda perlu mengimport komponen yang diperlukan terlebih dahulu.
import {CdkTextareaAutosize} dari '@ angular / cdk / text-field' import {NgZone, ViewChild} dari '@ angular / core' import {take} dari 'rxjs / operator'Sekarang, anda perlu menaip kod berikut di dalam kelas.
cara menggunakan kelas pengimbas
kelas eksport AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (ambil (1)). langganan (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Seterusnya, anda perlu mengimport MatSelectModule dan tambahnya import: [] bahagian yang terletak di app.module.ts fail.
Akhirnya, anda perlu menjalankan projek anda untuk memaparkan hasilnya.
Ini bukan kesimpulannya dan terdapat beberapa komponen lain dalam Bahan Sudut. Anda boleh merujuknya dari laman web rasmi Bahan Sudut.
Dengan ini, saya ingin menamatkan blog saya. Saya harap anda jelas mengenai asas-asas Bahan Sudut.Sekiranya anda mempunyai keraguan atau pertanyaan mengenai artikel ini, jangan ragu untuk menghantarnya di bahagian komen di bawah.
Sekiranya anda ingin mempelajari semua yang baru anda pelajari dari blog ini, dan banyak lagi Sudut , dan arahkan karier anda ke arah Pembangun Sudut yang mahir, kemudian pertimbangkan untuk mendaftar untuk kami ' .
Ada soalan untuk kami? Sila sebutkan di bahagian komen blog 'Bahan Sudut' ini dan kami akan menghubungi anda secepat mungkin.