[[oktatas:web:front-end_framework|< Front-end framework]]

====== Materialize ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A Materialize =====

Webhely:
  * https://materializecss.com/


===== Materialize kezdés =====

  npm install materialize-css@next


===== Weblap előkészítése =====

<code html>
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css">
</code>

<code html>
<script src="node_modules/materialize-css/dist/js/materialize.js"></script>
</code>

===== Konténer =====

<code html>
<div class="container">
<!-- Tartalom -->
</div>
</code>

===== Színek =====

  * https://materializecss.com/color.html (2024)

<code>
<div class="teal lighten-2">alma</div>
</code>

===== Grid =====


<code html>
    <div class="row">
      <div class="col s1">1</div>
      <div class="col s1">2</div>
      <div class="col s1">3</div>
      <div class="col s1">4</div>
      <div class="col s1">5</div>
      <div class="col s1">6</div>
      <div class="col s1">7</div>
      <div class="col s1">8</div>
      <div class="col s1">9</div>
      <div class="col s1">10</div>
      <div class="col s1">11</div>
      <div class="col s1">12</div>
    </div>
</code>


<code html>
    <div class="row">
      <div class="col s12">12-oszlop - teljes szélességet elfoglal</div>
      <div class="col s6">6-oszlop - szélesség fele</div>
      <div class="col s6">6-oszlop - szélesség fele</div>
    </div>
</code>

===== Segítők =====

==== Igazítás ====

  * .left-align
  * .right-align
  * .center-align

<code html>
  <div>
    <h5 class="left-align">Lorem ipsum dolor est amet</h5>
  </div>
  <div>
    <h5 class="right-align">Lorem ipsum dolor est amet</h5>
  </div>
  <div>
    <h5 class="center-align">Lorem ipsum dolor est amet</h5>
  </div>
</code>

===== Média =====

==== Képek ====

<code html>
<img class="responsive-img" src="kepnev.jpg">
</code>