Bahan Sudut
Material Design, nama Cina: Material Design Language, adalah bahasa desain baru yang diluncurkan oleh Google, yang menurut Google dirancang untuk memberikan "tampilan dan nuansa" yang lebih konsisten dan lebih luas untuk ponsel, tablet, desktop, dan "platform lainnya".
Menurut Google, Desain Material didasarkan pada "sentuhan nyata, terinspirasi oleh studi kertas dan tinta," dan mampu memungkinkan pengguna untuk "memahami isyarat visual yang digunakan untuk menggantikan dunia nyata" "tanpa bertentangan dengan prinsip-prinsip mekanika". Selain itu, prinsip-prinsip dasar cahaya, permukaan, dan gerakan adalah kunci untuk mewakili bagaimana objek bergerak, berinteraksi, dan ada di ruang angkasa dalam kaitannya satu sama lain. Efek cahaya dan bayangan yang realistis menunjukkan jahitan antar balok, membagi ruang, dan menandai bagian yang bergerak. Untuk pengenalan lebih rinci, silakan kunjungi situs web resmi MateriLogin hyperlink terlihat.。
Angular Material adalah serangkaian kerangka kerja UI Angular2+ yang diimplementasikan dengan sempurna oleh tim Angular berdasarkan spesifikasi Material, alamat situs web resmi:Login hyperlink terlihat.
Artikel ini menggunakan komponen MatSnackBar Angular Material untuk merangkum kotak peringatan, mari kita lihat terlebih dahulu renderingnya:
Langkah 1: Instal
Langkah 2: Konfigurasikan animasi
Setelah paket animasi diinstal, impor BrowserAnimationsModule ke dalam aplikasi Anda untuk mengaktifkan dukungan animasi.
app.module.ts impor sebagai berikut:
Langkah 3: Impor tema
Menyertakan tema diperlukan untuk menerapkan semua gaya inti dan tema ke aplikasi Anda.
Untuk memulai tema bawaan, sertakan salah satu tema bawaan Angular Material secara global dalam aplikasi Anda. Jika Anda menggunakan Angular CLI, Anda dapat mengaturnyake styles.scss：
Jika AndaTidak digunakanCLI Sudut, lalu<link>bisa lulusElemen Anda berisi index.html tematik yang sudah dibuat sebelumnya.
Langkah 4: Mulai merangkum kotak peringatan
Masukkan direktori /app/services melalui cd perintah cmd, dan Anda dapat memodifikasi direktori sesuai dengan proyek Anda sendiri dan menjalankan perintah Buat Layanan:
Kode ts adalah sebagai berikut:
Langkah 5: Konfigurasikan gaya CSS kotak prompt
dalam proyekgaya.scssDi bagian bawah file, tambahkan gaya berikut, yang dapat dimodifikasi sesuai dengan situasi Anda yang sebenarnya! Kodenya adalah sebagai berikut:
Langkah 6: Gunakan kotak peringatan
Saya mengambil antarmuka login sebagai contoh dan mengimpornya di login.module.tsLayanan peringatandanModul MatSnackBarBarModul komponen, sebagai berikut:
Digunakan dalam komponen login.component.ts, kodenya adalah sebagai berikut:
Dokumentasi API komponen MatSnackBar:Login hyperlink terlihat.
(Akhir)
|
Diposting pada 22/11/2018 15.00.49
|
|
|
|
