وباکا

آموزش تخصصی برنامه نویسی وب

در materialize کلاس های متنوعی برای ساخت کادرهای گوناگون و زیبا وجود دارد . این کلاس ها این امکان را به شما می دهد تا به وسیله آن براحتی کادرهای زیبا ایجاد کنید. در زیر جدولی از این کلاس ها به همراه توضیحات آن ها آورده شده است.
ردیفنام کلاس  توضیحات
card عنصر  div که قرار است کادر را ایجاد کند را نشان می دهد.
card-content Identifies div as a card content container and is required on “inner” div.
card-title برای نشاندادن div داخلی یک کادر مورد نیاز است. و محتوای کادر داخل این کلاس قرار می گیرد.
card-action این کلاس داخلی کلاس card قرار می گیرد و محتوای کادر مانند متن ها، دکمه ها، لینک ها و غیره داخل div این کلاس قرار می گیرند.
card-image هنگام به کاربرد تصویر داخل کادر از این کلاس استفاده می کنیم. این کلاس نیز داخل کلاس card قرار می گیرد.
card-reveal نشان دهنده یک div که شامل محتوای متنی می باشد.
activator نشان دهنده یک div شامل متن و تصویر می باشد . این کلاس برای نمایش توضیحات تصویر به کار می رود.
card-panel نشان دهنده یک کادر ساده همراه با سایه و padding
card-small نشان دهنده یک کادر کوچک با ارتفاع 300 پیکسل
card-medium نشان دهنده یک کادر متوسط با ارتفاع 400 پیکسل
card-large نشان دهنده یک کادر بزرگ با ارتفاع 500 پیکسل

در مثال زیر نحوه استفاده از کلاس های فوق نمایش داده شده است .

<!DOCTYPE html>
<html>
<head>
<title>The Materialize Cards Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script> 
</head>
<body class="container"> 
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-content">
<span class="card-title"><h3>Learn HTML5</h3></span>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-image">
<img src="html5-mini-logo.jpg"> 
</div>
<div class="card-content"> 
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
</div> 
<div class="row">
<div class="col s12 m6">
<div class="card blue-grey lighten-4">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="html5-mini-logo.jpg"> 
</div>
<div class="card-content activator"> 
<p>Click the image to reveal more information.</p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">HTML5<i class="material-icons right">close</i></span>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue-grey"><i class="material-icons">share</i></button>
<a class="right blue-grey-text" href="http://www.tutorialspoint.com">www.tutorialspoint.com</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m3">
<div class="card-panel teal">
<span class="white-text">Simple Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card small teal">
<span class="white-text">Small Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card medium teal">
<span class="white-text">Medium Card</span>
</div>
</div>
<div class="col s12 m3">
<div class="card large teal">
<span class="white-text">Large Card</span>
</div>
</div>
</div> 
</body> 
</html>

 
 خروجی بصورت زیر خواهد بود

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

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

فهرست مطالب