Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.
Ambdós costats versió prèvia Revisió prèvia Següent revisió | Revisió prèvia Ultima revisió Ambdós costats nova versio | ||
materialize [2021/10/05 11:06] enrique_mieza_sanchez [Materialize CSS] |
materialize [2024/02/05 20:14] enric_mieza_sanchez [Primera plantilla Cordova + Materialize] |
||
---|---|---|---|
Línia 5: | Línia 5: | ||
Estava dirigit a ser " | Estava dirigit a ser " | ||
- | La web principal | + | Referències: |
+ | * Web principal: https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
{{ materialize.svg }} | {{ materialize.svg }} | ||
Línia 12: | Línia 15: | ||
{{tag> #Dam #DamMp08 #DamMpDual #Daw #DawMpDual #DawMp09 Android iOS Cordova HTML JavaScript }} | {{tag> #Dam #DamMp08 #DamMpDual #Daw #DawMpDual #DawMp09 Android iOS Cordova HTML JavaScript }} | ||
+ | |||
+ | \\ | ||
===== Context ===== | ===== Context ===== | ||
Tenim bàsicament 2 interessos per treballar amb Materialize CSS: | Tenim bàsicament 2 interessos per treballar amb Materialize CSS: | ||
- | * Si estem treballant en una web que volem que sigui responsive. | + | |
- | * Si estem treballant en aplicacions mòbils basades en HTML i CSS com [[Cordova]]. | + | * Si estem treballant en aplicacions mòbils basades en HTML i CSS com [[Cordova]]. |
Aquest article treballa Materialize assumint que estem en un context del // | Aquest article treballa Materialize assumint que estem en un context del // | ||
+ | \\ | ||
- | ===== Instal·lació | + | ===== Grid (la quadrícula) |
+ | La part més important del Material Design, en el què respecta a la // | ||
- | Creem el nostre projecte Cordova | + | El referent històric més conegut és Twitter Bootstrap, un dels // |
+ | |||
+ | <WRAP todo> | ||
+ | - Llegeix la [[https:// | ||
+ | - Descarrega el //starter template// de la secció [[https:// | ||
+ | - Modifica' | ||
+ | * (s)mall screen: 1 sol element | ||
+ | * (m)edium screen: 2 elements | ||
+ | * (l)arge screen: 4 elements | ||
+ | - Aplica noves icones de [[https:// | ||
+ | </ | ||
+ | |||
+ | \\ | ||
+ | |||
+ | ===== Creació projecte Cordova ===== | ||
+ | |||
+ | Si volem treballar en [[Cordova]] podem crear un projecte així: | ||
$ cordova create materialapp | $ cordova create materialapp | ||
Línia 29: | Línia 52: | ||
$ ls www | $ ls www | ||
+ | \\ | ||
+ | |||
+ | ===== Primera plantilla Cordova + Materialize ===== | ||
+ | <WRAP info> | ||
+ | L' | ||
+ | </ | ||
- | ===== Primera plantilla ===== | ||
Descarrega el Starter-Template al final d' | Descarrega el Starter-Template al final d' | ||
Línia 37: | Línia 65: | ||
Pel què fa a index.html no el podem copiar directament ja que necessitem barrejar els dos arxius. | Pel què fa a index.html no el podem copiar directament ja que necessitem barrejar els dos arxius. | ||
- | Fes un backup del template index.html de Cordova i llavors sí, copia '' | + | Fes un backup del template |
Comprova que el visualitzem correctament: | Comprova que el visualitzem correctament: | ||
Línia 45: | Línia 73: | ||
Copiem els '' | Copiem els '' | ||
- | <sxh html> | + | <WRAP prewrap> |
+ | <file html index.html> | ||
<meta http-equiv=" | <meta http-equiv=" | ||
<meta name=" | <meta name=" | ||
Línia 51: | Línia 80: | ||
<meta name=" | <meta name=" | ||
<meta name=" | <meta name=" | ||
- | </sxh> | + | </file> |
+ | </WRAP> | ||
Engega-ho en el browser i assegura' | Engega-ho en el browser i assegura' | ||
Línia 57: | Línia 87: | ||
Afegeix també els scripts al final de la pàgina, hauria de quedar algo així: | Afegeix també els scripts al final de la pàgina, hauria de quedar algo així: | ||
- | <sxh html> | + | <WRAP prewrap> |
+ | <file html index.html> | ||
< | < | ||
<script src=" | <script src=" | ||
Línia 63: | Línia 94: | ||
<script src=" | <script src=" | ||
<script src=" | <script src=" | ||
- | </sxh> | + | </file> |
+ | </WRAP> | ||
A '' | A '' | ||
- | <sxh js> | + | <file javascript |
- | // Arxiu init.js | + | |
(function($){ | (function($){ | ||
$(function(){ | $(function(){ | ||
- | |||
$(' | $(' | ||
- | |||
}); // end of document ready | }); // end of document ready | ||
})(jQuery); // end of jQuery name space | })(jQuery); // end of jQuery name space | ||
Línia 87: | Línia 115: | ||
// | // | ||
} | } | ||
- | </sxh> | + | </file> |
- | Arrenquem de nou amb el browser i comprovem que a la consola de Javascript no tenim cap error. | + | Arrenquem de nou amb el //browser// i comprovem que a la consola de Javascript no tenim cap error. |
+ | <WRAP important> | ||
+ | Si us dona un error tipus: " | ||
+ | Una [[https:// | ||
+ | |||
+ | $ cordova plugin add cordova-plugin-device | ||
+ | </ | ||
+ | |||
+ | |||
+ | <WRAP info> | ||
+ | Ull, perquè el " | ||
+ | <file html index.html> | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | Si executessim l'app en algun lloc sense cobertura, no funcionaria ja que li faltaria la llibreria de jQuery. Seria més adient descarregar la llibreria a la carpeta '' | ||
+ | <file html index.html> | ||
+ | <script src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP todo> | ||
+ | Segueix totes les passes indicades per disposar d'una app Cordova amb el //starter template// de MaterializeCSS. | ||
+ | |||
+ | Comprova que funciona correctament: | ||
+ | - Revisa que no hi hagi missatges d' | ||
+ | - Comprova que el menú lateral funciona quan cliquem el //hamburger menu//. | ||
+ | </ | ||
+ | |||
+ | \\ | ||
===== Pestanyes d' | ===== Pestanyes d' | ||
Línia 115: | Línia 172: | ||
$(' | $(' | ||
</ | </ | ||
+ | |||
+ | I finalment, per aconseguir que cadascuna de les seccions ocupin l' | ||
+ | |||
+ | <file css style.css> | ||
+ | /* | ||
+ | * ...deixar els continguts que existissin prèviament... | ||
+ | */ | ||
+ | |||
+ | /* body fix: perquè ocupi tota la pantalla */ | ||
+ | html, body { | ||
+ | height: 100vh; | ||
+ | width: 100%; | ||
+ | display: flex; | ||
+ | justify-content: | ||
+ | flex-flow: column; | ||
+ | } | ||
+ | |||
+ | /* | ||
+ | * afegir la class tabs-content a cada div de contingut | ||
+ | * per solucionar el contingut scollable de cada pestanya | ||
+ | */ | ||
+ | .tabs-content { | ||
+ | height: 100%; | ||
+ | overflow-y: scroll !important; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | \\ | ||
==== Obrir una pestanya ==== | ==== Obrir una pestanya ==== | ||
Línia 121: | Línia 207: | ||
Mirant la [[https:// | Mirant la [[https:// | ||
- | <sxh js> | + | <code javascript> |
- | // canviem al tab 2 | + | // canviem al tab 2 |
- | var tabs = document.getElementById(" | + | var tabs = document.getElementById(" |
- | var tabsInstance = M.Tabs.getInstance(tabs); | + | var tabsInstance = M.Tabs.getInstance(tabs); |
- | tabsInstance.select(" | + | tabsInstance.select(" |
- | </sxh> | + | </code> |
+ | |||
+ | Si ho volem fer amb jQuery també tenim aquesta alternativa, | ||
+ | <code javascript> | ||
+ | $('# | ||
+ | </ | ||
+ | |||
+ | \\ | ||
===== Menú lateral (sidenav) ===== | ===== Menú lateral (sidenav) ===== | ||
Línia 134: | Línia 227: | ||
Implementa un menú més complert amb diversos menus disponibles. | Implementa un menú més complert amb diversos menus disponibles. | ||
+ | \\ | ||
===== Mes widgets! ===== | ===== Mes widgets! ===== |