آشنایی با Layouts ها در طراحی متریال

Layouts

با شما هستم با بررسی Layouts ها در طراحی متریال دیزاین، ما در چندین مطلب گذشته به بررسی این ویژگی ها پرداختیم و در این مطلب به Layouts رسیدیم از خصوصیت های مهم در material است پیشهاد میکنم تا انتها همراه ما باشید.

HTML5 المنت های container زیر را دارد:

  • <div> – یک container جنریک برای محتوای HTML فراهم می کند.
  • <header> – قسمت Header را نمایش می دهد.
  • <footer> – قسمت footer را نمایش می دهد.
  • <article> – قسمت اصلی محتوا را نمایش می دهد.
  • <section> – برای بخش های مختلف، container جنریک فراهم می کند.

DML کلاس های CSS مختلفی را برای اعمال بهینه سازی های بصری و رفتاری روی container ها فراهم می کند. لیست زیر کلاس های موجود و تاثیر آن ها را نشان می دهد.

mdl-layout: یک container را به عنوان MDL معرفی می کند. در المنت container خارجی موردنیاز است.

mdl-js-layout: رفتارهای ابتدایی یک mdl را به layout اضافه می کند.

mdl-layout__header:  یک container را به عنوان MDL معرفی می کند. در المنت header موردنیاز است.

mdl-layout-icon: برای اضافه کردن آیکون به اپلیکیشن استفاده می شود. اگر آیکون منو هم قابل دیدن باشد، توسط آن override می شود.

mdl-layout__header-row: Container را به عنوان یک سطر عنوان MDL شناسایی می کند. در container مربوط به محتوای header موردنیاز است.

mdl-layout__title: متن layout title را مشخص می کند. در container مربوط به layout title موردنیاز است.

mdl-layout-spacer:  برای تراز کردن المنت ها در یک header یا drawer استفاده می شود. برای پر کردن فضای خالی باقی مانده بزرگ می شود. معمولا برای المنت هایی که از سمت راست تراز شده اند، استفاده می شود.

mdl-navigation: container را به عنوان MDL navigation group معرفی می کند. در المنت nav موردنیاز است.

mdl-navigation__link: anchor (تگ لینک) را به عنوان MDL navigation link معرفی می کند. در المنت های header یا drawer anchor موردنیاز است.

mdl-layout__drawer: container را به عنوان MDL layout drawer مشخص می کند. در المنت drawer container موردنیاز است.

mdl-layout__content: container را به عنوان MDL layout content مشخص می کند. در المنت main استفاده می شود.

mdl-layout__header- – scroll: محتوای header را اسکرول می دهد. این گزینه روی المنت header اختیاری است.

mdl-layout- – fixed-drawer: drawer را همیشه visible می کند، حتی در صفحه های کوچک هم قابل دیدن هستند. استفاده از آن در المنت container خارجی اختیاری است.

mdl-layout- – fixed-header: header را همیشه visible می کند، حتی در صفحه های کوچک هم قابل دیدن هستند. استفاده از آن در المنت container خارجی اختیاری است.

mdl-layout- – large-screen-only: یک المنت را در صفحه نمایش های کوچک پنهان می کند. استفاده از آن در هر یک از المنت های child مربوط به mdl-layout اختیاری است.

mdl-layout- -small-screen-only: یک المنت را در صفحه نمایش های بزرگتر پنهان می کند. استفاده از آن در هر یک از المنت های child مربوط به mdl-layout اختیاری است.

mdl-layout__header- -waterfall: امکان استفاده از افکت “waterfall” را در header های چندخطی می دهد. استفاده از آن در المنت header اختیاری است.

mdl-layout__header- -transparent: header را transparent می کند و آن را بالای layout background می کشد. استفاده از آن در المنت header اختیاری است.

mdl-layout__header- -seamed: header را بدون shadow استفاده می کند. استفاده از آن در المنت header اختیاری است.

mdl-layout__tab-bar: container را به عنوان یک MDL tab bar مشخص می کند. درالمنت درون header (tabbed layout) موردنیاز است.

mdl-layout__tab: anchor را به عنوان یک MDL tab link مشخص می کند. در المنت tab bar anchor موردنیاز است.

is-active: یک tab را به عنوان تب اکتیو پیش فرض مشخص می کند. استفاده از آن در المنت های tab bar anchor و tab sectionهای مربوطه اختیاری است.

mdl-layout__tab-panel: container را به عنوان یک پنل tab content مشخص می کند. استفاده از آن در المنت tab section لازم است.

mdl-layout- -fixed-tabs: از تب های ثابت به جای تب های پیش فرض که قابلیت اسکرول دارند، استفاده می کند. استفاده از آن در المنت container خارجی اختیاری است ولی در header مجاز نیست.

مثال:

مثال های زیر نمونه های مختلفی از استفاده کلاس mdl-layout برای استایل دادن به containerهای مختلف را نشان می دهد.

Fixed Drawer

برای ایجاد یک قالب با fixed drawer اما بدون header از کلاس های MDL زیر استفاه می کنیم.

  1. Mdl-layout: یک div را به عنوان یک کامپوننت MDL مشخص می کند.
  2. Mdl-js-layout: رفتارهای اولیه MDL را به div خارجی اضافه می کند.
  3. Mdl-layout- -fixed-drawer: drawer را همیشه visible نگه می دارد و در صفحه نمایش های بزرگ آن را باز می کند.
  4. Mdl-layout__drawer: div را به عنوان MDL layout drawer مشخص می کند.
  5. Mdl-layout-title: متن layout title را مشخص می کند.
  6. Mdl-navigation: div را به عنوان MDL navigation group مشخص می کند.
  7. Mdl-navigation__link: anchor را به عنوان MDL navigation link مشخص می کند.
  8. Mdl-layout__content: div را به عنوان MDL layout content مشخص می کند.

Mdl_fixeddrawer.htm


<html>
<head>
<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>
<!-- No header, and the drawer stays open on larger screens (fixed drawer).-->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>

خروجی:

Layouts

بعد از کلیک روی drawer:

Layouts

Fixed Header

برای ایجاد یک قالب با fixed header علاوه بر کلاس های بالا، کلاس زیر هم استفاده می شود:

  1. Mdl-layout- -fixed-header: header را همیشه visible نگه می دارد، حتی در صفحه نمایش های کوچک هم قابل دیدن است.

mdl-fixedheader.htm


<html>
<head>
<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>
<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" style="color:gray">Home</a>
<a class="mdl-navigation__link" href="" style="color:gray">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>

 

خروجی:

Layouts

بعد از کلیک :

Layouts

Fixed Header and Drawer

برای ایجاد یک قالب با fixed header و یک fixed drawer، کلاس های زیر را نیز باید اضافه کنیم:

  1. Mdl-layout- -fixed-drawer: drawer را همیشه visible نگه می دارد و آن را در صفحه نمایش های بزرگ باز می کند.
  2. Mdl-layout- -fixed-header: header را همیشه visible نگه می دارد و آن را در صفحه نمایش های کوچک باز می کند.

mdl-fixedheader.htm

 


<html>
<head>
<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>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="" style="color:gray">Home</a>
<a class="mdl-navigation__link" href="" style="color:gray">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">Hello World!</div>
</main>
</div>
</body>
</html>

 

خروجی :

Layouts

بعد از کلیک :

Layouts

Scrolling header

برای ایجاد یک قالب با header ای که اسکرول می کند، کلاس زیر را اضافه می کنیم:

  1. Mdl-layout- -header- -scroll: header را با محتوای آن اسکرول می کند.

Mdl_scrollingheader.htm

 


<html>
<head>
<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>
<!-- Uses a header that scrolls with the text, rather than staying locked at the top -->
<div class="mdl-layout mdl-js-layout ">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>

خروجی :

Layouts

بعد از کلیک :

Layouts

Contracting header

برای ایجاد یک قالب با header ای که با اسکرول به سمت پایین تغییر می کند، کلاس های زیر را اضافه می کنیم.

  1. Mdl-layout__header- -waterfall: امکان استفاده از افکت “waterfall” را در headerهای چند خطی می دهد.

mdl-waterfallheader.htm

 


<html>
<head>
<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>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout ">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
<br/><br/><br/><br/><br/><br/><br/><br/>...
</div>
</main>
</div>
</body>
</html>

خروجی :

Layouts

بعد از اسکرول :

Layouts

 

Fixed Header with scrollable tabs:

برای ایجاد قالب هایی با header هایی که تب های قابل اسکرول شدن دارند، کلاس های زیر را اضافه می کنیم:

  1. Mdl-layout__tab-bar: container را به عنوان یک MDL tab bar مشخص می کند.
  2. Mdl-layout__tab: anchor را به عنوان یک MDL tab link مشخص می کند.
  3. Mdl-layout__tab-panel: container را به عنوان یک tab content panel مشخص می کند.

Mdl_scrollableheader.htm

 


&nbsp;

<html>
<head>
<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>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">Tab 1 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">Tab 2 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>

 

خروجی :

Layouts

اسکرول بین تب ها:

Layouts

Fixed Header with fixed tabs

برای ایجاد قالبی با یک Header که تب های ثابتی دارد، کلاس زیر را اضافه می کنیم:

  1. Mdl-layout- -fixed-tabs: به جای تب های قابل اسکرول از تب های ثابت استفاده می کند.

mdl-fixedtabheader.htm

 


<html>
<head>
<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>
<!-- The drawer is always open in large screens. The header is always shown, even in small screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
<header class="mdl-layout__header">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">HTML5 Tutorial</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">HTML5 Tutorial</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link" href="">About</a>
</nav>
</div>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<div class="page-content">Tab 1 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<div class="page-content">Tab 2 Contents</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<div class="page-content">Tab 3 Contents</div>
</section>
</main>
</div>
</body>
</html>

 

خروجی :

 

Layouts

فاطمه زکایی

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

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

دیدگاه‌ها

*
*

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

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