چگونه از Material Design Lite استفاده کنیم؟

Material Design Lite

بعد از انتشار مفاهیم پایه در Material Design که بخش اول آموزش بود در بخش دوم می آموزیم چگونه از Material Design Lite  استفاده کنیم که در ادامه به برسی آن میپردازیم.

دو راه برای استفاده از آن وجود دارد:

  • Local Installation – می توانید فایل های {primary}-{accent}.min.css و material.min.js را دانلود کرده و آن ها را به کد HTML خود اضافه کنید.
  • CDN Based Version – می توانید این فایل ها را به صورت مستقیم از Content Delivery Network (CDN) وارد کد HTML خود اضافه کنید.

Local Installation

  • به این لینک رفته و آخرین ورژن را دانلود می کنیم.
  • سپس فایل min.js دانلود شده را در فولدر پروژه به طور مثال /js و material.min.css را در فولدر /css قرار می دهیم.

مثال:

حال می توانید کدهای css و js را به صورت زیر در HTML خود به کار ببرید.


html>
<head>
<title>The Material Design Lite Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="material.min.css">
<script src="material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">Features</a>
<a class="mdl-navigation__link" href="">About Us</a>
<a class="mdl-navigation__link" href="">Log Out</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>

کد بالا، نتیجه زیر را تولید می کند:

Material Design Lite

CDN Base Version

می توانید فایل های js و css را به صورت مستقیم از Content Delivery Network (CDN) وارد کد HTML نمایید. Storage.googleapis.com محتوای مربوط به آخرین ورژن را فراهم کرده است.

مثال:

حال اجازه دهید که مثال بالا را این بار با material.js و material.css از Google CDN انجام دهیم.


<html>
<head>
<title>The Material Design Lite Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Material Design</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">Features</a>
<a class="mdl-navigation__link" href="">About Us</a>
<a class="mdl-navigation__link" href="">Log Out</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>

این کد، نتیجه زیر را تولید می کند:

Material Design Lite

فاطمه زکایی

فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

ما یک پرسشنامه‌ی کوچولو داریم، که قول میدیم وقتتون رو خیلی نمی‌گیره، ولی کلی به ما کمک می‌کنه، چون هم assessment مونه ,و هم شما به ما در این زمینه کمک میکنید.بزن بریم