Material Design Lite - Hızlı Kılavuz
Materyal Tasarımı Lite nedir?
Material Design Lite (MDL, CSS, JavaScript ve HTML ile oluşturulmuş bir UI bileşen kitaplığıdır. MDL UI bileşenleri, tarayıcı taşınabilirliği, cihaz bağımsızlığı gibi modern web tasarım ilkelerine bağlı kalarak çekici, tutarlı ve işlevsel web sayfaları ve web uygulamaları oluşturmaya yardımcı olur. ve zarif bir bozulma.
Materyal Tasarımı Lite'ın göze çarpan özellikleri aşağıdadır -
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ümlerini içerir.
Kartlar, sütun düzenleri, kaydırıcılar, döndürücüler, sekmeler, tipografi vb. Gibi gelişmiş ve özelleştirilmiş özellikler içerir.
Herhangi bir kitaplık veya geliştirme ortamı ile birlikte veya bunlar olmadan kullanılabilir.
Çapraz tarayıcı ve yeniden kullanılabilir web bileşenleri oluşturmak için kullanılabilir.
Sorumlu tasarım
Material Design Lite, yerleşik duyarlı tasarıma sahiptir, böylece Material Design Lite kullanılarak oluşturulan web sitesi, cihaz boyutuna göre kendini yeniden tasarlar.
Materyal Tasarımı Lite sınıfları, web sitesinin herhangi bir ekran boyutuna sığabileceği şekilde oluşturulur.
Material Design Lite kullanılarak oluşturulan web siteleri PC, tabletler ve mobil cihazlarla tamamen uyumludur.
Standart CSS
Material Design Lite yalnızca standart CSS kullanır ve öğrenmesi çok kolaydır.
JQuery gibi herhangi bir harici JavaScript kitaplığına bağımlılık yoktur.
ExtensibleMaterial Design Lite, 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 göz önünde bulundurularak tasarlanmıştır.
Gölgeleri ve koyu renkleri destekler.
Renkler ve gölgeler, çeşitli platformlarda ve cihazlarda aynı kalır.
Ve en önemlisi, MDL'nin kullanımı tamamen ücretsizdir.
Materyal Tasarım Lite'ı kullanmanın iki yolu vardır -
Local Installation - Material. {Primary} - {accent} .min.css ve material.min.js dosyalarını yerel makinenize indirebilir ve HTML kodunuza ekleyebilirsiniz.
CDN Based Version - material. {Primary} - {accent} .min.css ve material.min.js dosyalarını doğrudan İçerik Dağıtım Ağı'ndan (CDN) HTML kodunuza ekleyebilirsiniz.
Yerel Kurulum
MDL'nin kurulumu için şu adımları izleyin -
Git https://www.getmdl.io/started/index.html mevcut en son sürümü indirmek için.
Ardından, indirilen material.min.js web sitenizin bir dizinindeki dosya, örneğin / js ve material.min.css / css içinde.
Misal
Artık css ve js dosyasını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "material.min.css">
<script src = "material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Yukarıdaki program aşağıdaki sonucu üretecektir -
CDN Tabanlı Sürüm
Js ve css dosyalarını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz. storage.googleapis.com en son sürüm için içerik sağlar.
Bu eğiticide kitaplığın storage.googleapis.com CDN sürümünü kullanıyoruz.
Misal
Şimdi, Google CDN'den material.css ve material.js kullanarak yukarıdaki örneği yeniden yazalım.
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<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>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design</span>
<nav class = "mdl-navigation">
<a class = "mdl-navigation__link" href = "">Home</a>
<a class = "mdl-navigation__link" href = "">Features</a>
<a class = "mdl-navigation__link" href = "">About Us</a>
<a class = "mdl-navigation__link" href = "">Log Out</a>
</nav>
</div>
<main class = "mdl-layout__content">
<div class = "page-content" style = "padding-left:100px;">Hello World!</div>
</main>
</div>
</body>
</html>Yukarıdaki program aşağıdaki sonucu üretecektir -
Bu bölümde, Materyal Tasarım Lite'taki farklı düzenleri tartışacağız. HTML5 aşağıdaki kapsayıcı öğelerine sahiptir -
<div> - HTML içeriğine genel bir kapsayıcı sağlar.
<header> - Başlık bölümünü temsil eder.
<footer> - Altbilgi bölümünü temsil eder.
<article> - Makaleleri temsil eder.
<section> - Çeşitli bölüm türleri için genel bir kap sağlar.
MDL, kaplara önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-layout Bir konteyneri MDL bileşeni olarak tanımlar. Dış kap elemanında gereklidir. |
| 2 | mdl-js-layout Düzene temel MDL davranışı ekler. Dış kap elemanında gereklidir. |
| 3 | mdl-layout__header Konteyneri bir MDL bileşeni olarak tanımlar. Başlık öğesinde gereklidir. |
| 4 | mdl-layout-icon Bir uygulama simgesi eklemek için kullanılır. Her ikisi de görünüyorsa menü simgesi tarafından geçersiz kılınır. İsteğe bağlı simge öğesi. |
| 5 | mdl-layout__header-row Konteyneri MDL başlık satırı olarak tanımlar. Başlık içeriği kapsayıcısında gereklidir. |
| 6 | mdl-layout__title Düzen başlığı metnini tanımlar. Düzen başlığı kapsayıcısında gereklidir. |
| 7 | mdl-layout-spacer Bir başlık veya çekmece içindeki öğeleri hizalamak için kullanılır. Kalan alanı doldurmak için büyür. Genellikle öğeleri sağa hizalamak için kullanılır. Aşağıdaki düzen başlığında div üzerinde isteğe bağlı. |
| 8 | mdl-navigation Kapsayıcıyı MDL gezinti grubu olarak tanımlar. Nav öğesinde gereklidir. |
| 9 | mdl-navigation__link Çapayı MDL gezinme bağlantısı olarak tanımlar. Başlık ve / veya çekmece bağlantı elemanlarında gereklidir. |
| 10 | mdl-layout__drawer Konteyneri MDL düzen çekmecesi olarak tanımlar. Çekmece konteynır elemanında gereklidir. |
| 11 | mdl-layout__content Konteyneri MDL düzen içeriği olarak tanımlar. Ana elemanda gereklidir. |
| 12 | mdl-layout__header--scroll Başlığın içerikle birlikte kaydırılmasını sağlar. Başlık öğesinde isteğe bağlıdır. |
| 13 | mdl-layout--fixed-drawer Çekmecenin her zaman görünür olmasını ve daha büyük ekranlarda açılmasını sağlar. Dış kap elemanında opsiyonel olup, çekmece kap elemanında değildir. |
| 14 | mdl-layout--fixed-header Başlığın küçük ekranlarda bile her zaman görünür olmasını sağlar. Dış kap elemanında isteğe bağlı. |
| 15 | mdl-layout--large-screen-only Daha küçük ekranlarda bir öğeyi gizler. Herhangi bir mdl düzeninin neslinde isteğe bağlıdır. |
| 16 | mdl-layout--small-screen-only Daha büyük ekranlarda bir öğeyi gizler. Herhangi bir mdl düzeninin neslinde isteğe bağlıdır. |
| 17 | mdl-layout__header--waterfall Birden fazla başlık satırıyla "şelale" efektine izin verir. Başlık öğesinde isteğe bağlıdır. |
| 18 | mdl-layout__header--transparent Başlığı saydam hale getirir ve mizanpaj arka planının üzerine çizer. Başlık öğesinde isteğe bağlıdır. |
| 19 | mdl-layout__header--seamed Gölgesiz bir başlık kullanır. Başlık öğesinde isteğe bağlıdır. |
| 20 | mdl-layout__tab-bar Konteyneri bir MDL sekme çubuğu olarak tanımlar. Başlık içindeki kap öğesinde gereklidir (sekmeli düzen). |
| 21 | mdl-layout__tab Ankrajı MDL sekme bağlantısı olarak tanımlar. Sekme çubuğu bağlantı elemanlarında gereklidir. |
| 22 | is-active Sekmeyi varsayılan etkin sekme olarak tanımlar. Sekme çubuğunda isteğe bağlı bağlantı öğesi ve ilişkili sekme bölümü öğesi. |
| 23 | mdl-layout__tab-panel Kapsayıcıyı sekme içerik paneli olarak tanımlar. Sekme bölümü öğelerinde gereklidir. |
| 24 | mdl-layout--fixed-tabs Varsayılan kaydırılabilir sekmeler yerine sabit sekmeler kullanır. Dış kap elemanında isteğe bağlıdır, başlık içindeki kapta değil. |
Aşağıdaki örnekler, çeşitli kaplara stil uygulamak için mdl-layout sınıfının kullanımını gösterir.
Sabit Çekmece
Sabit çekmeceli ancak başlığı olmayan bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.
mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.
mdl-js-layout - Dış div'e temel MDL davranışı ekler.
mdl-layout--fixed-drawer - Çekmecenin her zaman görünür olmasını ve büyük ekranlarda açılmasını sağlar.
mdl-layout__drawer - div'i MDL düzen çekmecesi olarak tanımlar.
mdl-layout-title - Düzen başlığı metnini tanımlar.
mdl-navigation - div'i MDL gezinme grubu olarak tanımlar.
mdl-navigation__link - Çapayı MDL gezinme bağlantısı olarak tanımlar.
mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.
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>Sonuç
Sonucu doğrulayın.
Sabit Başlık
Ek MDL sınıfını takip eden sabit başlıklı bir şablon oluşturmak için kullanılır.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
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>Sonuç
Sonucu doğrulayın.
Sabit Başlık ve Çekmece
Sabit başlıklı ve sabit çekmeceli bir şablon oluşturmak için aşağıdaki ek MDL sınıfları kullanılır.
mdl-layout--fixed-drawer - Çekmecenin her zaman görünür olmasını ve büyük ekranlarda açılmasını sağlar.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
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>Sonuç
Sonucu doğrulayın.
Kaydırma Üstbilgisi
Kaydırma başlığına sahip bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.
mdl-layout--header--scroll - Başlığın içerikle birlikte kaydırılmasını sağlar.
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>Sonuç
Sonucu doğrulayın.
Sözleşme Başlığı
Sayfa aşağı doğru ilerlerken daralan bir başlığa sahip bir şablon oluşturmak için aşağıdaki MDL sınıfı kullanılır.
mdl-layout__header--waterfall - Birden fazla başlık satırıyla "şelale" efektine izin verir.
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>Sonuç
Sonucu doğrulayın.
Kaydırılabilir Sekmelere Sahip Sabit Başlık
Kaydırılabilir sekmelere sahip bir başlığı olan bir şablon oluşturmak için aşağıdaki MDL sınıfları kullanılır.
mdl-layout__tab-bar - Konteyneri bir MDL sekme çubuğu olarak tanımlar.
mdl-layout__tab - Bağlantıyı bir MDL sekme bağlantısı olarak tanımlar.
mdl-layout__tab-panel - Kabı bir sekme içerik paneli olarak tanımlar.
mdl_scrollabletabheader.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">
<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>Sonuç
Sonucu doğrulayın.
Sabit Sekmeli Sabit Başlık
Sabit sekmelere sahip bir başlığa sahip bir şablon oluşturmak için aşağıdaki ek MDL sınıfı kullanılır.
mdl-layout--fixed-tabs - Varsayılan kaydırılabilir sekmeler yerine sabit sekmeler kullanır.
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>Sonuç
Sonucu doğrulayın.
Materyal Tasarımı Lite (MDL) ızgarası, çeşitli ekran boyutları için içerik düzenleyen bir bileşendir. MDL ızgarası, bir konteyner / böl öğesi tarafından tanımlanır ve çevrelenir. Bir ızgaranın masaüstü boyutu ekranında 12 sütun, tablet boyutu ekranında 8 ve telefon boyutu ekranında 4 sütun vardır; burada her boyutun önceden tanımlanmış kenar boşlukları ve boşlukları vardır. Hücreler, aşağıdaki istisnalar dışında tanımlandıkları sırayla arka arkaya dizilir:
Bir ızgara hücresi, ekran boyutlarından birindeki satıra sığmazsa, aşağıdaki satıra akar.
Bir ızgara hücresinin, ekran boyutu için sütun sayısına eşit veya bundan daha büyük belirli bir sütun boyutu varsa, tüm satırı kaplar.
MDL, ızgaraya önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-layout Bir konteyneri MDL bileşeni olarak tanımlar. Dış kap elemanında gereklidir. |
| 2 | mdl-grid Bir kabı bir MDL ızgara bileşeni olarak tanımlar. "Dış" div öğesinde gereklidir. |
| 3 | mdl-cell Bir kabı bir MDL hücresi olarak tanımlar. "İç" div öğelerinde gereklidir. |
| 4 | mdl-grid--no-spacing Izgara hücrelerini aralarında boşluk olmayacak şekilde günceller. Izgara kabı için isteğe bağlı. |
| 5 | mdl-cell--N-col Bu, hücre için sütun boyutunu N, N 1-12 dahil, varsayılan olarak 4; "iç" div öğeleri için isteğe bağlıdır. |
| 6 | mdl-cell--N-col-desktop Bu, hücrenin sütun boyutunu yalnızca masaüstü modunda N olarak koymaya yardımcı olur; N, 1-12 dahil; "iç" div öğeleri için isteğe bağlıdır. |
| 7 | mdl-cell--N-col-tablet Bu, hücre için sütun boyutunu yalnızca tablet kipinde N'ye koymaya yardımcı olur; N, 1-8 dahil; "iç" div öğeleri için isteğe bağlıdır. |
| 8 | mdl-cell--N-col-phone Bu, hücrenin sütun boyutunu yalnızca telefon modunda N olarak koymaya yardımcı olur; N, 1-4 arasındadır; "iç" div öğeleri için isteğe bağlıdır. |
| 9 | mdl-cell--hide-desktop Masaüstü modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır. |
| 10 | mdl-cell--hide-tablet Tablet modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır. |
| 11 | mdl-cell--hide-phone Telefon modundayken hücreyi gizler. "İç" div öğeleri için isteğe bağlıdır. |
| 12 | mdl-cell--stretch Varsayılan, üst öğeyi doldurmak için hücreyi dikey olarak uzatır; "iç" div öğeleri için isteğe bağlıdır. |
| 13 | mdl-cell--top Hücreyi üst sayfanın üst kısmına hizalar. "İç" div öğeleri için isteğe bağlıdır. |
| 14 | mdl-cell--middle Hücreyi ebeveynin ortasına hizalar. "İç" div öğeleri için isteğe bağlıdır. |
| 15 | mdl-cell--bottom Hücreyi üst sayfanın alt kısmına hizalar. "İç" div öğeleri için isteğe bağlıdır. |
Misal
Aşağıdaki örnek, çeşitli ekranlardaki içerikleri düzenlemek için mdl-grid sınıfının kullanımını anlamanıza yardımcı olacaktır.
Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktır.
mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.
mdl-js-layout - Dış div'e temel MDL davranışı ekler.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.
mdl-layout__drawer - div'i MDL düzen çekmecesi olarak tanımlar.
mdl-layout-title - Düzen başlığı metnini tanımlar.
mdl-navigation - div'i MDL gezinme grubu olarak tanımlar.
mdl-navigation__link - Çapayı MDL gezinme bağlantısı olarak tanımlar.
mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.
mdl-grid - div'i bir MDL ızgara bileşeni olarak tanımlar.
mdl-cell - div'i MDL hücresi olarak tanımlar.
mdl-cell--1-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 1 hücrenin boyutuna ayarlar.
mdl-cell--2-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 2'si olacak şekilde ayarlar.
mdl-cell--4-col - Hücrenin sütun boyutunu masaüstü ekran boyutundaki 12 hücreden 4 hücrenin boyutuna ayarlar.
mdl-cell--6-col - Hücrenin sütun boyutunu, masaüstü ekran boyutundaki 12 hücreden 6'sına ayarlar.
mdl-cell--4-col-phone - Hücre için sütun boyutunu, telefon ekranı boyutundaki 4 hücreden 4 hücreye ayarlar.
mdl-cell--6-col-tablet - Hücrenin sütun boyutunu tablet ekran boyutundaki 8 hücreden 6'sına ayarlar.
mdl-cell--8-col-tablet - Hücrenin sütun boyutunu, tablet ekran boyutundaki 8 hücreden 8'ine ayarlar.
mdl_grid.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">
<style>
.graybox {
background-color:#ddd;
}
</style>
</head>
<body>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Grid</span>
</div>
</header>
<div class = "mdl-layout__drawer">
<span class = "mdl-layout-title">Material Design 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 = "mdl-grid">
<div class = "mdl-cell mdl-cell--1-col graybox">1</div>
<div class = "mdl-cell mdl-cell--1-col graybox">2</div>
<div class = "mdl-cell mdl-cell--1-col graybox">3</div>
<div class = "mdl-cell mdl-cell--1-col graybox">4</div>
<div class = "mdl-cell mdl-cell--1-col graybox">5</div>
<div class = "mdl-cell mdl-cell--1-col graybox">6</div>
<div class = "mdl-cell mdl-cell--1-col graybox">7</div>
<div class = "mdl-cell mdl-cell--1-col graybox">8</div>
<div class = "mdl-cell mdl-cell--1-col graybox">9</div>
<div class = "mdl-cell mdl-cell--1-col graybox">10</div>
<div class = "mdl-cell mdl-cell--1-col graybox">11</div>
<div class = "mdl-cell mdl-cell--1-col graybox">12</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--4-col graybox">1</div>
<div class = "mdl-cell mdl-cell--4-col graybox">2</div>
<div class = "mdl-cell mdl-cell--4-col graybox">3</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col graybox">6</div>
<div class = "mdl-cell mdl-cell--4-col graybox">4</div>
<div class = "mdl-cell mdl-cell--2-col graybox">2</div>
</div>
<div class = "mdl-grid">
<div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox">
6 on desktop, 8 on tablet</div>
<div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox">
4 on desktop, 6 on tablet</div>
<div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox">
2 on desktop, 4 on phone</div>
</div>
</main>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Material Design Lite (MDL) sekme bileşeni, tek bir alanda birden çok ekranı özel bir şekilde göstermeye yardımcı olan bir kullanıcı arabirimi bileşenidir.
MDL, sekmelere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler 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 | mdl-layout Bir konteyneri MDL bileşeni olarak tanımlar. Dış kap elemanında gereklidir. |
| 2 | mdl-tabs Bir MDL bileşeni olarak bir sekme konteynerini tanımlar. "Dış" div öğesinde gereklidir. |
| 3 | mdl-js-tabs Temel MDL davranışını sekme kapsayıcısına ayarlar. "Dış" div öğesinde gereklidir. |
| 4 | mdl-js-ripple-effect Sekme bağlantılarına dalgalanma tıklama efekti ekler. İsteğe bağlı; "dış" div öğesine gider. |
| 5 | mdl-tabs__tab-bar Bir konteyneri MDL sekmeleri bağlantı çubuğu olarak tanımlar. İlk "iç" div öğesinde gereklidir. |
| 6 | mdl-tabs__tab Bir MDL sekme etkinleştiricisi olarak bir çapayı (bağlantı) tanımlar. İlk "iç" div öğesindeki tüm bağlantılarda gereklidir. |
| 7 | is-active Varsayılan görüntü sekmesi olarak bir sekmeyi tanımlar. "İç" div (tab) öğelerinin birinde (ve yalnızca birinde) gereklidir. |
| 8 | mdl-tabs__panel Bir kabı sekme içeriği olarak tanımlar. "İç" div (tab) öğelerinin her biri için gereklidir. |
Misal
Aşağıdaki örnek, çeşitli sekmelerdeki içerikleri düzenlemek için mdl-tab sınıfının kullanımını anlamanıza yardımcı olacaktır.
Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktır -
mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.
mdl-js-layout - Dış div'e temel MDL davranışı ekler.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.
mdl-layout-title - Düzen başlığı metnini tanımlar.
mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.
mdl-tabs - Bir MDL bileşeni olarak bir sekme konteynerini tanımlar.
mdl-js-tabs - Temel MDL davranışını sekme kapsayıcısına ayarlar.
mdl-tabs__tab-bar - Bir konteyneri MDL sekmeleri bağlantı çubuğu olarak tanımlar.
mdl-tabs__tab - Bir MDL sekme etkinleştiricisi olarak bir ankrajı (bağlantı) tanımlar.
is-active - Varsayılan görüntü sekmesi olarak bir sekmeyi tanımlar.
mdl-tabs__panel - Bir kapsayıcıyı sekme içeriği olarak tanımlar.
mdl_tabs.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>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<div class = "mdl-tabs mdl-js-tabs">
<div class = "mdl-tabs__tab-bar">
<a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
<a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
<a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
</div>
<div class = "mdl-tabs__panel is-active" id = "tab1-panel">
<p>Tab 1 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab2-panel">
<p>Tab 2 Content</p>
</div>
<div class = "mdl-tabs__panel" id = "tab3-panel">
<p>Tab 3 Content</p>
</div>
</div>
</main>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Bir MDL altbilgi bileşeni iki ana biçimde gelir: mega-footer ve mini-footer. mega altbilgi, mini altbilgiden daha karmaşık içerik içerir. Bir mega-altbilgi, yatay kurallarla ayrılmış birden çok içerik bölümünü temsil edebilirken, bir mini altbilgi, içeriğin tek bir bölümünü temsil eder. Altbilgiler tipik olarak hem bilgi amaçlı hem de tıklanabilir içerik içerir, örneğin bağlantılar gibi.
MDL, mega altbilgi ve mini altbilgiye önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için çeşitli CSS sınıfları sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-mega-footer Kapsayıcıyı bir MDL mega altbilgi bileşeni olarak tanımlar. Altbilgi öğesi için gereklidir. |
| 2 | mdl-mega-footer__top-section Kapsayıcıyı altbilgi üst bölümü olarak tanımlar. Üst bölüm "dış" div öğesi için gereklidir. |
| 3 | mdl-mega-footer__left-section Konteyneri sol bölüm olarak tanımlar. Sol bölüm "iç" div öğesi için gereklidir. |
| 4 | mdl-mega-footer__social-btn Mega-altbilgi içinde dekoratif bir kare tanımlar. Düğme öğesi için gereklidir (kullanılıyorsa). |
| 5 | mdl-mega-footer__right-section Konteyneri doğru bölüm olarak tanımlar. Sağ bölüm "iç" div öğesi için gereklidir. |
| 6 | mdl-mega-footer__middle-section Kapsayıcıyı alt bilgi orta bölümü olarak tanımlar. Orta bölüm "dış" div öğesi için gereklidir. |
| 7 | mdl-mega-footer__drop-down-section Kapsayıcıyı bir açılır (dikey) içerik alanı olarak tanımlar. Açılır "iç" div öğeleri için gereklidir. |
| 8 | mdl-mega-footer__heading Başlığı mega altbilgi başlığı olarak tanımlar. Açılır bölümdeki h1 öğesi için gereklidir. |
| 9 | mdl-mega-footer__link-list Sırasız bir listeyi aşağı açılır (dikey) liste olarak tanımlar. Açılır bölümdeki ul öğesi için gereklidir. |
| 10 | mdl-mega-footer__bottom-section Kapsayıcıyı altbilgi alt bölümü olarak tanımlar. Alt bölüm "dış" div öğesi için gereklidir. |
| 11 | mdl-logo Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar. Mega altbilgi alt bölümündeki veya mini altbilgi sol bölümündeki "iç" div öğesi için gereklidir. |
| 12 | mdl-mini-footer Kapsayıcıyı bir MDL mini altbilgi bileşeni olarak tanımlar. Altbilgi öğesi için gereklidir. |
| 13 | mdl-mini-footer__left-section Konteyneri sol bölüm olarak tanımlar. Sol bölüm "iç" div öğesi için gereklidir. |
| 14 | mdl-mini-footer__link-list Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar. Ul öğesi kardeş "mdl-logo" div öğesi için gereklidir. |
| 15 | mdl-mini-footer__right-section Konteyneri doğru bölüm olarak tanımlar. Sağ bölüm "iç" div öğesi için gereklidir. |
| 16 | mdl-mini-footer__social-btn Mini altbilgi içindeki dekoratif bir kareyi tanımlar. Düğme öğesi için gereklidir (kullanılıyorsa). |
Şimdi, MDL altbilgi sınıflarının altbilgileri biçimlendirmek için kullanımını anlamak için birkaç örnek görelim.
Mega Altbilgi
Kullanımını tartışalım mdl-mega-footerbir altbilgideki içeriğin düzenini sınıflandırma Bu örnekte aşağıdaki MDL sınıfları kullanılacaktır.
mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.
mdl-js-layout - Dış div'e temel MDL davranışı ekler.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.
mdl-layout-title - Düzen başlığı metnini tanımlar.
mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.
mdl-mega-footer - Kapsayıcıyı bir MDL mega altbilgi bileşeni olarak tanımlar.
mdl-mega-footer__top-section - Kapsayıcıyı altbilgi üst bölümü olarak tanımlar.
mdl-mega-footer__left-section - Konteyneri sol bölüm olarak tanımlar.
mdl-mega-footer__social-btn - Mini altbilgi içinde dekoratif bir kare tanımlar.
mdl-mega-footer__right-section - Konteyneri doğru bölüm olarak tanımlar.
mdl-mega-footer__middle-section - Kapsayıcıyı alt bilgi orta bölümü olarak tanımlar.
mdl-mega-footer__drop-down-section - Kapsayıcıyı bir açılır (dikey) içerik alanı olarak tanımlar.
mdl-mega-footer__heading - Başlığı mega altbilgi başlığı olarak tanımlar.
mdl-mega-footer__link-list - Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar.
mdl-mega-footer__bottom-section - Kapsayıcıyı altbilgi alt bölümü olarak tanımlar.
mdl-logo - Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar.
mdl_megafooter.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>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mega-footer">
<div class = "mdl-mega-footer__top-section">
<div class = "mdl-mega-footer__left-section">
<button class = "mdl-mega-footer__social-btn">1</button>
<button class = "mdl-mega-footer__social-btn">2</button>
<button class = "mdl-mega-footer__social-btn">3</button>
</div>
<div class = "mdl-mega-footer__right-section">
<a href = "">Link 1</a>
<a href = "">Link 2</a>
<a href = "">Link 3</a>
</div>
</div>
<div class = "mdl-mega-footer__middle-section">
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
<div class = "mdl-mega-footer__drop-down-section">
<h1 class = "mdl-mega-footer__heading">Heading </h1>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link C</a></li>
<li><a href = "">Link D</a></li>
</ul>
</div>
</div>
<div class = "mdl-mega-footer__bottom-section">
<div class = "mdl-logo">
Bottom Section
</div>
<ul class = "mdl-mega-footer__link-list">
<li><a href = "">Link A</a></li>
<li><a href = "">Link B</a></li>
</ul>
</div>
</footer>
</main>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Mini Altbilgi
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-mini-footer bir altbilgideki içeriğin düzenini sınıflandırma
Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktır.
mdl-layout - Bir div öğesini MDL bileşeni olarak tanımlar.
mdl-js-layout - Dış div'e temel MDL davranışı ekler.
mdl-layout--fixed-header - Küçük ekranlarda bile başlığın her zaman görünür olmasını sağlar.
mdl-layout__header-row - Konteyneri MDL başlık satırı olarak tanımlar.
mdl-layout-title - Düzen başlığı metnini tanımlar.
mdl-layout__content - div'i MDL düzen içeriği olarak tanımlar.
mdl-mini-footer - Kapsayıcıyı bir MDL mini altbilgi bileşeni olarak tanımlar.
mdl-mini-footer__left-section - Konteyneri sol bölüm olarak tanımlar.
mdl-logo - Bir kabı stilize edilmiş bölüm başlığı olarak tanımlar.
mdl-mini-footer__link-list - Sırasız bir listeyi satır içi (yatay) liste olarak tanımlar.
mdl-mini-footer__right-section - Konteyneri doğru bölüm olarak tanımlar.
mdl_minifooter.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>
<div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class = "mdl-layout__header">
<div class = "mdl-layout__header-row">
<span class = "mdl-layout-title">Material Design Tabs</span>
</div>
</header>
<main class = "mdl-layout__content">
<footer class = "mdl-mini-footer">
<div class = "mdl-mini-footer__left-section">
<div class = "mdl-logo">
Copyright Information
</div>
<ul class = "mdl-mini-footer__link-list">
<li><a href = "#">Help</a></li>
<li><a href = "#">Privacy and Terms</a></li>
<li><a href = "#">User Agreement</a></li>
</ul>
</div>
<div class = "mdl-mini-footer__right-section">
<button class = "mdl-mini-footer__social-btn">1</button>
<button class = "mdl-mini-footer__social-btn">2</button>
<button class = "mdl-mini-footer__social-btn">3</button>
</div>
</footer>
</main>
</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
Bir MDL rozeti bileşeni, bir sayı veya simge olabilen bir ekran bildirimidir. Genellikle öğelerin sayısını vurgulamak için kullanılır.
MDL, rozetlere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeler uygulamak için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-badge Öğeyi bir MDL rozet bileşeni olarak tanımlar. Aralık veya bağlantı öğesi için gereklidir. |
| 2 | mdl-badge--no-background Rozete açık daire efekti uygular ve isteğe bağlıdır. |
| 3 | mdl-badge--overlap Rozetin kabıyla örtüşmesini sağlar ve isteğe bağlıdır. |
| 4 | data-badge="value" Özellik olarak kullanılan rozete bir dize değeri atar; aralık veya bağlantı için gereklidir. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-badge öğeleri yaymak ve bağlamak için bildirimler eklemek için sınıf.
Aşağıda verilen MDL sınıfları bu örnekte kullanılacaktır.
mdl-badge - Öğeyi bir MDL rozet bileşeni olarak tanımlar.
data-badge- Rozete bir dize değeri atar. Simgeler, HTML sembolleri kullanılarak atanabilir.
mdl_badges.htm
<html>
<head>
<script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
padding: 20px;
background: #fafafa;
position: relative;
}
</style>
</head>
<body>
<span class = "material-icons mdl-badge" data-badge = "1">account_box</span>
<span class = "material-icons mdl-badge" data-badge = "★">account_box</span>
<span class = "mdl-badge" data-badge = "4">Unread Messages</span>
<span class = "mdl-badge" data-badge = "⚑">Rating</span>
<a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, düğmelere önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-button Düğmeyi, gerekli bir MDL bileşeni olarak ayarlar. |
| 2 | mdl-js-button Düğmeye gerekli olan temel MDL davranışını ekler. |
| 3 | (none) Düz ekran efektini düğme olarak ayarlar, varsayılan. |
| 4 | mdl-button--raised Yükseltilmiş görüntü efektini ayarlar; bu fab, mini-fab ve simge ile birbirini dışlar. |
| 5 | mdl-button--fab Fab (dairesel) görüntü efektini ayarlar; bu, yükseltilmiş, mini-fab ve simge ile birbirini dışlar. |
| 6 | mdl-button--mini-fab Mini-fab (küçük fab dairesel) görüntü efektini ayarlar; bu, yükseltilmiş, fab ve simge ile birbirini dışlar. |
| 7 | mdl-button--icon Simge (küçük düz dairesel) ekran efektini ayarlar; bu, yükseltilmiş, fab ve mini-fab ile birbirini dışlar. |
| 8 | mdl-button--colored Renklerin material.min.css'de tanımlandığı yerde renkli görüntü efektini ayarlar. |
| 9 | mdl-button--primary Renklerin material.min.css'de tanımlandığı birincil renk görüntü efektini ayarlar. |
| 10 | mdl-button--accent Renklerin material.min.css'de tanımlandığı yerde vurgulu renk görüntüleme efektini ayarlar. |
| 11 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar, diğer herhangi bir sınıfla birlikte kullanılabilir. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-button farklı düğme türlerini göstermek için sınıflar.
mdl_buttons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table border = "0">
<tbody>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Colored fab (circular) display effect</td>
<td>Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Plain fab (circular) display effect</td>
<td>Plain fab (circular) with ripple display effect</td>
<td>Plain fab (circular) and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Raised button</td>
<td>Raised button with ripple display effect</td>
<td>Raised button and disabled</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Colored Raised button</td>
<td>Accent-colored Raised button</td>
<td>Accent-colored raised button with ripple effect</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button" disabled>
<i class = "material-icons">add</i></button></td>
</tr>
<tr>
<td>Flat button</td>
<td>Flat button with ripple effect</td>
<td>Disabled flat button</td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--primary">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--accent">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Primary Flat button</td>
<td>Accent-colored Flat button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--icon">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Icon button</td>
<td>Colored Icon button</td>
<td> </td>
</tr>
<tr>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
<i class = "material-icons">add</i></button></td>
<td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
<i class = "material-icons">add</i></button></td>
<td> </td>
</tr>
<tr>
<td>Mini Colored fab (circular) display effect</td>
<td>Mini Colored fab (circular) with ripple display effect</td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı kart türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-card Div öğesini "dış" div için gerekli olan bir MDL kart kapsayıcısı olarak tanımlar. |
| 2 | mdl-card--border Uygulandığı kart bölümüne kenarlık koyar ve "iç" divlerde kullanılır. |
| 3 | mdl-shadow--2dp through mdl-shadow--16dp Karta değişken gölge derinlikleri (2, 3, 4, 6, 8 veya 16) ayarlar ve isteğe bağlıdır, "dış" div üzerine gider; atlanırsa gölge gösterilmez. |
| 4 | mdl-card__title Div'i bir kart başlığı kapsayıcısı olarak tanımlar ve "iç" başlık div'de gereklidir. |
| 5 | mdl-card__title-text Uygun metin özelliklerini kart başlığına koyar ve başlık div içindeki başlık etiketinde (H1 - H6) gereklidir. |
| 6 | mdl-card__subtitle-text Metin özelliklerini bir kart altyazısına koyar ve isteğe bağlıdır. Başlık öğesinin alt öğesi olmalıdır. |
| 7 | mdl-card__media Div'i bir kart ortam kabı olarak tanımlar ve "iç" ortam bölmesinde gereklidir. |
| 8 | mdl-card__supporting-text Div'i bir kart gövdesi metin kabı olarak tanımlar ve gövde metnine uygun metin özellikleri atar ve "iç" gövde metni div'de gereklidir; metin, araya giren kapsayıcılar olmadan doğrudan div'in içine gider. |
| 9 | mdl-card__actions Div'i bir kart eylemleri konteyneri olarak tanımlar ve eylemler metnine uygun metin özellikleri atar ve "iç" eylemler div'de gereklidir; içerik, araya giren kapsayıcılar olmadan doğrudan div'in içine gider. |
Misal
Aşağıdaki örnek, farklı araç ipuçlarını göstermek için mdl-tooltip sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_cards.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family = Material+Icons">
<style>
.wide-card.mdl-card {
width: 512px;
}
.square-card.mdl-card {
width: 256px;
height: 256px;
}
.image-card.mdl-card {
width: 256px;
height: 256px;
background: url('html5-mini-logo.jpg') center / cover;
}
.image-card-image__filename {
color: #000;
font-size: 14px;
font-weight: bold;
}
.event-card.mdl-card {
width: 256px;
height: 256px;
background: #3E4EB8;
}
.event-card.mdl-card__title {
color: #fff;
height: 176px;
}
.event-card > .mdl-card__actions {
border-color: rgba(255, 255, 255, 0.2);
display: flex;
box-sizing:border-box;
align-items: center;
color: #fff;
}
</style>
</head>
<body>
<table>
<tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
<tr>
<td>
<div class = "wide-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
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.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
<td>
<div class = "square-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title">
<h2 class = "mdl-card__title-text">H5</h2>
</div>
<div class = "mdl-card__supporting-text">
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.
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn HTML5</a>
</div>
<div class = "mdl-card__menu">
<button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class = "material-icons">share</i></button>
</div>
</div>
</td>
</tr>
<tr><td>Image Card</td><td>Event Card</td></tr>
<tr>
<td>
<div class = "image-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand"></div>
<div class = "mdl-card__actions">
<span class = "image-card-image__filename">html5-logo.jpg</span>
</div>
</div>
</td>
<td>
<div class = "event-card mdl-card mdl-shadow--2dp">
<div class = "mdl-card__title mdl-card--expand">
<h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
</div>
<div class = "mdl-card__actions mdl-card--border">
<a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Add to Calendar</a>
<div class = "mdl-layout-spacer"></div>
<i class = "material-icons">event</i>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türlerdeki ilerleme çubuklarını görüntülemek için bir dizi 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 | mdl-js-progress Temel MDL davranışını ilerleme göstergesine ayarlar ve gerekli bir sınıftır. |
| 2 | mdl-progress__indeterminate Animasyonu ilerleme göstergesine ayarlar ve isteğe bağlı bir sınıftır. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-js-progress farklı türdeki ilerleme çubuklarını gösteren sınıflar.
mdl_progressbars.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Progress bar</h4>
<div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
<h4>Indeterminate Progress bar</h4>
<div id = "progressbar2"
class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<h4>Buffering Progress bar</h4>
<div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
<script language = "javascript">
document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(44);
});
document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded',
function() {
this.MaterialProgress.setProgress(33);
this.MaterialProgress.setBuffer(87);
});
</script>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türdeki eğiricileri görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-spinner Bir kabı MDL döndürücü bileşeni olarak tanımlar ve gerekli bir sınıftır. |
| 2 | mdl-js-spinner Temel MDL davranışını eğiriciye ayarlar ve gerekli bir sınıftır. |
| 3 | is-active Döndürücüyü gösterir ve hareketlendirir ve isteğe bağlıdır. |
| 4 | mdl-spinner--single-color Renkleri değiştirmek yerine tek renk kullanır ve isteğe bağlıdır. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-spinner sınıflar ve farklı iplikçiler.
mdl_spinners.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h4>Default Spinner</h4>
<div class = "mdl-spinner mdl-js-spinner is-active"></div>
<h4>Single Color Spinner</h4>
<div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı menü türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-button Düğmeyi bir MDL bileşeni olarak tanımlar ve düğme öğesi için gereklidir. |
| 2 | mdl-js-button Temel MDL davranışını düğmeye ayarlar ve düğme öğesinde gereklidir. |
| 3 | mdl-button--icon Simgeyi düğmeye ayarlar ve düğme öğesinde gereklidir. |
| 4 | material-icons Açıklığı bir malzeme simgesi olarak tanımlar ve bir satır içi öğede gereklidir. |
| 5 | mdl-menu Bir MDL bileşeni olarak sıralanmamış bir liste kabını tanımlar ve ul öğesinde gereklidir. |
| 6 | mdl-js-menu Menüye temel MDL davranışını ayarlar ve ul öğesinde gereklidir. |
| 7 | mdl-menu__item Düğmeleri MDL menü seçenekleri olarak tanımlar ve liste öğesi öğelerinde gerekli olan temel MDL davranışını ayarlar. |
| 8 | mdl-js-ripple-effect Dalgalanma tıklama efektini seçenek bağlantılarına ayarlar ve isteğe bağlıdır; sırasız liste öğesi için gereklidir. |
| 9 | mdl-menu--top-left Düğmenin üzerindeki menü konumunu ayarlar, menünün sol kenarını düğmeyle hizalar ve isteğe bağlıdır; sırasız liste öğesi için gereklidir. |
| 10 | (none) Varsayılan olarak, menü düğmenin altına yerleştirilmiştir, düğme ile sol kenara hizalanır. |
| 11 | mdl-menu--top-right Menü buton üzerine konumlandırılmış, buton ile sağ kenara hizalı, opsiyonel ve sırasız liste elemanına geçer. |
| 12 | mdl-menu--bottom-right menü butonun altında konumlandırılır, buton ile sağ kenara hizalanır, opsiyoneldir ve sırasız liste elemanına geçer. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-spinner farklı iplikçi türlerini gösteren sınıflar.
mdl_menu.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.container {
position: relative;
width: 200px;
}
.background {
background: white;
height: 148px;
width: 100%;
}
.bar {
box-sizing: border-box;
background: #BBBBBB;
color: white;
width: 100%;
height: 64px;
padding: 16px;
}
.wrapper {
box-sizing: border-box;
position: absolute;
right: 16px;
}
</style>
</head>
<body>
<table>
<tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
<td>Top Right Menu</td></tr>
<tr>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<button id = "demo_menu-lower-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-lower-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-lower-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
<div class = "background"></div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<button id = "demo_menu-top-left"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-left">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</td>
<td>
<div class = "container mdl-shadow--2dp">
<div class = "background"></div>
<div class = "bar">
<div class = "wrapper">
<button id = "demo_menu-top-right"
class = "mdl-button mdl-js-button mdl-button--icon"
data-upgraded = ",MaterialButton">
<i class = "material-icons">more_vert</i>
</button>
<ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
for = "demo_menu-top-right">
<li class = "mdl-menu__item">Item #1</li>
<li class = "mdl-menu__item">Item #2</li>
<li disabled class = "mdl-menu__item">Disabled Item</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı menü türlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-slider Giriş öğesini bir MDL bileşeni olarak tanımlar ve gereklidir. |
| 2 | mdl-js-slider Giriş öğesine temel MDL davranışını ayarlar ve gereklidir. |
Misal
Aşağıdaki örnek, farklı kaydırıcı türlerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_sliders.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Slider</td><td>Slider with initial value</td>
<td>Disabled Slider</td></tr>
<tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "0" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0"
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
<td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"
min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled
oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
</tr>
</table>
Value: <div id = "message" >25</div>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türde onay kutularını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-checkbox Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir. |
| 2 | mdl-js-checkbox Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir. |
| 3 | mdl-checkbox__input Temel MDL davranışını onay kutusu olarak ayarlar ve giriş öğesinde gereklidir (onay kutusu). |
| 4 | mdl-checkbox__label Temel MDL davranışını resim yazısına ayarlar ve yayılma öğesi (resim yazısı) için gereklidir. |
| 5 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesine değil (onay kutusu) etiket öğesine gider. |
Misal
Aşağıdaki örnek, farklı onay kutusu türlerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_checkboxes.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı radyo düğmelerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-radio Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir. |
| 2 | mdl-js-radio Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir. |
| 3 | mdl-radio__button Temel MDL davranışını radyoya ayarlar ve giriş öğesinde (radyo düğmesi) gereklidir. |
| 4 | mdl-radio__label Temel MDL davranışını resim yazısına ayarlar ve yayılma öğesi (resim yazısı) için gereklidir. |
| 5 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesinde değil (radyo düğmesi) etiket öğesinin üzerine gider. |
Misal
Aşağıdaki örnek, farklı radyo düğmelerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_radio.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
<td>Disabled Radio Button</td></tr>
<tr>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option1">
<input type = "radio" id = "option1" name = "gender"
class = "mdl-radio__button" checked>
<span class = "mdl-radio__label">Male</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect"
for = "option2">
<input type = "radio" id = "option2" name = "gender"
class = "mdl-radio__button" >
<span class = "mdl-radio__label">Female</span>
</label>
</td>
<td>
<label class = "mdl-radio mdl-js-radio" for = "option3">
<input type = "radio" id = "option3" name = "gender"
class = "mdl-radio__button" disabled>
<span class = "mdl-radio__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türde onay kutularını simgeler olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablolar, mevcut sınıfları ve etkilerini listeler.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-icon-toggle Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir. |
| 2 | mdl-js-icon-toggle Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir. |
| 3 | mdl-icon-toggle__input Temel MDL davranışını simge geçişi olarak ayarlar ve giriş öğesinde gereklidir (simge geçişi). |
| 4 | mdl-icon-toggle__label Temel MDL davranışını resim yazısına ayarlar ve i öğesinde (simge) gereklidir. |
| 5 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesine değil, etiket öğesine gider (simge geçişi). |
Misal
Aşağıdaki örnek, mdl-icon-toggle farklı türde onay kutularını simge olarak göstermek için sınıflar.
mdl_icons.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Icon</td><td>Off Icon</td>
<td>Disabled Icon</td></tr>
<tr>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-1">
<input type = "checkbox" id = "icon-toggle-1"
class = "mdl-icon-toggle__input" checked>
<i class = "mdl-icon-toggle__label material-icons">format_bold</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input">
<i class = "mdl-icon-toggle__label material-icons">format_italic</i>
</label>
</td>
<td>
<label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"
for = "icon-toggle-2">
<input type = "checkbox" id = "icon-toggle-2"
class = "mdl-icon-toggle__input" disabled>
<i class = "mdl-icon-toggle__label material-icons">format_underline</i>
</label>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türdeki onay kutularını anahtarlar olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-switch Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir. |
| 2 | mdl-js-switch Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir. |
| 3 | mdl-switch__input Geçiş için temel MDL davranışını ayarlar ve giriş öğesinde (anahtar) gereklidir. |
| 4 | mdl-switch__label Temel MDL davranışını resim yazısına ayarlar ve giriş öğesinde (başlık) gereklidir. |
| 5 | mdl-js-ripple-effect Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş elemanına (anahtar) değil etiket elemanına gider. |
Misal
Aşağıdaki örnek, mdl-anahtar sınıflarının ve anahtar olarak farklı onay kutusu türlerinin kullanımını anlamanıza yardımcı olacaktır.
mdl_switches.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table>
<tr><td>On Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve bir tabloyu veri tablosu olarak görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-data-table Tabloyu bir MDL bileşeni olarak tanımlar ve tablo öğesinde gereklidir. |
| 2 | mdl-js-data-table Temel MDL davranışını tabloya ayarlar ve tablo öğesinde gereklidir. |
| 3 | mdl-data-table--selectable Tüm / tek tek seçilebilir davranışları (onay kutuları) ayarlar ve isteğe bağlıdır; tablo elemanına gider. |
| 4 | mdl-data-table__cell--non-numeric Metin biçimlendirmesini veri hücresine ayarlar ve isteğe bağlıdır; hem tablo başlığına hem de tablo veri hücrelerine gider. |
| 5 | (none) Varsayılan olarak, sayısal biçimlendirmeyi başlık veya veri hücresi olarak ayarlar. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-data-table veri tablosunu gösteren sınıflar.
mdl_data_tables.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
<thead>
<tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
<th>Class</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
<td>VI</td><td>A</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
<td>VI</td><td>B</td></tr>
<tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
<td>VI</td><td>A</td></tr>
</tbody>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı türlerdeki metin girişlerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-textfield Konteyneri bir MDL bileşeni olarak tanımlar ve "dış" div öğesinde gereklidir. |
| 2 | mdl-js-textfield Giriş için temel MDL davranışını ayarlar ve "dış" div öğesinde gereklidir. |
| 3 | mdl-textfield__input Öğeyi metin alanı girişi olarak tanımlar ve girdi veya metin alanı öğesi için gereklidir. |
| 4 | mdl-textfield__label Öğeyi metin alanı etiketi olarak tanımlar ve giriş veya metin alanı öğeleri için etiket öğesinde gereklidir. |
| 5 | mdl-textfield--floating-label Yüzen etiket efekti uygular ve isteğe bağlıdır; "dış" div öğesine gider. |
| 6 | mdl-textfield__error Açıklığı bir MDL hata mesajı olarak tanımlar ve isteğe bağlıdır; desenli MDL girdi elemanı için span elemanına devam eder. |
| 7 | mdl-textfield--expandable Bir div'i MDL genişletilebilir metin alanı kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div öğesinde gereklidir. |
| 8 | mdl-button Etiketi bir MDL simge düğmesi olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
| 9 | mdl-js-button Simge kabına temel davranışı ayarlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
| 10 | mdl-button--icon Etiketi bir MDL simge kabı olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "dış" div'in etiket öğesinde gereklidir. |
| 11 | mdl-input__expandable-holder Bir kabı bir MDL bileşeni olarak tanımlar; genişletilebilir giriş alanları için kullanılır ve "iç" div öğesinde gereklidir. |
| 12 | is-invalid Metin alanını ilk yüklemede geçersiz olarak tanımlar ve mdl-textfield öğesinde isteğe bağlıdır. |
Misal
Aşağıdaki örnek, farklı metin alanı türlerini göstermek için mdl-textfield sınıflarının kullanımını anlamanıza yardımcı olacaktır.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.
MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı araç ipuçlarını görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listelemektedir.
| Sr.No. | Sınıf Adı ve Tanımı |
|---|---|
| 1 | mdl-tooltip Konteyneri bir MDL araç ipucu olarak tanımlar ve araç ipucu konteyner öğesinde gereklidir. |
| 2 | mdl-tooltip--large Büyük yazı tipi efektini ayarlar ve isteğe bağlıdır; araç ipucu kapsayıcı öğesine gider. |
Misal
Aşağıdaki örnek, ürünün kullanımını anlamanıza yardımcı olacaktır. mdl-tooltip farklı araç ipuçlarını göstermek için sınıflar.
mdl_tooltips.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip1" class = "icon material-icons">add</div>
<div class = "mdl-tooltip" for = "tooltip1">Follow</div>
</td>
<td>
<div id = "tooltip2" class = "icon material-icons">print</div>
<div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
</td>
</tr>
<tr>
<td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
<tr>
<td>
<div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
<div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
</td>
<td>
<div id = "tooltip4" class = "icon material-icons">share</div>
<div class = "mdl-tooltip" for = "tooltip4">
Share your content<br>using social media</div>
</td>
</tr>
</table>
</body>
</html>Sonuç
Sonucu doğrulayın.