bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc


materialize

Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

Ambdós costats versió prèvia Revisió prèvia
Següent revisió
Revisió prèvia
materialize [2023/02/01 20:13]
enric_mieza_sanchez [Primera plantilla]
materialize [2024/02/05 20:15] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
Línia 20: 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 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 //framework// [[Cordova]] , pel què caldria que reviséssiu primer aquest article per seguir aquestes explicacions. Aquest article treballa Materialize assumint que estem en un context del //framework// [[Cordova]] , pel què caldria que reviséssiu primer aquest article per seguir aquestes explicacions.
Línia 117: Línia 117:
 </file> </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: "Failed to load resource cordova_plugins.js".
  
 +Una [[https://stackoverflow.com/questions/18486362/cordova-plugins-js-is-missing|solució que apareix a Stackoverflow]] és instal·lar el //package// [[https://www.npmjs.com/package/cordova-plugin-device|cordova-plugin-device]]:
 +
 +  $ cordova plugin add cordova-plugin-device
 +</WRAP>
 +
 +
 +<WRAP info>
 +Ull, perquè el "include" del codi de jQuery (que hem copiat del //starter template//) l'estem descarregant de la CDN, en concret en aquesta línia:
 +<file html index.html>
 +<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 +</file>
 +
 +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 ''js'', com les altres, i carregar-la en local.
 +<file html index.html>
 +<script src="js/jquery-2.1.1.min.js"></script>
 +</file>
 +</WRAP>
 +
 +<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'error a la consola del //browser//.
 +  - Comprova que el menú lateral funciona quan cliquem el //hamburger menu//.
 +</WRAP>
 +
 +\\
  
 ===== Pestanyes d'aplicació (tabs) ===== ===== Pestanyes d'aplicació (tabs) =====
Línia 152: Línia 180:
  */  */
  
 +/* body fix: perquè ocupi tota la pantalla */
 html, body { html, body {
   height: 100vh;   height: 100vh;
Línia 160: 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%;
materialize.1675282421.txt.gz · Darrera modificació: 2023/02/01 20:13 per enric_mieza_sanchez