Eines de l'usuari
materialize
Diferències
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:59] enric_mieza_sanchez [Instal·lació] |
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 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%; | ||
materialize.1675281558.txt.gz · Darrera modificació: 2023/02/01 19:59 per enric_mieza_sanchez
Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
