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 [2023/02/01 19:56] enric_mieza_sanchez [Materialize CSS] referencies |
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 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 44: | Línia 44: | ||
\\ | \\ | ||
- | ===== Instal·lació | + | ===== Creació projecte Cordova |
- | Creem el nostre projecte | + | Si volem treballar en [[Cordova]] podem crear un projecte així: |
$ cordova create materialapp | $ cordova create materialapp | ||
Línia 54: | 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 61: | 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 113: | Línia 117: | ||
</ | </ | ||
- | 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 148: | Línia 180: | ||
*/ | */ | ||
+ | /* body fix: perquè ocupi tota la pantalla */ | ||
html, body { | html, body { | ||
height: 100vh; | height: 100vh; | ||
Línia 156: | 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%; |