materyalizecss'i kullanmaya başlama

Kurmak

Dosyaları indirdikten sonra, belirlediğiniz dizine çıkartın.

İki dosya grubu olduğunu fark edeceksiniz. Min’, yükleme sürelerini azaltmak için dosyanın “sıkıştırıldığı” anlamına gelir. Bu küçültülmüş dosyalar genellikle üretimde kullanılırken, küçültülmemiş dosyaları geliştirme sırasında kullanmak daha iyidir.

Ayıkladıktan sonra, dizininizin dosya yapısı şöyle görünmelidir:

  MyWebsite/
  |--css/
  |  |--materialize.css
  |
  |--fonts/
  |  |--roboto/
  |
  |--js/
  |  |--materialize.js
  |
  |--index.html

Örnek MaterializeCSS HTML sayfası:

<!DOCTYPE html>
<html>
 <head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 </head>

 <body>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
 </body>
</html>

İndirmek

MaterializeCSS’yi kullanmanın iki yolu vardır, ya dosyaları sisteminize indirebilir ya da dosyaları CDN’den (Content Delivery Network) kullanabilirsiniz.

Dosyaları indir

CDN’den Dahil Et

  • Küçültülmüş CSS’yi head bölümüne ekleyin:

     <!-- Compiled and minified CSS -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

  • Kapanış gövdesi etiketinden hemen önce Gövde bölümüne Javascript dosyasını ekleyin.

     <!-- Compiled and minified JavaScript -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>

Şablonlar

Bunlar, Başlık, Harekete Geçirici Mesaj ve Simge Özellikleri içeren en basit başlangıç ​​sayfalarıdır.

Başlangıç ​​Şablonu Paralaks Şablonu
Başlangıç ​​Şablonu Paralaks Şablonu
Demo veya İndir Demo veya İndir

Materializecss Kullanan Web Sayfası

Burada, ızgara sistemini ve “materyal kutulu"yu içeren Materialise CSS çerçevesini kullanan temel bir sayfa örneği verilmiştir.

<!DOCTYPE html>
<html>
<head>
<title>Materializecss Example webpage</title>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"  media="screen,projection"/>

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>
  <div class="container"> 
    <div class="row">
      <div class="col s12"><h3>MATERIALIZECSS EXAMPLE</h3><h4>A simple website just to show how an element is used.</h4></div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220"  src="https://upload.wikimedia.org/wikipedia/commons/7/76/Katun_nature_reserve.jpg">
        <h4>Katun Nature Reserve</h4>
        <p><i>Lovely Place</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://upload.wikimedia.org/wikipedia/commons/4/4b/Computer_art_4.png">
        <h4>Art</h4>
        <p><i>Simple & Attractive</i></p>
      </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/9/8715/16947318656_4c6cbc3091_b.jpg">
        <h4>Food</h4>
        <p><i>For any occasion</i></p>
       </div>
      <div class="col s12 m6 l3">
        <img class="materialboxed" width="100%" height="220" src="https://c1.staticflickr.com/7/6179/6217102314_350be5e843.jpg">
        <h4>Steve Jobs</h4>
        <p><i>Inspiration</i></p>
      </div>
    <div class="col s12"><h5>Comment your suggestion</h5></div>
    </div>
  </div>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
  $('.materialboxed').materialbox();
});
</script>
</body>

Sass’ımı nasıl derleyebilirim

Bu bölüm yalnızca Materialize’ın Sass sürümüyle çalışıyorsanız geçerlidir.

İlk olarak, çalışma dizininize Sass’ı kurmanız gerekir:

gem install sass

Projenizde Sass kurulu olduğunda ve çıktı .css dosyanızı güncellemek istediğinizde aşağıdaki komutu kullanmanız gerekir:

sass sass/materialize.scss public/style.css

NOT: ikinci parametre sass/materialize.scss .scss dosyanızın yoludur ve son sass/style.css parametresi .css dosyası bulunduğunda çıktı klasörünüzün yoludur.

Her değişiklik yaptığınızda bu komuttan kaçınmak istiyorsanız, bir izleme komutu çalıştırabilirsiniz:

 sass --watch sass/sass:public/stylesheets

NOT: bu komut, değişiklikler için scss dizinindeki tüm Sass dosyalarını izler ve ardından stil dosyasını genel dizinimize günceller.

Angular ile MaterializeCSS’yi Kullanma

MaterializeCSS çerçevesini kullanmanın birçok yolu vardır.

Kuruluma gitmeden önce akılda tutulması gereken birkaç şey

  • İçinde CSS adı olmasına rağmen, yalnızca bir CSS çerçevesi değildir. SCSS’sini de kullanabiliriz
  • Angular için tasarlanmamıştır.
  • Çok jquery üzerine inşa edilmiş bir bileşen çerçevesidir. Açısal olarak jquery (önerilmez) kullanmamamız gerekmesine rağmen, yine de import ediyoruz.

Aşağıdaki yöntemlerden any kullanabilirsiniz:

  • CDN
  • Varlıklar
  • Açısal (NPM) içine dahil et
  • Angular’a dahil et (SCSS ile kaynak)

Her birinin kendi avantajları ve dezavantajları vardır.

CDN

Bunu index.html dosyasına ekleyin ve hazırsınız .

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
 
 <!-- We need jquery first -->  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 <!-- Compiled and minified JavaScript -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

Varlıklar

Projenize bir varlık olarak ekleyin. Bu, yerel olarak oluştururken ve çalıştırırken internete bağlı kalmamaya yardımcı olur.

jQuery’yi indirin

CSS sürümünü indirin

  • Çıkart

  • “materialize.min.css”, “jquery-3.2.1.min.js” ve “materialize.min.js” dosyalarını varlıklar klasörünüze kopyalayın

  • bunları index.html’ye ekleyin

      <link rel="stylesheet" href="./assets/materialize.min.css" >
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/materialize.min.js"></script>

açısal olarak dahil et ( NPM)

Bu yöntemde dosyaları doğrudan açısal yapımıza dahil ediyoruz. Angular projesinin basitlik için @angular/cli ile oluşturulduğunu varsayıyorum.

Yapmak

npm install materialize-css --save 
npm install jquery --save

Bu, CSS dosyalarını indirmekle aynıdır, ancak bunları depomuza eklememize gerek yoktur.

Aşağıdakileri “.angular-cli.json"a ekleyin:

"styles": [
    "../node_modules/materialize-css/dist/css/materialize.css",
    "styles.scss"
]

...

"scripts":[
  "../node_modules/jquery/dist/jquery.js",
  "../node_modules/materialize-css/dist/js/materialize.js"
]

açısal olarak dahil et (SCSS)

SCSS sürümü ile kaynağı indirin

Kitaplığın varsayılan davranışını değiştirmek için ‘SCSS’den yararlanmak istiyorsanız bunu yapın. Aksi takdirde, önceki yöntemi kullanmaya devam edebilir ve SCSS’yi yan yana kullanabilirsiniz.

Bunları src dışındaki bir klasöre ekleyin. ‘src’ ile kardeş olarak bir ‘materialize-src’ klasörü oluşturup içeriğini buraya yapıştırabilirsiniz. Bunu yapıyoruz çünkü materyalize-css’nin npm kurulumu bize scss versiyonunu vermiyor. (Eğer Yanlışsam beni düzelt )

jquery’yi yükle

npm install jquery --save

Bunları .angular-cli.json dosyanıza ekleyin

"styles": [
    "../materialize-src/sass/materialize.scss",
    "styles.scss"
 ],
 "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../materialize-src/js/bin/materialize.min.js"
 ],

Angular ile Entegrasyon:

Yukarıdaki tüm kurulum yöntemleri, materyalize ile tam işlevsellik sağlar ve ** açısal olarak çalışmak için başka bir şey yüklemeye gerek yoktur**. Herhangi bir örnek alın ve açısal bileşenin bileşen kısmındaki uygun HTML yapısını kullanın ve gitmeye hazırsınız.

Bazı durumlarda javascript ile uğraşmanız gerekebilir ve bunun için jQuery kullanmamız gerekebilir. Bunun yerine angular2-materialize‘deki açısal sarmalayıcı geliştiriciyi kullanabiliriz. Açısal ve somutlaştırma kullanarak tam işlevsel bir site geliştirdim ve buna hiç ihtiyaç duymadım.

Hala ihtiyacın olduğuna inanıyorsan. Aşağıdaki gibi yükleyebilirsiniz:

  • Materialise’ı yukarıda belirtilen yollardan herhangi biriyle kurun

  • angular2-materialize yükleyin

      npm install angular2-materilize --save

    Add in angular app.module.ts

      import { MaterializeModule } from "angular2-materialize";

  @NgModule({
    imports: [
      //...
      MaterializeModule,
    ],
    //...
  })
kartlar →