Materialise - Hızlı Kılavuz
Materialize, CSS, JavaScript ve HTML ile oluşturulmuş bir UI bileşen kitaplığıdır. Yeniden kullanılabilir UI bileşenlerini somutlaştırmak, çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olurken, aynı zamanda tarayıcı taşınabilirliği, cihaz bağımsızlığı ve zarif bozulma gibi modern web tasarım ilkelerine bağlı kalmaya yardımcı olur.
Göze çarpan özelliklerinden bazıları aşağıdaki gibidir -
Yerleşik duyarlı tasarım.
Minimum ayak izine sahip standart CSS.
Materyal Tasarım kavramlarını takip edecek şekilde uyarlanmış düğmeler, onay kutuları ve metin alanları gibi yaygın kullanıcı arayüzü kontrollerinin yeni sürümleri
Kartlar, sekmeler, gezinme çubukları, tostlar gibi gelişmiş ve özelleştirilmiş özellikler.
Kullanımı ücretsizdir ve düzgün çalışması için jQuery JavaScript kitaplığı gerektirir.
Çapraz tarayıcı ve yeniden kullanılabilir web bileşenleri oluşturmak için kullanılabilir.
Sorumlu tasarım
Materialise, yerleşik duyarlı tasarıma sahiptir, böylece Materialize kullanılarak oluşturulan web sitesi, cihaz boyutuna göre kendini yeniden tasarlar. Materialise sınıfları, web sitesinin herhangi bir ekran boyutuna sığabileceği şekilde oluşturulur.
Materialize kullanılarak oluşturulan web siteleri PC, tabletler ve mobil cihazlarla tamamen uyumludur.
Genişletilebilir
Materyalleştirmek, tasarım gereği çok minimal ve düzdür. Yeni CSS kuralları eklemenin, mevcut CSS kurallarının üzerine yazmaktan çok daha kolay olduğu gerçeği düşünülerek tasarlanmıştır. Gölgeleri ve koyu renkleri destekler. Renkler ve gölgeler, çeşitli platformlarda ve cihazlarda aynı kalır.
Ve en önemlisi, kullanımı tamamen ücretsizdir.
Bu bölümde, Materialise için uygun bir ortam oluşturmanın farklı yönlerini tartışacağız.
Çevrimiçi Seçeneği Deneyin
Materyalize Programlama ortamını çevrimiçi olarak kurduk, böylece mevcut tüm örnekleri çevrimiçi olarak derleyip çalıştırabilirsiniz. Okuduğunuz şey konusunda size güven verir ve programları farklı seçeneklerle doğrulamanızı sağlar. Herhangi bir örneği değiştirmekten ve çevrimiçi yürütmekten çekinmeyin.
CodingGround'da bulunan çevrimiçi derleyicimizi kullanarak aşağıdaki örneği deneyin
<!DOCTYPE html> <html> <head> <title>The Materialize 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> <div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div> </body> </html>Bu eğitimde verilen örneklerin çoğu için, sizi çevrimiçi derleyiciye götürecek sağ üst köşedeki web sitesi kodu bölümlerimizde bir Deneyin seçeneğini bulacaksınız. Bu yüzden sadece onu kullanın ve öğrenmenin tadını çıkarın.
Materialize Nasıl Kullanılır?
Materialize'ı kullanmanın iki yolu vardır -
Local Installation - İndirebilirsiniz materialize.min.css ve materialize.min.js yerel makinenizdeki dosyaları ve bunu HTML kodunuza ekleyin.
CDN Based Version - Dahil edebilirsiniz materialize.min.css ve materialize.min.js dosyaları doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın.
Yerel Kurulum
Git http://materializecss.com/getting-started.html mevcut en son sürümü indirmek için.
Ardından, indirilen materialize.min.js web sitenizin bir dizinindeki dosya, örneğin / js ve materialize.min.css / css içinde.
Misal
Dahil et css ve js HTML dosyanıza aşağıdaki gibi.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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 = "/materialize/materialize.min.css">
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src = "/materialize/materialize.min.js"></script>
</head>
<body>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>Aşağıdaki sonucu verecektir.
CDN Tabanlı Sürüm
Dahil edebilirsiniz materialize.min.js ve materialize.min.css dosyaları doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza aktarın. cdnjs.cloudflare.com en son sürüm için içerik sağlar.
Bu eğitim boyunca kitaplığın cdnjs.cloudflare.com CDN sürümünü kullanıyoruz.
Misal
Yukarıdaki örneği kullanarak yeniden yazın materialize.min.css ve materialize.min.js cdnjs.cloudflare.com CDN'den.
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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>
<div class = "card-panel teal lighten-2"><h3>Hello World!</h3></div>
</body>
</html>Aşağıdaki sonucu üretecektir -
Materialise, zengin bir renk sınıfı kümesini destekler. Bu renk sınıfları, pazarlamada, yol işaretlerinde ve yapışkan notlarda kullanılan renkler göz önünde bulundurularak ilham alır ve geliştirilir.
- red
- pink
- purple
- deep-purple
- indigo
- blue
- light-blue
- cyan
- teal
- green
- light-green
- lime
- yellow
- amber
- orange
- deep-orange
- brown
- grey
- blue-grey
- black
- white
- transparent
Kullanım
Aşağıda, uygulanan rengi değiştirmek için kullanılabilecek açıklık / koyuluk sınıflarının listesi verilmiştir.
- lighten-1
- lighten-2
- lighten-3
- lighten-4
- lighten-5
- darken-1
- darken-2
- darken-3
- darken-4
- accent-1
- accent-2
- accent-3
- accent-4
Misal
Aşağıdaki örnek, arka planı oluşturmak veya metnin rengini değiştirmek için yukarıdaki sınıfların nasıl kullanılacağını gösterir. Arka plan durumunda, sınıfları olduğu gibi ekleyin ve metin olması durumunda, renk sınıfına '-metin' soneki ve yıldırım sınıfına 'metin-' öneki ekleyin.
materialize_colors.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Colors 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>
<h2>Color Theme Demo</h2>
<hr/>
<div class = "card-panel">
<div class = "card-panel red lighten-2">
<h1>Red Colored Theme</h1>
</div>
<span class = "red-text text-darken-2">
<h2>Red Colored Text</h2>
</span>
<ul>
<li class = "red lighten-5"><p>Using red lighten-5</p></li>
<li class = "red lighten-4"><p>Using red lighten-4</p></li>
<li class = "red lighten-3"><p>Using red lighten-3</p></li>
<li class = "red lighten-2"><p>Using red lighten-2</p></li>
<li class = "red lighten-1"><p>Using red lighten-1</p></li>
<li class = "red"><p>Using red</p></li>
<li class = "red darken-1"><p>Using red darken-1</p></li>
<li class = "red darken-2"><p>Using red darken-2</p></li>
<li class = "red darken-3"><p>Using red darken-3</p></li>
<li class = "red darken-4"><p>Using red darken-4</p></li>
<li class = "red accent-1"><p>Using red accent-1</p></li>
<li class = "red accent-2"><p>Using red accent-2</p></li>
<li class = "red accent-3"><p>Using red accent-3</p></li>
<li class = "red accent-4"><p>Using red accent-4</p></li>
</ul>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, 12 sütunlu bir sıvı duyarlı ızgara sağlar.
Sırasıyla satırları ve sütunları tanımlamak için satır ve sütun stili sınıflarını kullanır.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | row Duyarlı sütunlar için kullanılacak dolgusuz bir kabı belirtir. Bu sınıf, duyarlı sınıfların tamamen duyarlı olması için zorunludur. |
| 2 | col Alt sınıfları olan bir sütun belirtir. |
col farklı ekran türleri için tasarlanmış birkaç alt sınıfa sahiptir.
Küçük Ekranlı Cihazlar için Sütunlar
Aşağıda, genellikle akıllı telefonlar gibi küçük ekranlı cihazlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.
| Sr.No. | Sınıf Adı ve Tanımı | |
|---|---|---|
| 1 | s1 Genişliği% 08,33 olan 12 sütundan birini tanımlar. |
|
| 2 | s2 Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar. |
|
| 3 | s3 Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar. |
|
| 4 | s4 Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar. |
|
| s5 - s11 | ||
| 12 | s12 Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Küçük ekranlı telefonlar için varsayılan sınıf. |
|
Orta Boy Ekranlı Cihazlar için Sütunlar
Aşağıda, orta ekranlı cihazlar, tipik olarak tabletler için sütun düzeyi stillerin bir listesi bulunmaktadır.
| Sr.No. | Sınıf Adı ve Tanımı | |
|---|---|---|
| 1 | m1 Genişliğe sahip 12 sütundan 1'ini% 08.33 olarak tanımlar |
|
| 2 | m2 Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar. |
|
| 3 | m3 Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar. |
|
| 4 | m4 Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar. |
|
| m5 - m11 | ||
| 12 | m12 Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Orta ekranlı telefonlar için varsayılan sınıf. |
|
Büyük Ekranlı Cihazlar için Sütunlar
Aşağıda, genellikle dizüstü bilgisayarlar gibi büyük ekranlı aygıtlar için sütun düzeyinde stillerin bir listesi bulunmaktadır.
| Sr.No. | Sınıf Adı ve Tanımı | |
|---|---|---|
| 1 | l1 Genişliği% 08,33 olan 12 sütundan birini tanımlar. |
|
| 2 | l2 Genişliği% 16,66 olan 12 sütundan 2'sini tanımlar. |
|
| 3 | l3 Genişliği% 25,00 olan 12 sütundan 3'ünü tanımlar. |
|
| 4 | l4 Genişliği% 33,33 olan 12 sütundan 4'ünü tanımlar. |
|
| l5 - l11 | ||
| 12 | l12 Genişliği% 100 olan 12 sütundan 12'sini tanımlar. Büyük ekranlı cihazlar için varsayılan sınıf. |
|
Kullanım
Her alt sınıf, bir aygıtın türüne göre kullanılacak ızgaranın sütun sayısını belirler. Aşağıdaki HTML pasajını düşünün.
<div class = "row">
<div class = "col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on
a large screen.</p>
</div>
</div>Bir HTML öğesinin sınıf özniteliğinde bir alt sınıf belirtilmemişse, kullanılacak varsayılan sütunlar bir cihazda 12'dir.
Misal
materialize_grids.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Grids 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>
<div class = "teal">
<h2>Mobile First Design Demo</h2>
<p>Resize the window to see the effect!</p>
</div>
<hr/>
<div class = "row">
<div class = "col m1 grey center">1</div>
<div class = "col m1 center">2</div>
<div class = "col m1 grey center">3</div>
<div class = "col m1 center">4</div>
<div class = "col m1 grey center">5</div>
<div class = "col m1 center">6</div>
<div class = "col m1 center grey">7</div>
<div class = "col m1 center">8</div>
<div class = "col m1 center grey">9</div>
<div class = "col m1 center">10</div>
<div class = "col m1 center grey">11</div>
<div class = "col m1 center">12</div>
</div>
<div class = "row">
<div class = "col m4 l3 yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4),
and 3 on a large screen (l3).</p>
</div>
<div class = "col s4 m8 l9 grey">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen
(m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, günlük tasarım ihtiyaçları için yararlı olan çeşitli yardımcı sınıflara sahiptir.
Color utility classes - Örneğin, .red, .green, .grey vb.
Alignment utility classes - Örneğin, .valign-wrapper, .left-align, .rightalign, .center-align, .left, .right
Hiding Content utility classes as per device size - Örneğin, .hide, .hideon-küçük-küçük, .hide-on-med, .hide-on-med-and-down, .hide-on-med-and-up ve .hide-on- yalnızca büyük
Formatting utility classes - Örneğin, kısaltılmış, üzerine getirilebilir
Misal
materialize_utilities.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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">
<h2>Materialize Utilities</h2>
<hr/>
<h3>Color Utilities Demo</h3>
<div class = "red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.</p>
</div>
<div class = "green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android
phones all have excellent support for HTML5.</p>
</div>
<h3>Alignment Utilities Demo</h3>
<div class = "card-panel valign-wrapper">
<p class = "valign">Vertically Aligned Text</p>
</div>
<div class = "card-panel">
<div><p class = "left-align">Left Aligned Text</p></div>
<div><p class = "right-align">Right Aligned Text</p></div>
<div><p class = "center-align">Center Aligned Text</p></div>
</div>
<h3>Hide Utilities Demo</h3>
<div class = "hide">
<p>Hidden on all devices</p>
</div>
<div class = "hide-on-small-only">
<p>Hidden on mobile devices</p>
</div>
<h3>Formatting Utilities Demo</h3>
<div class = "card-panel">
<p class = "truncate">The latest versions of Apple Safari, Google Chrome,
Mozilla Firefox, and Opera all support many HTML5 features and Internet
Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "card-panel hoverable">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and
Android phones all have excellent support for HTML5.</p>
</div>
<h3>Center Utility Demo</h3>
<div class = "card-panel center">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, görüntüleri ve videoları farklı boyutlara duyarlı hale getirmek için çeşitli sınıflara sahiptir.
responsive-img - Görüntünün ekran boyutuna göre kendisini yeniden boyutlandırmasını sağlar.
video-container - Gömülü videolara sahip duyarlı kapsayıcı için.
responsive-video - HTML5 videolarını duyarlı hale getirir.
Misal
materialize_media.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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">
<h2>Materialize Media Examples</h2>
<hr/>
<h3>Images Demo</h3>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "responsive-img">
</div>
<div class = "card-panel">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "" class = "circle responsive-img">
</div>
<h3>Responsive Embeded Video Demo</h3>
<div class = "video-container">
<iframe width = "540" height = "200"
src = "https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0"
frameborder = "0" allowfullscreen></iframe>
</div>
<div class = "video-container">
<video width = "300" height = "200" controls autoplay>
<source src = "http://www.tutorialspoint.com/html5/foo.ogg" type = "video/ogg" />
<source src = "http://www.tutorialspoint.com/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the video element.
</video>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, kapları kağıt benzeri gölgeli kartlar olarak görüntülemek için birkaç özel sınıfa sahiptir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | z-depth-0 Varsayılan olarak z derinliğine sahip öğelerin gölgesini kaldırır. |
| 2 | z-depth-1 1px çerçeveli gölgeli herhangi bir HTML içeriği için bir kapsayıcıyı biçimlendirir. 1 z derinliği ekler. |
| 3 | z-depth-2 2px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kabı biçimlendirir. 2'lik z derinliği ekler. |
| 4 | z-depth-3 3px bordered shadow ile herhangi bir HTML içeriği için bir konteyneri şekillendirir. 3 z derinliği ekler. |
| 5 | z-depth-4 4px bordered shadow ile herhangi bir HTML içeriği için bir konteyneri biçimlendirir. 4 z derinliği ekler. |
| 6 | z-depth-5 5px kenarlıklı gölgeli herhangi bir HTML içeriği için bir kabı biçimlendirir. 5'lik z derinliği ekler. |
Misal
materialize_shadows.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Materialize Shadow Examples</h2>
<hr/>
<div class = "card-panel">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-1">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-2">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-3">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-4">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "z-depth-5">
<p><b>TODO:</b> Learn HTML5</p>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, tablo üzerinde çeşitli stiller kullanarak farklı tablo türlerini görüntülemek için kullanılabilir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | None Herhangi bir kenarlık içermeyen temel bir tabloyu temsil eder. |
| 2 | stripped Soyulmuş bir tablo görüntüler. |
| 3 | bordered Satırlar arasında kenarlıklı bir tablo çizer. |
| 4 | highlight Vurgulu bir tablo çizer. |
| 5 | centered Tabloda tüm metin merkezi hizalanmış bir tablo çizer. |
| 6 | responsive-table Ekran içeriği görüntülemek için çok küçükse, yatay bir kaydırma çubuğunu göstermek için duyarlı bir tablo çizer. |
Misal
materialize_tables.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize 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>
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body class = "container">
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table>
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table with borders</h3>
<table class = "striped bordered">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Centered Table</h3>
<table class = "centered">
<thead>
<tr><th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Responsive table</h3>
<table class = "responsive-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Data #1</th>
<th>Data #2</th>
<th>Data #3</th>
<th>Data #4</th>
<th>Data #5</th>
<th>Data #6</th>
<th>Data #7</th>
<th>Data #8</th>
<th>Data #9</th>
<th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
Kullanımları materyalize edin Roboto 2.0standart yazı tipi olarak. Aşağıdaki CSS stili kullanılarak geçersiz kılınabilir.
html {
font-family: GillSans, Calibri, Trebuchet, sans-serif;
}Aşağıda başlıklar, blok alıntılar ve serbest akışlı ancak duyarlı metin örnekleri verilmiştir.
Misal
materialize_typography.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Typography 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">
<h2>Typography Demo</h2>
<hr/>
<h3>Headings</h3>
<div class = "card-panel">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</div>
<h3>Block Quotes</h3>
<div class = "card-panel">
<blockquote>
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</blockquote>
</div>
<h3>Responsive free-flow text</h3>
<div class = "card-panel">
<p class = "flow-text">
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera
all support many HTML5 features and Internet Explorer 9.0 will also have
support for some HTML5 functionality.
</p>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materyalize rozet bileşeni, bir sayı veya simge olabilen bir ekran bildirimidir. Genellikle öğelerin sayısını vurgulamak için kullanılır.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | badge Bir öğeyi MDL rozet bileşeni olarak tanımlar. Yayılma öğesi için gereklidir. |
| 2 | new Bir rozet bileşenine "yeni" bir sınıf ekler, ona bir arka plan verir. |
Aşağıda, rozetleri farklı şekillerde kullanma örnekleri verilmiştir.
Misal
materialize_badges.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Badges 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">
<h2>Badges Demo</h2>
<hr/>
<h3>Badges in List</h3>
<div class = "collection">
<a href = "#" class = "collection-item">Inbox<span class = "badge">12</span></a>
<a href = "#" class = "collection-item">Unread<span class = "new badge">4</span></a>
<a href = "#" class = "collection-item">Sent</a>
<a href = "#" class = "collection-item">Outbox<span class = "badge">14</span></a>
</div>
<h3>Badges in dropdowns</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">
Dropdown<i class = "mdi-navigation-arrow-drop-down right"></i></a>
<h3>Badges in Navigation</h3>
<nav>
<div class = "nav-wrapper">
<a href = "" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "">Inbox</a></li>
<li><a href = "">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li><a href = "#">Outbox</a></li>
</ul>
</div>
</nav>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, düğmelere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için farklı CSS sınıfları sağlar. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | btn Düğme veya bağlayıcıyı gerekli bir Materyalleştir düğmesi olarak ayarlar. Yükseltilmiş görüntü efektini bir düğmeye ayarlar. |
| 2 | btn-floating Dairesel bir düğme oluşturur. |
| 3 | btn-flat Varsayılan olarak düz ekran efektini bir düğmeye ayarlar. |
| 4 | btn-large Büyük düğmeler oluşturur. |
| 5 | disabled Devre dışı bırakılmış bir düğme oluşturur. |
| 6 | type = "submit" Bir bağlantı veya düğmeyi birincil düğme olarak temsil eder. |
| 7 | waves-effect Dalgalanma tıklama efektini ayarlar, diğer sınıflarla birlikte kullanılabilir. |
Misal
Aşağıdaki örnek, farklı düğme türlerini göstermek için mdl-düğme sınıflarının kullanımını gösterir.
materialize_buttons.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Buttons 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 = "card-panel">
<h5>Raised Buttons</h5>
<button class = "btn waves-effect waves-teal">Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons left">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal">
<i class = "material-icons right">add</i>Add</button></td>
<button class = "btn waves-effect waves-teal disabled">Add</button></td>
</div>
<div class = "card-panel">
<h5>Flat Buttons</h5>
<button class = "btn-flat waves-effect waves-teal">Add</button></td>
<button class = "btn-flat waves-effect waves-teal disabled" >
<i class = "material-icons left">add</i>Add</button></td>
</div>
<div class = "card-panel">
<h5>Floating Buttons</h5>
<a class = "btn-floating waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating waves-effect waves-light red disabled" >
<i class = "material-icons">add</i></a>
</div>
<div class = "card-panel">
<h5>Primary Buttons</h5>
<button class = "btn waves-effect waves-light red" type = "submit">Send
<i class = "material-icons right">send</i></button>
<button class = "btn waves-effect waves-light red disabled" type = "submit" >Cancel
<i class = "material-icons right">cancel</i></button>
</div>
<div class = "card-panel">
<h5>Large Buttons</h5>
<a class = "btn-floating btn-large waves-effect waves-light red">
<i class = "material-icons">add</i></a>
<a class = "btn-floating btn-large waves-effect waves-light red disabled">
<i class = "material-icons">add</i></a>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, kolay bir şekilde güzel bir kırıntı oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | nav-wrapper Gezinti bileşenini içerik haritası / gezinme çubuğu sarmalayıcı olarak ayarlar. |
| 2 | breadcrumb Bağlantı öğesini içerik haritası olarak ayarlar. Son bağlantı elemanı etkindir, geri kalanı ise gri olarak gösterilir. |
Misal
Aşağıdaki örnek, gezinme çubuğunu göstermek için içerik haritası sınıflarının kullanımını gösterir.
materialize_breadcrumb.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize BreadCrumb 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">
<nav>
<div class = "nav-wrapper">
<div class = "col s12">
<a href = "#" class = "breadcrumb">Home</a>
<a href = "#" class = "breadcrumb">Technology</a>
<a href = "#" class = "breadcrumb">HTML5</a>
</div>
</div>
</nav>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, çeşitli kart türlerini görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için farklı CSS sınıfları sağlar. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | card Div öğesini Materialize kart kapsayıcısı olarak tanımlar. "Dış" div üzerinde gereklidir. |
| 2 | card-content Div'i bir kart içeriği kapsayıcısı olarak tanımlar ve "iç" div için gereklidir. |
| 3 | card-title Div'i bir kart başlığı kapsayıcısı olarak tanımlar ve "iç" başlık div'de gereklidir. |
| 4 | card-action Div'i bir kart eylemleri konteyneri olarak tanımlar ve eylemler metnine uygun metin özellikleri atar. "İç" eylemlerde gereklidir div; içerik, araya giren kapsayıcılar olmadan doğrudan div'in içine gider. |
| 5 | card-image Div'i bir kart görüntüsü kapsayıcısı olarak tanımlar ve "iç" div üzerinde gereklidir. |
| 6 | card-reveal Div'i açığa çıkan bir metin kapsayıcı olarak tanımlar. |
| 7 | activator Div'i açık bir metin kabı ve daha açıklayıcı bir görüntü olarak tanımlar. Görüntüyle ilgili bağlamsal bilgileri göstermek için kullanılır. |
| 8 | card-panel Div'i gölgeler ve dolgulu basit bir kart olarak tanımlar. |
| 9 | card-small Div'i küçük boyutlu bir kart olarak tanımlar. Yükseklik: 300px; |
| 10 | card-medium Div'i orta büyüklükte bir kart olarak tanımlar. Yükseklik: 400px; |
| 11 | card-large Div'i büyük boyutlu bir kart olarak tanımlar. Yükseklik: 500 piksel; |
Misal
Aşağıdaki örnek, çeşitli kart türlerini sergilemek için kart sınıflarının kullanımını gösterir.
materialize_cards.htm
<!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>Sonuç
Sonucu doğrulayın.
Materialise, küçük bir bilgi kümesini temsil etmek için kullanılabilen Chip adlı özel bir bileşen sağlar. Örneğin, bir kişi, etiketler vb.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | chip Div kapsayıcısını çip olarak ayarlayın. |
Misal
Aşağıdaki örnek, çeşitli etiket türleri oluşturmayı göstermek için chip sınıfının kullanımını gösterir.
materialize_chips.htm
<!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/images/html5-mini-logo.jpg">HTML 5
</div>
<div class = "chip">
HTML 5<i class = "material-icons">close</i>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, çeşitli koleksiyon türlerini temsil etmek için özel sınıflar sağlar; burada bir koleksiyon, bir grup ilgili bilgi öğesini temsil eder.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | collection Div veya ul kapsayıcısını bir koleksiyon olarak ayarlar. |
| 2 | collection-item A veya li öğesini bir koleksiyon öğesi olarak ayarlar. |
| 3 | active A veya li öğesini etkin bir koleksiyon öğesi olarak gösterir. |
| 4 | with-header Koleksiyonu bir başlığa sahip olacak şekilde işaretler. |
| 5 | collection-header A veya li öğesini bir koleksiyon başlığı olarak ayarlar. |
| 6 | avatar A veya li öğesini bir avatar öğesi olarak ayarlar. |
| 7 | dismissible Koleksiyon öğelerinin hızlıca kaydırılmasını sağlar. Yalnızca dokunmatik ekranlı cihazlarda çalışır. |
Misal
Aşağıdaki örnek, çeşitli koleksiyon türleri oluşturmayı göstermek için koleksiyon sınıflarının kullanımını gösterir.
materialize_collections.htm
<!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/images/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>Sonuç
Sonucu doğrulayın.
Materialise, bir koleksiyonun bir grup ilgili bilgi öğesini temsil ettiği çeşitli koleksiyon türlerini temsil etmek için özel sınıflar sağlar.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | page-footer Div kapsayıcısını altbilgi olarak ayarlar. |
| 2 | footer-copyright Div kapsayıcısını bir altbilgi telif hakkı kapsayıcısı olarak ayarlar. |
Misal
Aşağıdaki örnek, örnek bir altbilgiyi göstermek için altbilgi sınıflarının kullanımını gösterir.
materialize_footer.htm
<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">
<footer class = "page-footer">
<div class = "row">
<div class = "col s12 m6 l6">
<h5 class = "white-text">Footer Content</h5>
</div>
<div class = "col">
<ul>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Help</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
Privacy and Terms</a></li>
<li><a href = "#" class = "grey-text text-lighten-4 right">
User Agreement</a></li>
</ul>
</div>
</div>
<div class = "footer-copyright">
<div class = "container">
© 2016 Copyright Information
<a class = "grey-text text-lighten-4 right" href = "#!">Links</a>
</div>
</div>
</footer>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, form tasarımı için çok güzel ve duyarlı bir CSS'ye sahiptir. Aşağıdaki CSS kullanılıyor -
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | input-field Div kapsayıcısını bir giriş alanı kabı olarak ayarlar. Gereklidir. |
| 2 | validate Bir giriş alanına doğrulama stilleri ekler. |
| 3 | active Aktif stile sahip bir girişi gösterir. |
| 4 | materialize-textarea Bir metin alanını biçimlendirmek için kullanılır. Metin alanları, içindeki metne göre otomatik olarak yeniden boyutlandırılacaktır. |
| 5 | filled-in Doldurulmuş kutu stiline sahip bir onay kutusu gösterir. |
Misal
Aşağıdaki örnek, örnek bir formu sergilemek için girdi sınıflarının kullanımını gösterir.
materialize_forms.htm
<html>
<head>
<title>The Materialize Form 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">
<form class = "col s12">
<div class = "row">
<div class = "input-field col s6">
<i class = "material-icons prefix">account_circle</i>
<input placeholder = "Username" value = "Mahesh" id = "name"
type = "text" class = "active validate" required />
<label for = "name">Username</label>
</div>
<div class = "input-field col s6">
<label for = "password">Password</label>
<input id = "password" type = "password" placeholder = "Password"
class = "validate" required />
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Email" id = "email" type = "email"
class = "validate">
<label for = "email">Email</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<i class = "material-icons prefix">mode_edit</i>
<textarea id = "address" class = "materialize-textarea"></textarea>
<label for = "address">Address</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<input placeholder = "Comments (Disabled)" id = "comments"
type = "text" disabled />
<label for = "comments">Comments</label>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "married" type = "checkbox" checked = "checked" />
<label for = "married">Married</label>
</p>
<p>
<input id = "single" type = "checkbox" class = "filled-in" />
<label for = "single">Single</label>
</p>
<p>
<input id = "dontknow" type = "checkbox" disabled = "disabled" />
<label for = "dontknow">Don't know (Disabled)</label>
</p>
</div>
</div>
<div class = "row">
<div class = "input-field col s12">
<p>
<input id = "male" type = "radio" name = "gender"
value = "male" checked />
<label for = "male">Male</label>
</p>
<p>
<input id = "female" type = "radio" name = "gender"
value = "female" checked />
<label for = "female">Female</label>
</p>
<p>
<input id = "dontknow1" type = "radio" name = "gender"
value = "female" disabled />
<label for = "dontknow1">Don't know (Disabled)</label>
</p>
</div>
</div>
</form>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Önemli Giriş Kontrolleri
Materialise, çok sayıda girdi denetimi türü için CSS sağlar. Aşağıdaki tablo aynı şeyi detaylandırmaktadır.
| Sr.No. | Giriş Tipi Ad & Açıklama |
|---|---|
| 1 | Seçiniz Çeşitli giriş türleri seçer |
| 2 | Anahtarlar Çeşitli anahtar türleri |
| 3 | Dosya Çeşitli dosya girişi türleri |
| 4 | Aralık Çeşitli aralık girişi türleri |
| 5 | Tarih Seçici Tarih Seçici |
| 6 | Karakter Sayacı Karakter Sayacı |
Materialise, aşağıdaki popüler simge kitaplıklarını destekler -
- Harika Yazı Tipi Simgeleri
- Google Materyal Simgeleri
- Bootstrap Simgeleri
Kullanım
Bir simge kullanmak için, simgenin adını bir HTML <i> öğesi sınıfına koyun. Bir simgenin boyutunu kontrol etmek için aşağıdaki sınıfları kullanabilirsiniz -
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | tiny Çok küçük boyutlu bir simge çizer. 1rem. |
| 2 | small Küçük boyutlu bir simge çizer. 2rem. |
| 3 | medium Orta büyüklükte bir simge çizer. 4rem. |
| 4 | large Büyük boyutlu bir simge çizer. 6rem. |
Misal
materialize_icons.htm
<html>
<head>
<title>The Materialize Icons 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>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class = "container">
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud tiny"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud medium"></i>
<i class = "fa fa-cloud large"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons tiny">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons">cloud</i>
<i class = "material-icons medium">cloud</i>
<i class = "material-icons large">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud tiny"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud medium"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, kolay bir şekilde güzel bir gezinme çubuğu oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | nav-wrapper Gezinti bileşenini gezinme çubuğu / içerik haritası sarmalayıcı olarak ayarlar. |
| 2 | brand-logo Bağlantı öğesini ana logo olarak ayarlar. |
| 3 | nav-mobile Ul öğesini bir gezinme çubuğu olarak ayarlar. |
Misal
Aşağıdaki örnek, çeşitli gezinme çubuğunu göstermek için navbar sınıflarının kullanımını gösterir.
materialize_navbar.htm
<html>
<head>
<title>The Materialize NavBar 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>
<script>
$( document ).ready(function()) { $(".dropdown-button").dropdown();
});
</script>
</head>
<body class = "container">
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Right Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Left Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Center Aligned Nav Bar</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<li><a href = "#">Java</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Active link</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#">HTML5</a></li>
<li><a href = "#">CSS</a></li>
<li class = "active"><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with dropdown menu</h5>
<ul id = "javaDropDown" class = "dropdown-content">
<li><a href = "#!">JSF</a></li>
<li><a href = "#!">JSP</a></li>
<li class = "divider"></li>
<li><a href = "#!">Servlets</a></li>
</ul>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo center">TutorialsPoint</a>
<ul id = "nav-mobile" class = "right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class = "dropdown-button" href = "#!"
data-activates = "javaDropDown">Java<i class = "material-icons
right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class = "row" style = "width:560px;">
<div class = "col s12 m12 l12">
<h5>Nav Bar with Links and Icons</h5>
<nav>
<div class = "nav-wrapper">
<a href = "#" class = "brand-logo right">TutorialsPoint</a>
<ul id = "nav-mobile" class = "left hide-on-med-and-down">
<li><a href = "#"><i class = "material-icons left">search</i>
HTML5</a></li>
<li><a href = "#"><i class = "material-icons right">view_module</i>
CSS</a></li>
<li><a href = "#">JavaScript</a></li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, kolay bir şekilde güzel bir sayfalama çubuğu oluşturmak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | pagination Ul öğesini sayfalandırma bileşeni olarak ayarlar. |
Misal
Aşağıdaki örnek, bir sayfalandırma çubuğunu göstermek için navbar sınıflarının kullanımını gösterir.
materialize_pagination.htm
<html>
<head>
<title>The Materialize Pagination 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" style = "width:560px;">
<div class = "col s12 m12 l12" >
<h5>Materialize Pagination</h5>
<ul class = "pagination">
<li class = "disabled"><a href = "#!">
<i class = "material-icons">chevron_left</i></a></li>
<li class = "active"><a href = "#!">1</a></li>
<li class = "waves-effect"><a href = "#!">2</a></li>
<li class = "waves-effect"><a href = "#!">3</a></li>
<li class = "waves-effect"><a href = "#!">4</a></li>
<li class = "waves-effect"><a href = "#!">5</a></li>
<li class = "waves-effect"><a href = "#!">
<i class = "material-icons">chevron_right</i></a></li>
</ul>
</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, çeşitli ön yükleyici türlerini veya ilerleme çubuklarını görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | progress Bir öğeyi ilerleme bileşeni olarak tanımlar. Div öğesi için gereklidir. |
| 2 | determinate Temel Materyalleştir davranışını ilerleme göstergesine ayarlar. |
| 3 | indeterminate Animasyonu ilerleme göstergesine ayarlar. |
Misal
Aşağıda, ön yükleyicilerin farklı şekillerde kullanılmasına bir örnek verilmiştir.
materialize_preloader.htm
<html>
<head>
<title>The Materialize Preloader 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">
<h4>Default Preloader</h4>
<div class = "progress">
<div class = "determinate" style = "width: 50%"></div>
</div>
<h4>Indeterminate Preloader</h4>
<div class = "progress">
<div class = "indeterminate"></div>
</div>
<h4>Circular Preloader</h4>
<div class = "preloader-wrapper big active">
<div class = "spinner-layer spinner-blue-only">
<div class = "circle-clipper left">
<div class = "circle"></div>
</div>
<div class = "gap-patch">
<div class = "circle"></div>
</div>
<div class = "circle-clipper right">
<div class = "circle"></div>
</div>
</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, çeşitli akordeon türlerini görüntülemek için önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | collapsible Bir elemanı, materyalize katlanabilir bir bileşen olarak tanımlar. Ul öğesi için gereklidir. |
| 2 | collapsible-header Div'i bölüm başlığı olarak ayarlar. |
| 3 | collapsible-body Div'i bölüm içerik kabı olarak ayarlar. |
| 4 | popout Açılır pencere katlanabilir oluşturur. |
| 5 | active Bir bölüm açar. |
| 6 | expandable Katlanabilir bir bileşeni genişletilebilir olarak işaretler. |
| 7 | accordion Katlanabilir bir bileşeni akordeon olarak işaretler. |
Aşağıda akordeonların farklı şekillerde kullanılmasına bir örnek verilmiştir.
Misal
materialize_collapsible.htm
<html>
<head>
<title>The Materialize Collapsible 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">
<h4>Simple Accordion</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Popout Accordion</h4>
<ul class = "collapsible popout" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Accordion with Preselected Section</h4>
<ul class = "collapsible" data-collapsible = "accordion">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header active">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
<h4>Expandables</h4>
<ul class = "collapsible" data-collapsible = "expandable">
<li>
<div class = "collapsible-header">
<i class = "material-icons">filter_drama</i>First Section</div>
<div class = "collapsible-body"><p>This is first section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">place</i>Second Section</div>
<div class = "collapsible-body"><p>This is second section.</p></div>
</li>
<li>
<div class = "collapsible-header">
<i class = "material-icons">whatshot</i>Third Section</div>
<div class = "collapsible-body"><p>This is third section.</p></div>
</li>
</ul>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, kullanıcılara göze batmayan uyarıları göstermek için çeşitli özel yöntemler sağlar. Materialise onlar için bir kadeh kaldırma terimi sağlar. Aşağıda, bir iletişim kutusunu tost olarak göstermek için sözdizimi verilmiştir.
Materialize.toast(message, displayLength, className, completeCallback);Nerede,
message - Kullanıcıya gösterilecek mesaj.
displayLength - Sonrasında kaybolacak mesajın süresi.
className- Tosta uygulanacak stil sınıfı. Örneğin, "yuvarlak".
completeCallback - Tost reddedildiğinde çağrılacak geri arama yöntemi.
Araç ipucu için Materialize aşağıdaki CSS sınıflarını sağlar.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | tooltipped Araç ipucuna sahip bir bileşeni tanımlar. |
| 2 | data-position Araç ipucunun konumu; alt, üst, sol veya sağ. |
| 3 | data-delay Araç ipucunun ne kadar süre sonra kaybolacağını belirler. |
| 4 | data-tooltip Araç ipucu içeriğini ayarlar. |
Misal
Aşağıdaki örnek, tostların ve araç ipuçlarının kullanımını göstermektedir.
materialize_dialogs.htm
<html>
<head>
<title>The Materialize Dialogs 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>
<script>
function showToast(message, duration) {
Materialize.toast(message, duration);
}
function showToast1(message, duration) {
Materialize.toast('<i>'+ message + '</i>', duration);
}
function showToast2(message, duration) {
Materialize.toast(message, duration, 'rounded');
}
function showToast3(message, duration) {
Materialize.toast('Hello World!', duration, '', function toastCompleted() {
alert('Toast dismissed!');
});
}
</script>
</head>
<body class = "container">
<h4>Toasts</h4>
<a class = "btn" onclick = "showToast('Hello World!', 3000)">Normal Alert!</a>
<a class = "btn" onclick = "showToast1('Hello World!', 3000)">Italic Alert!</a>
<a class = "btn" onclick = "showToast2('Hello World!', 3000)">Rounded Alert!</a>
<br/><br/>
<a class = "btn" onclick = "showToast3('Hello World!', 3000)">Callback Alert!</a>
<h4>Tooltips</h4>
<a class = "btn tooltipped" data-position = "bottom" data-delay = "50"
data-tooltip = "I am in bottom!">Bottom</a>
<a class = "btn tooltipped" data-position = "left" data-delay = "50"
data-tooltip = "I am in left!">Left</a>
<a class = "btn tooltipped" data-position = "right" data-delay = "50"
data-tooltip = "I am in right!">Right</a>
<a class = "btn tooltipped" data-position = "top" data-delay = "50"
data-tooltip = "I am in top!">Top</a>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, bir ul öğesini bir açılır liste olarak yapmak ve ul öğesinin kimliğini düğmenin veya bağlantı öğesinin veri etkinleştirir özniteliğine eklemek için açılır CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | dropdown-content Ul'yi somut bir açılır liste bileşeni olarak tanımlar. Ul öğesi için gereklidir. |
| 2 | data-activates açılır ul öğesinin kimliği. |
Misal
Aşağıda, açılır menü kullanımına bir örnek verilmiştir.
materialize_dropdowns.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Dropdowns 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>Drop Down Demo</h3>
<ul id = "dropdown" class = "dropdown-content">
<li><a href = "#">Inbox<span class = "badge">12</span></a></li>
<li><a href = "#!">Unread<span class = "new badge">4</span></a></li>
<li><a href = "#">Sent</a></li>
<li class = "divider"></li>
<li><a href = "#">Outbox<span class = "badge">14</span></a></li>
</ul>
<a class = "btn dropdown-button" href = "#" data-activates = "dropdown">Mail Box
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, bir ulsekme olarak öğe. Aşağıdaki tablo, mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | tabs Ul'yi somutlaştırılmış sekme bileşeni olarak tanımlar. Ul öğesi için gereklidir. |
| 2 | active Bir sekmeyi aktif hale getirir. |
Misal
Aşağıda sekme kullanımına bir örnek verilmiştir.
materialize_tabs.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Tabs 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>Tabs Demo</h3>
<div class = "row">
<div class = "col s12">
<ul class = "tabs">
<li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
<li class = "tab col s3"><a class = "active" href = "#unread">
Unread</a></li>
<li class = "tab col s3 disabled"><a href = "#outbox">
Outbox (Disabled)</a></li>
<li class = "tab col s3"><a href = "#sent">Sent</a></li>
</ul>
</div>
<div id = "inbox" class = "col s12">Inbox</div>
<div id = "unread" class = "col s12">Unread</div>
<div id = "outbox" class = "col s12">Outbox (Disabled)</div>
<div id = "sent" class = "col s12">Sent</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Materialise, Materyal Tasarım'da ana hatları çizilen mürekkep efekti oluşturmak için harici bir kitaplık olan Waves'i kullanır. Aşağıdaki tablo mevcut sınıfları ve etkilerini göstermektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | waves-effect Kontrole bir dalga efekti uygular. |
| 2 | waves-light Beyaz renkli bir dalga efekti uygular. |
| 3 | waves-red Kırmızı renkli bir dalga efekti uygular. |
| 4 | waves-green Yeşil renkli bir dalga efekti uygular. |
| 5 | waves-yellow Sarı renkli bir dalga efekti uygular. |
| 6 | waves-orange Turuncu renkli bir dalga efekti uygular. |
| 7 | waves-purple Mor renkli bir dalga efekti uygular. |
| 8 | waves-teal Deniz mavisi renkli bir dalga efekti uygular. |
Misal
Aşağıda, düğmelerde dalga efektlerinin kullanımına bir örnek verilmiştir.
materialize_waves.htm
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Waves Effects 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>Waves Effects Demo</h3>
<div class = "collection waves-color-demo">
<div class = "collection-item">
<code class = " language-markup">Default</code>
<a href = "#!" class = "waves-effect btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-light</code>
<a href = "#!" class = "waves-effect waves-light btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-red</code>
<a href = "#!" class = "waves-effect waves-red btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-yellow</code>
<a href = "#!" class = "waves-effect waves-yellow btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-orange</code>
<a href = "#!" class = "waves-effect waves-orange btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-purple</code>
<a href = "#!" class = "waves-effect waves-purple btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-green</code>
<a href = "#!" class = "waves-effect waves-green btn secondary-content">
Click Me!</a>
</div>
<div class = "collection-item">
<code class = " language-markup">waves-teal</code>
<a href = "#!" class = "waves-effect waves-teal btn secondary-content">
Click Me!</a>
</div>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.