وب آکادمی

مرجع آموزش طراحی و برنامه نویسی وب

جلسه یازدهم – چیپ ها و مجموعه ها در متریالایز

دسته بندی:آموزش چارچوب متریالایز تاریخ انتشار: 30 دی 1397 برچسب ها : برچسب‌ها:, , , , , ,

متریالایز(materialize) دارای کلاس هایی می باشد که به آن ها اصطلاحا chip گفته می شود. این کلاس ها برای نمایش بهتر اطلاعات کوچک مانند تگ ها ، لیست افراد و غیره به کار می روند.

نام کلاس  توضیحات
chip محتوای یک div را به عنوان یک chip در نظر می گیرد

 

مثال

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Chips 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="chip">           
            <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5            
         </div>
         <div class="chip">           
            HTML 5<i class="material-icons">close</i>
         </div>		 
   </body>   
</html>

خروجی بصورت زیر است:

همچنین متریالایز( materialize) دارای کلاسی هایی می باشد که با استفاده از ان می توان اطلاعاتی دلخواه را دسته بندی کنیم. بطور مثال لیستی از آیتم ها، لیستی از لینک ها و غیره
نام کلاس توضیحات
collection برای یک تگ div و یا ul که محتوای آن یک مجموعه را در بر می گیرد، قرار داده می شود.
collection-item برای تگ <a> و یا <li> که جزو آیتم های مجموعه هستند، قرار می گیرد.
active برای تگ <a> و <li> که داخل مجموعه قصد آنرا داریم که فعال باشد، این کلاس را قرار می دهیم.
with-header Mark the collection to have header.
collection-header برای تگ <a> و <li> که می خواهیم به عنوان هیدر مجموعه باشد، قرار می گیرد.
avatar هنگامی که بخواهیم تگ <a> و <li> را به عنوان یک علامت (avatar) نشان دهیم، از این کلاس استفاده می کنیم.
dismissible این کلاس فقط برای صفحه های لمسی کار می کند و برای کنار زدن آیتم های داخل مجموعه به کار می رود.

 

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

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Collections 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">       
      <h3>Simple Collection</h3><hr/>
      <ul class="collection">
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection of Links</h3><hr/>
      <div class="collection">
         <a href="#" class="collection-item">HTML 5</a>
         <a href="#!" class="collection-item active">JQuery</a>
         <a href="#!" class="collection-item">JavaScript</a>
         <a href="#!" class="collection-item">CSS</a>
      </div>
      <h3>Collection with Header</h3><hr/>
      <ul class="collection with-header">
         <li class="collection-header"><h3>Front End Technologies</h3></li>
         <li class="collection-item">HTML 5</li>
         <li class="collection-item">JQuery</li>
         <li class="collection-item">JavaScript</li>
         <li class="collection-item">CSS</li>
      </ul>
      <h3>Collection with Secondary Content</h3><hr/>
      <ul class="collection">         
         <li class="collection-item"><div>HTML 5<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JQuery<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>JavaScript<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
         <li class="collection-item"><div>CSS<a href="#!" class="secondary-content"><i class="material-icons">cloud</i></a></div></li>
      </ul>
      <h3>Collection with Avatar</h3><hr/>
      <ul class="collection">         
         <li class="collection-item avatar">
            <img alt="HTML5" src="html5-mini-logo.jpg" class="circle">
            <span class="title">HTML5</span>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1.<br/> HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
         <li class="collection-item avatar">
           <i class="material-icons circle green">insert_chart</i>
           <span class="title">HighCharts</span>
            <p></p>
            <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
         </li>
      </ul>
      <h3>Collection with dismissible content</h3><hr/>
      <ul class="collection">
         <li class="collection-item dismissable">HTML 5</li>
         <li class="collection-item dismissable">JQuery</li>
         <li class="collection-item dismissable">JavaScript</li>
         <li class="collection-item dismissable">CSS</li>
      </ul>
   </body>   
</html>

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

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

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

شش − 1 =