ورود / ثبت نام
0
0

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

493 بازدید
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

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=20335
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
فاطمه زکایی
فاطمه زکایی هستم. فارغ التحصیل کارشناسی مهندسی نرم افزار، مدت سه سال هست که در زمینه توسعه اپلیکیشن های تحت وب و اندروید و همچنین تولید محتوای تخصصی برنامه نویسی تحت وب و اندروید در مجموعه mspsoft در خدمت شما هستم.
مطالب بیشتر
برچسب ها:

نظرات

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.