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 | ||
materialize [2022/03/04 18:46] enrique_mieza_sanchez [Pestanyes d'aplicació (tabs)] scroll als tabs |
materialize [2024/02/05 20:15] (actual) 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 17: | Línia 20: | ||
===== 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 // | ||
Línia 24: | Línia 27: | ||
\\ | \\ | ||
- | ===== 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 34: | Línia 54: | ||
\\ | \\ | ||
- | ===== Primera plantilla ===== | + | ===== Primera plantilla |
+ | <WRAP info> | ||
+ | L' | ||
+ | </ | ||
Descarrega el Starter-Template al final d' | Descarrega el Starter-Template al final d' | ||
Línia 41: | 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 49: | 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 55: | 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 61: | 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 67: | 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 91: | Línia 115: | ||
// | // | ||
} | } | ||
- | </sxh> | + | </file> |
+ | |||
+ | 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. | ||
- | Arrenquem de nou amb el browser i comprovem | + | Comprova |
+ | - Revisa que no hi hagi missatges d' | ||
+ | - Comprova que el menú lateral funciona quan cliquem el //hamburger menu//. | ||
+ | </ | ||
\\ | \\ | ||
Línia 127: | Línia 180: | ||
*/ | */ | ||
+ | /* body fix: perquè ocupi tota la pantalla */ | ||
html, body { | html, body { | ||
height: 100vh; | height: 100vh; | ||
Línia 135: | Línia 189: | ||
} | } | ||
+ | /* | ||
+ | * afegir la class tabs-content a cada div de contingut | ||
+ | * per solucionar el contingut scollable de cada pestanya | ||
+ | */ | ||
.tabs-content { | .tabs-content { | ||
height: 100%; | height: 100%; | ||
Línia 149: | 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> | ||
+ | $('# | ||
+ | </code> | ||
\\ | \\ |