html sayfa üzerinde:
kütüphaneleri ekliyoruz
<link rel="stylesheet" type="text/css" href="stylesheet/style.css">
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<%= stylesheet_link_tag "https://fonts.googleapis.com/icon?family=Material+Icons" %>
body tagının içine gerekli kodları kopyalayıp, sonuna aşağıdaki komutu eklemeyi unutmayalım
<script type="text/javascript"> $.material.init()</script>
rails üzerinde;
Gemfile=> gem 'material_design_lite-rails'
application.js=> //= require material
application.css=> *= require material
Yukarıdaki kütüphaneleri ekleyelim,
örnek bir navbar için gerekli kodları siteden kopyalayıp body tagının içine alıyoruz:
<!-- 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">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"><!-- Your content goes here --></div>
</main>
</div>
<script type="text/javascript"> $.material.init()</script>
Görünümü:
