آکادمی کدنویسان با هدف برگزاری آموزش های آنلاین راه اندازی شد. با ثبت نام در دوره های پیش رو، تابستان پرباری داشته باشید

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

طراحی واکنش گرا با متریالایز
متریالایز(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>

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

برچسب ها

, , , , , ,

محصولات پیشنهادی


نظرات کاربران


نظرات برای آموزش چارچوب متریالایز | بدون نظر »

کاربر عزیز، لطفاً دیدگاه ارزشمند خود را از طریق فرم زیر برای ما ارسال کنید:

درباره کدنویسان
آکادمی کدنویسان جهت کمک به دانشجویان رشته های کامپیوتر و فناوری اطلاعات و همه علاقمندان به طراحی و برنامه نویسی برای ویندوز، وب و موبایل ایجاد شده است.
بیشتر آموزش های سایت کدنویسان، بصورت رایگان ارائه شده است و بعضی بسته های آموزشی تصویری و نیز نرم افزارهای پیاده سازی شده در ازای پرداخت، قابل دانلود هستند.
هر گونه نظر، انتقاد یا پیشنهادی در مورد مطالب یا عملکرد کدنویسان دارید، حتما با ما در میان بگذارید.
نمادهای اعتماد ما


تماس با ما
  • شماره همراه : ۰۹۱۵۱۶۰۴۰۶۸
  • آی دی تلگرام : @mmoha94
  • پست الکترونیکی : mohammadi.sm@gmail.com
  • آدرس پستی : بیرجند، خیابان پیروزی، پیروزی ۹، پلاک ۲۸
کلیه حقوق متعلق به سایت کدنویسان است، انتشار و کپی برداری از مطالب این سایت غیرمجاز بوده و پیگرد قانونی دارد.