Pengenalan Praktikal untuk Reka Bentuk Bahan Lite oleh Google

pada tahun 2014 Google menerbitkan spesifikasi reka bentuk bahan, bahasa visual yang bertujuan untuk menyatukan prinsip reka bentuk yang kukuh, pengalaman pengguna yang konsisten di seluruh platform dan peranti yang berbeza, dan inovasi teknologi dan saintifik.

Julai 2015 menyaksikan Google Release Material Design Lite, perpustakaan front-end yang direka untuk memudahkan untuk menambah rupa reka bentuk bahan dan merasa ke laman web.

Dalam artikel ini saya memberi tumpuan kepada prinsip asas dan komponen reka bentuk bahan berikut dan bagaimana anda boleh melaksanakannya menggunakan Perpustakaan Reka Bentuk Bahan (MDL):

Typography
warna
Layout
kad

Takeaways Key

Reka Bentuk Bahan Lite (MDL) oleh Google adalah perpustakaan front-end yang memudahkan pelaksanaan estetika reka bentuk bahan ke dalam projek web, menjadikannya lebih mudah untuk mengekalkan pengalaman pengguna yang konsisten di pelbagai platform.
• MDL boleh dimasukkan ke dalam projek anda menggunakan CDN Google untuk fail CSS dan JavaScript, atau dengan memuat turun dan menganjurkan fail sendiri, dengan arahan persediaan terperinci tersedia untuk pelbagai persekitaran termasuk Bower dan NPM.
Perpustakaan menawarkan sistem tipografi yang mantap menggunakan fon Roboto dan NOTO, menyokong pelbagai skrip dan menyediakan kelas yang telah ditetapkan untuk menggunakan skala tipografi yang konsisten.
• MDL menyediakan sistem warna yang disesuaikan, yang membolehkan pemaju memilih warna utama dan aksen dari palet yang telah ditetapkan, meningkatkan daya tarikan visual sambil mengekalkan garis panduan kebolehgunaan.
Komponen MDL utama seperti susun atur, kad, dan tab direka untuk menjadi responsif dan modular, memanfaatkan metodologi Flexbox dan BEM untuk memudahkan seni bina CSS yang lebih berstruktur dan berskala.
• Projek Demo
• Projek demo untuk artikel ini dipanggil Kaptain Kitty. Ia adalah templat HTML yang bertujuan untuk menggambarkan bagaimana anda boleh menggunakan konsep reka bentuk bahan dan komponen MDL yang saya bincangkan dalam artikel ini ke laman web.

Jika anda ingin meletakkan lite reka bentuk bahan pada langkahnya semasa anda menyelam ke dalam artikel, anda memerlukan editor kod kegemaran anda dan penyemak imbas terkini moden.

anda boleh melihat projek demo dan kod sumbernya di Codepen:

Lihat templat demo pena menggunakan bahan reka bentuk bahan oleh SitePoint (@SitePoint) pada codepen.

mari kita mulakan.

termasuk lite reka bentuk bahan dalam projek anda

Ketika termasuk MDL dalam projek anda, anda mempunyai pilihan berikut:

• Muatkan fail CSS dan JavaScript yang diperlukan menggunakan [CDN Google] (Rangkaian Penghantaran Kandungan).
3
• Muat turun dan bina kod sumber dari projek MDL di GitHub.
• Jika anda menggunakan Bower untuk menguruskan projek anda, anda boleh menaip arahan berikut untuk memasang fail perpustakaan MDL dalam folder Bower_Components: Bower Pasang bahan reka bentuk-lite ---- 🎜>
Jika npm adalah pengurus pakej pilihan anda, jalankan arahan berikut untuk memasang fail MDL dalam folder Node_modules: NPM Pasang bahan reka bentuk-lite ---elave
• Google mengesyorkan menggunakan fail CSS dan JavaScript yang dihoskan pada CDN mereka. Inilah kaedah yang anda dapati di halaman demo untuk artikel ini.

Pertama, di bahagian dokumen HTML anda, sertakan rujukan kepada fail MDL CSS, ikon reka bentuk bahan Google, dan lembaran projek, di mana anda akan menambah penyesuaian anda sendiri:

Seterusnya, sebelum tag penutup , tambahkan rujukan ke fail MDL JavaScript:

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
</span><span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
</span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

tipografi dalam reka bentuk bahan lite

<span><span><span><script> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
</span></span><span><span></span><span><span></span>></span></span>

Typefaces Reka Bentuk Bahan untuk Bahasa Inggeris dan Bahasa Inggeris (Latin, Greek, dan Cyrillic Watak) adalah Roboto dan Noto.

Noto juga menyokong skrip padat seperti skrip Cina, Jepun, dan Korea, dan tinggi seperti bahasa Asia Tenggara dan Timur Tengah, mis., Arab, Hindi, dan lain -lain

3

Untuk watak Latin, Yunani, dan Cyrillic, spesifikasi reka bentuk bahan mencadangkan skala tipografi 12, 14, 16, 20, dan 34. Anda boleh menggunakan prinsip tipografi reka bentuk bahan menggunakan MDL dengan menambahkan satu set kelas tertentu ke markup.

contohnya, menambah .mdl-typography-dinsplay-2 ke tag

dan .mdl-typography-Display-1 ke tag

, menambah nilai saiz fon 45px dan 34px, masing-masing :

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span></span>

MDL mempunyai beberapa kelas dengan skala tipografi, kebolehcapaian, dan prinsip kebolehbacaan yang dibakar. Ini menjadikannya lebih mudah untuk memaparkan kandungan teks yang indah yang menyenangkan untuk dibaca tanpa mengira peranti yang digunakan untuk mengaksesnya.

<span><span><span><h1 id="class-span-mdl-typography-display-span-gt"> class<span>="mdl-typography--display-2"</span>></h1></span>Title<span><span></span>></span>
</span><span><span><span><p> class<span>="mdl-typography--display-1"</span>></p></span>
</span>  Sub-title
<span><span><span></span>></span></span></span></span>

Untuk senarai lengkap kelas tipografi, lawati halaman komponen tipografi MDL di GitHub.

memilih warna untuk projek MDL anda

Ambil perhatian nama fail stylesheet perpustakaan MDL: material.indigo-ink.min.css . Nama menunjuk kepada palet warna reka bentuk bahan yang dilaksanakan dalam stylesheet. Palet warna lalai menggunakan indigo sebagai warna primer dan merah jambu sebagai warna aksen. Tetapi anda tidak terjebak dengan ini. Berikut adalah cadangan Reka Bentuk Bahan mengenai bagaimana untuk mengerjakan palet warna tersuai dan cara melaksanakannya menggunakan MDL.

Prinsip Warna Reka Bentuk Bahan

Reka bentuk bahan suka menggabungkan warna, bayang -bayang, dan sorotan yang berani dan diredam:

Warna harus tidak dijangka dan bersemangat.
Spesifikasi reka bentuk bahan google

Walau bagaimanapun, ini tidak menyentuh warna rawak di laman web anda. Cukup sebaliknya.

Reka bentuk bahan menawarkan pelbagai palet warna yang indah yang berfungsi dengan harmoni bersama. Untuk menjadikannya lebih mudah untuk memilih warna, setiap warna dalam palet mempunyai label nombor serta nilai warna heksadesimal untuk mengenalinya. Garis panduan reka bentuk bahan menunjukkan 500 warna sebagai warna utama. Warna -warna lain yang terbaik digunakan sebagai warna aksen.

Apabila anda membuat pemilihan warna tersuai untuk laman web anda, reka bentuk bahan mengesyorkan bahawa anda memilih tiga warna dari palet utama dan satu warna aksen dari palet sekunder. Berikut adalah contoh:

Hadkan penggunaan warna aksen ke pautan, butang tindakan utama anda, dan beberapa komponen seperti suis dan slider. Elakkan menggunakan warna aksen untuk teks badan:

Juga, garis panduan reka bentuk bahan tidak menggalakkan menggunakan warna aksen di kawasan besar halaman dan di bar aplikasi. Terutama penting adalah tidak menggunakan warna yang sama untuk kedua -dua butang tindakan terapung dan latar belakang:

Sekarang anda mempunyai pemahaman yang kukuh tentang garis panduan warna reka bentuk bahan, sudah tiba masanya untuk membuat pemilihan warna yang hebat untuk projek MDL anda. Inilah caranya

Menyesuaikan palet warna lalai dalam reka bentuk bahan lite

anda boleh beralih dari palet indigo-pink lalai ke palet tersuai anda sendiri dalam salah satu cara berikut.

Jika anda menggunakan CDN Google, seperti yang saya lakukan dalam demo untuk artikel ini, ikuti langkah -langkah ini:

Cari URL ke fail STYLESEHEE MDL di dalam atribut HREF dari tag di bahagian halaman HTML anda

Ganti

indigo
• dengan warna primer yang anda pilih dan
merah jambu
• dengan warna aksen kegemaran anda. Contohnya, katakan warna yang anda pilih dari palet reka bentuk bahan adalah teal sebagai primer dan ambar sebagai aksen. Inilah url ke MDL Stylesheet yang dihoskan di Google CDN kelihatan seperti:

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

  anda sudah selesai!

  Jika anda lebih suka menjadi tuan rumah fail MDL yang disusun dan diminimumkan pada pelayan anda, laman web MDL telah dilindungi. Di sana anda akan dapati alat penyesuaian dan pratonton, yang membolehkan anda memilih palet warna primer dan aksen dari roda warna interaktif. Anda kemudian boleh memuat turun CSS untuk tema pilihan anda dan pasangkannya terus ke dalam projek anda:

  

  Demo HTML untuk artikel ini menggunakan palet indigo-pink lalai, tetapi anda bebas untuk bereksperimen dengan pilihan warna yang berbeza menggunakan salah satu kaedah yang digariskan di atas.
  komponen susun atur MDL
  MDL menawarkan beberapa komponen web yang biasa digunakan, termasuk susun atur, butang, kad, suis, dan lain-lain. Mula membina struktur templat HTML anda menggunakan komponen susun atur bahan reka bentuk bahan.
  MDL melekatkan keseluruhan susun atur di dalam elemen kontena dengan kelas .MDL-LAYOUT .MDL-JS-LAYOUT.
  Mula dengan menambahkan coretan kod berikut selepas pembukaan tag dokumen HTML anda:

  <span><span><span><script> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
  </span></span><span><span></span><span><span></span>></span></span>

  MDL menggunakan CSS Flexbox untuk susun atur. Elemen .MDL-Layout adalah bekas flex dengan harta flex-arah yang ditetapkan ke lajur.
  Komponen susun atur termasuk empat sub-komponen berikut:
  susun atur navigasi
  grid
  tab
  footer
  menggunakan tab untuk navigasi
  anda boleh membina navigasi anda dengan memilih dari pilihan berikut:
  header telus
  laci tetap, tiada header
  Header Tetap
  pengepala dan laci tetap
  header menatal
  header air terjun - header yang kontrak pada skrol halaman.
  Anda bebas untuk melihat pilihan di atas pada bahagian susun atur navigasi MDL dan bereksperimen dengan masing -masing untuk projek anda.
  Bagi demo HTML yang mengiringi artikel ini, saya telah memilih navigasi tab menggunakan komponen tab. Keindahan tab adalah, walaupun kandungannya dipotong ke dalam skrin yang saling eksklusif, semua bahagian diletakkan secara fizikal pada halaman yang sama. Ini bermakna apabila pengguna mengklik pada pautan navigasi tab, mereka tidak perlu menunggu pelayan memuatkan halaman baru dalam penyemak imbas mereka. Semua kandungan tersedia dengan serta -merta, dengan itu mewujudkan pengalaman yang menyenangkan untuk pelawat tapak.
  dengan cepat membina susun atur header tab, ikuti langkah -langkah ini:
  Tambahkan dua lagi kelas ke elemen kontena susun atur yang anda dikodkan lebih awal-.mdl-layout-header-fixed dan .mdl-layout--fixed-tabs:

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span></span>

  Perhatikan bagaimana MDL menganjurkan CSS menggunakan kelas BEM Namespaced. Jika anda tidak biasa dengan metodologi BEM, bekerja dengan BEM pada skala - nasihat dari pemaju atas oleh Patrick Catanzariti menawarkan gambaran keseluruhan yang hebat.
  Seterusnya, kod bahagian
  seperti berikut:

  <span><span><span><h1 id="class-span-mdl-typography-display-span-gt"> class<span>="mdl-typography--display-2"</span>></h1></span>Title<span><span></span>></span>
  </span><span><span><span><p> class<span>="mdl-typography--display-1"</span>></p></span>
  </span>  Sub-title
  <span><span><span></span>></span></span></span></span>

  Akhirnya, anda perlu menambah panel kandungan yang sepadan:

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

  panel dengan mempunyai kelas .is-aktif dan akan dipaparkan secara lalai.

  meletakkan kandungan tambahan dalam komponen laci

  Demo juga menggunakan bahagian laci. Laci adalah panel sampingan yang boleh anda sembunyikan dan tunjukkan dengan klik butang. Anda juga boleh memilih untuk memastikan laci terbuka dan tetap supaya kandungannya sentiasa tetap dalam pandangan penuh.

  

  laci sangat bagus untuk menambah widget, butang perkongsian, dan pautan navigasi tambahan ke laman web tanpa menggagalkan reka bentuk.

  Menggunakan coretan kod yang anda tambahkan lebih awal, hanya selepas bahagian

  , tulis kod di bawah untuk menambah komponen laci ke susun atur anda:

  <span><span><span><script> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
  </span></span><span><span></span><span><span></span>></span></span>

  Lihat coretan ini dalam tindakan atau periksa kod sumber projek demo untuk pelaksanaan penuh komponen navigasi dan laci tab.

  grid lite reka bentuk bahan

  Reka bentuk bahan Lite menggunakan grid 12-kolumn untuk skrin desktop, grid 8-lajur untuk tablet (sehingga 800px), dan grid 4-kolumn untuk saiz skrin mudah alih (sehingga 500px).

  anda melampirkan lajur grid di dalam elemen kontena dengan kelas .mdl-grid:

  Secara lalai, elemen kontena lajur grid merangkumi keseluruhan lebar skrin. Jika ini bukan apa yang anda mahukan, terpulang kepada anda untuk menentukan lebarnya dalam lembaran styles anda.

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="http://fonts.googleapis.com/css?family=Roboto:400,100,500,300italic,500italic,700italic,900,300"</span>></span></span></span>

  Contohnya, projek demo untuk artikel ini melaksanakan kedua-dua skrin penuh dan bahagian berkotak berpusat:

  Susun atur dicapai dengan membungkus setiap bahagian dalam elemen grid .mdl yang berbeza dan memberikan bahagian kotak kelas tambahan dengan nilai maksimum CSS maksimum 960px.

  html:

  dan CSS:

  <span><span><span><h1 id="class-span-mdl-typography-display-span-gt"> class<span>="mdl-typography--display-2"</span>></h1></span>Title<span><span></span>></span>
  </span><span><span><span><p> class<span>="mdl-typography--display-1"</span>></p></span>
  </span>  Sub-title
  <span><span><span></span>></span></span></span></span>

  Juga, jika anda ingin tidak mempunyai margin antara lajur grid, MDL mempunyai kelas berguna yang boleh anda tambahkan ke elemen kontena lajur grid-.mdl-grid-tidak ada:

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.teal-amber.min.css"</span>></span></span></span>

  ini akan memberi anda sesuatu seperti ini:

  <span><span><span><div> class<span>="mdl-layout mdl-js-layout"</span>>
    <span><!-- All your template markup goes here -->
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  Seterusnya, anda membina lajur di dalam elemen grid .MDL dengan menambahkan elemen

  dengan kelas. MDL-sel. Inilah kod untuk grid 3-kolumn:

  Jika anda ingin mengatasi saiz lajur lalai, anda perlu menambah kelas .mdl-cell-{Number} -col dengan nombor antara 1 hingga 12. Berikut adalah kod untuk grid 2 lajur :

  lihat demo langsung di Codepen.

  <span><span><span><div> class<span>="mdl-layout
  </span><span><span>            mdl-js-layout mdl-layout--fixed-header
  </span></span><span><span>            mdl-layout--fixed-tabs<span>"</span>></span>
  </span><span><span><span></span></span></span>
  </div></span>></span></span>

  Jika reka bentuk anda memerlukannya, MDL menawarkan kelas utiliti berguna untuk menyembunyikan lajur pada saiz skrin tertentu:

  • .mdl-cell-Hide-desktop menyembunyikan lajur pada saiz skrin desktop (lebih besar daripada 840px)
  • .mdl-cell-Hide-tablet menyembunyikan lajur pada saiz skrin tablet (lebih besar daripada 480px)
  • .mdl-cell-hide-phone menyembunyikan lajur pada saiz skrin mudah alih (kurang daripada dan sehingga 480px)

  Untuk melihat ini dalam tindakan, lihat bahagian selamat datang projek demo pada saiz skrin yang berbeza. Anda akan segera melihat bahawa bulatan merah jambu hiasan di sebelah item senarai tidak dapat dilihat pada skrin kecil:

  

  komponen kad lite reka bentuk bahan

  Corak UI Kad telah mendapat populariti untuk beberapa waktu sekarang, terutama terima kasih kepada laman web seperti Pinterest.

  inilah cara reka bentuk bahan mentakrifkan komponen kad:

  Kad adalah sekeping bahan yang berfungsi sebagai titik masuk ke maklumat yang lebih terperinci. Kad boleh mengandungi foto, teks, dan pautan mengenai subjek tunggal.

  Reka bentuk bahan spec

  
  

  Anda boleh menambah pelbagai jenis kandungan ke kad tunggal, tetapi pastikan ia semua berkaitan dengan topik teras. Juga, elakkan meletakkan terlalu banyak maklumat atau terlalu banyak pautan dan butang di dalam kad. Sebaliknya, tunjuk pengguna ke halaman khusus di mana anda telah meletakkan maklumat yang lebih terperinci mengenai topik tersebut.

  Berikut adalah cara anda boleh menambah kad mudah ke halaman anda menggunakan komponen kad MDL:

  anda membungkus kandungan kad di dalam elemen kontena dengan kelas .mdl-kad. Kelas DP.

  <span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"</span>></span> 
  </span><span><span><span><link> rel<span>="stylesheet"</span>
  </span></span><span>      <span>href<span>="https://fonts.googleapis.com/icon?family=Material+Icons"</span>></span>
  </span><span><span><span><link> rel<span>="stylesheet"</span> href<span>="css/styles.css"</span>></span></span></span></span></span>

  Seterusnya, anda menambah bekas untuk bahagian kad berikut:

  Tajuk kad, menggunakan kelas .mdl-card__title

  Media kad, menggunakan kelas .mdl-card__media
  kandungan teks kad menggunakan kelas .mdl-card__supporting-text
  tindakan kad menggunakan kelas .mdl-card__actions, jika kad anda termasuk butang tindakan atau elemen yang serupa.
  • Akhirnya, anda mengeluarkan struktur ini dengan kandungan yang sesuai memastikan tag tajuk anda mempunyai kelas .mdl-card__title-text.

  Berikut adalah coretan hidup di Codepen:

  Lihat Kad Lite Reka Bentuk Bahan Pena oleh SitePoint (@SitePoint) pada Codepen.

  Anda juga boleh menghidupkan sel grid ke dalam komponen kad dengan menambahkan kelas .mdl-kad yang sesuai ke elemen dengan kelas sel .mdl:

  Anda boleh mencari pendekatan ini dalam projek demo yang disertakan. Ini adalah cara yang baik untuk mencapai susun atur berjubin yang responsif:

  <span><span><span><script> src<span >="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"</script></span>></span><span>
  </span></span><span><span></span><span><span></span>></span></span>

  Kesimpulan

  Artikel ini telah meneroka Perpustakaan Lite Reka Bentuk Bahan oleh Google dan meletakkannya dalam praktik dalam templat web HTML yang sebenar.

  MDL bukan rangka kerja yang komprehensif seperti, contohnya, bootstrap. Ia tidak mempunyai anda dilindungi untuk semua komponen dan gaya aplikasi anda kemungkinan besar memerlukan. Oleh itu, mengharapkan untuk kod beberapa ciri diri anda.

  Walau bagaimanapun, perpustakaan masih berkembang dan mungkin mengejutkan kita dengan beberapa perkara baru dalam siaran masa depan. Juga, web menawarkan ekosistem reka bentuk bahan yang kaya untuk pereka dan pemaju, kebanyakannya bebas.

  Anda boleh menggunakan templat HTML untuk artikel ini, bersama -sama dengan templat di laman web MDL, sebagai satu lagi sumber untuk mula bereksperimen dengan MDL dan membina projek reka bentuk bahan anda sendiri.

  lihat panduan kami untuk tema UI bahan terbaik.

  Soalan Lazim (Soalan Lazim) Mengenai Reka Bentuk Bahan Lite oleh Google

  Apakah Reka Bentuk Bahan Lite (MDL) dan Bagaimana Ia Berbeza Dari Reka Bentuk Bahan? dan platform. Ia adalah versi reka bentuk bahan yang lebih ringan, sistem reka bentuk yang komprehensif yang menggabungkan teori, sumber, dan alat untuk membuat pengalaman digital. Walaupun reka bentuk bahan adalah bahasa reka bentuk lengkap yang merangkumi pelbagai alat, garis panduan, dan komponen yang luas, MDL adalah subset sistem ini, yang menawarkan rangka kerja yang lebih mudah dan lebih ringan yang lebih mudah dilaksanakan. Ini amat berguna untuk pemaju yang ingin mewujudkan antara muka pengguna yang moden dan anggun tanpa kerumitan sistem reka bentuk bahan penuh. Dengan bahan reka bentuk bahan, anda perlu memasukkan fail MDL CSS dan JavaScript dalam projek anda. Fail -fail ini boleh dimuat turun dari laman web MDL rasmi atau dimasukkan secara langsung dari rangkaian penghantaran kandungan (CDN). Sebaik sahaja anda memasukkan fail ini, anda boleh mula menggunakan komponen MDL dalam kod HTML anda. Laman web MDL menyediakan dokumentasi dan contoh yang komprehensif untuk membantu anda memahami cara menggunakan setiap komponen. Boleh gunakan untuk membina antara muka pengguna anda. Ini termasuk butang, kotak semak, medan teks, slider, dan banyak lagi. Setiap komponen direka untuk memberikan rupa dan rasa yang konsisten, moden, dan mereka boleh disesuaikan untuk memenuhi keperluan khusus anda. Laman web MDL menyediakan dokumentasi terperinci untuk setiap komponen, termasuk contoh kod dan garis panduan penggunaan.

  Bolehkah saya menggunakan lite reka bentuk bahan untuk projek komersial?

  Ya, bahan reka bentuk bahan terbuka dan bebas untuk digunakan untuk projek peribadi dan komersial. Ia dilesenkan di bawah Lesen Apache 2.0, yang membolehkan anda menggunakan, mengubah suai, dan mengedarkan perisian secara bebas, dengan syarat anda mematuhi syarat -syarat lesen.

  Reka bentuk bahan Lite adalah rangka kerja ringan, mudah digunakan yang memberikan rupa dan rasa yang moden, anggun. Ia direka untuk menjadi mudah dilaksanakan, dengan API yang mudah dan mudah dan dokumentasi komprehensif. Berbanding dengan rangka kerja reka bentuk yang lain, MDL kurang komprehensif tetapi juga kurang kompleks, menjadikannya pilihan yang baik untuk pemaju yang menginginkan sistem reka bentuk yang mudah dan berkesan tanpa overhead kerangka penuh. Serasi dengan semua pelayar? Walau bagaimanapun, ia mungkin tidak berfungsi seperti yang dijangkakan dalam pelayar yang lebih tua atau yang tidak menyokong sepenuhnya piawaian web moden. sangat disesuaikan. Anda boleh menukar warna, fon, dan elemen reka bentuk lain untuk memadankan identiti visual jenama anda. Laman web MDL menyediakan garis panduan terperinci tentang cara menyesuaikan rangka kerja agar sesuai dengan keperluan anda. Ia termasuk sistem grid responsif yang membolehkan anda membuat susun atur yang menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza. Ini menjadikannya mudah untuk membuat laman web dan aplikasi yang kelihatan hebat di kedua-dua desktop dan peranti mudah alih. Menyambut sumbangan dari masyarakat. Anda boleh menyumbang dengan melaporkan pepijat, mencadangkan ciri baru, atau mengemukakan perubahan kod. Semua sumbangan harus mengikuti garis panduan sumbangan projek, yang boleh didapati di laman web MDL. untuk bermula. Ia menyediakan dokumentasi komprehensif, contoh kod, dan garis panduan penggunaan untuk semua komponen MDL. Di samping itu, terdapat banyak tutorial, artikel, dan video dalam talian yang dapat membantu anda mempelajari lebih lanjut mengenai MDL dan cara menggunakannya dengan berkesan dalam projek anda.

Atas ialah kandungan terperinci Pengenalan Praktikal untuk Reka Bentuk Bahan Lite oleh Google. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!