bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • playground • android_persistencia • docker_swarm_secrets • robatori_sessio_web • proves_de_seguretat • passwords_gnu_linux
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 19:59]
enric_mieza_sanchez [Instal·lació] 		materialize [2024/12/03 16:05] (actual)
enric_mieza_sanchez [Pestanyes d'aplicació (tabs)]
Línia 6: Línia 6:
  
 Referències: Referències:
-  * Web principal: https://materializecss.com+  * Web antiga: https://materializecss.com 
 +  * Web actual: https://materializeweb.com
   * [[https://fonts.google.com/icons|Material icons]]   * [[https://fonts.google.com/icons|Material icons]]
-  * [[https://materializecss.com/getting-started.html|Getting started - templates]].+  * [[https://materializecss.com/getting-started.html|Getting started - templates (antic)]]. 
 +  * [[https://github.com/materializecss/materialize-docs/tree/main/templates|Getting started - templates (actual)]].
  
-{{ materialize.svg }}+ 
 +{{ materialize.svg?300 }}
  
  
Línia 20: Línia 23:
 ===== 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 28: Línia 31:
  
 ===== Grid (la quadrícula) ===== ===== Grid (la quadrícula) =====
-La part més important del Material Design, en el què respecta a la //responsiveness//, és el que anomenem la [[https://materializecss.com/grid.html|Grid]].+La part més important del Material Design, en el què respecta a la //responsiveness//, és el que anomenem la [[https://materializeweb.com/grid.html|Grid]].
  
 El referent històric més conegut és Twitter Bootstrap, un dels //frameworks// CSS més exitosos. Va definir l'espai visual en 12 columnes, que és el que ens trobem encara en MaterializeCSS. El referent històric més conegut és Twitter Bootstrap, un dels //frameworks// CSS més exitosos. Va definir l'espai visual en 12 columnes, que és el que ens trobem encara en MaterializeCSS.
  
 <WRAP todo> <WRAP todo>
-  - Llegeix la [[https://materializecss.com/grid.html|documentació de la Grid de MaterializeCSS]] per veure exemples. +  - Llegeix la [[https://materializeweb.com/grid.html|documentació de la Grid de MaterializeCSS]] per veure exemples. 
-  - Descarrega el //starter template// de la secció [[https://materializecss.com/getting-started.html|getting started]].+  - Descarrega el //starter template// de la secció [[https://materializeweb.com/getting-started.html|getting started]].
   - Modifica'l i crea 6 elements amb icones (els ''div'' amb ''class='col' '') que responguin de la següent manera:   - Modifica'l i crea 6 elements amb icones (els ''div'' amb ''class='col' '') que responguin de la següent manera:
     * (s)mall screen: 1 sol element     * (s)mall screen: 1 sol element
Línia 40: Línia 43:
     * (l)arge screen: 4 elements     * (l)arge screen: 4 elements
   - Aplica noves icones de [[https://fonts.google.com/icons|material-icons]].   - Aplica noves icones de [[https://fonts.google.com/icons|material-icons]].
 +  - Crea títol i text per a 6 notícies (pots utilitzar ChatGPT o similars).
 +  - Crea imatges amb IA per a les notícies.
 +  - Formata les notícies amb l'efecte [[https://materializeweb.com/cards.html|Card Reveal de Materialize CSS]].
 </WRAP> </WRAP>
  
Línia 54: Línia 60:
 \\ \\
  
-===== Primera plantilla ===== +===== Primera plantilla Cordova + Materialize ===== 
-Descarrega el Starter-Template al final d'aquesta pàgina: https://materializecss.com/getting-started.html+<WRAP info> 
 +L'objectiu ara serà crear una aplicació Cordova que utilitzi correctament la plantilla de MaterializeCSS. Necessitem fusionar adequadament els arxius d'ambdós //templates//. 
 +</WRAP> 
 + 
 +Descarrega el Starter-Template al final d'aquesta pàgina: https://materializeweb.com/getting-started.html
  
 Copia els arxius CSS i JS a les carpetes del projecte cordova (www). Copia els arxius CSS i JS a les carpetes del projecte cordova (www).
Línia 61: Línia 71:
 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 ''index.html'' del template de MaterializeCSS+Fes un backup del template ''index.html'' de Cordova i llavors sí, copia ''index.html'' del template de MaterializeCSS
  
 Comprova que el visualitzem correctament: Comprova que el visualitzem correctament:
Línia 113: Línia 123:
 </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) =====
 El primer que necessitarem per tenir una aplicació mòbil decent serà disposar de diversos TABs o pestanyes o seccions de l'aplicació. El primer que necessitarem per tenir una aplicació mòbil decent serà disposar de diversos TABs o pestanyes o seccions de l'aplicació.
  
-[[https://materializecss.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.+[[https://materializeweb.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.
  
 Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs "swipeables" amb les 3 pàgines. Elimina els continguts interns del projecte (deixa els encapçalaments, navbar i sidenav) i implementa els tabs "swipeables" amb les 3 pàgines.
  
-Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'aplicar un codi similar a això a ''init.js'' (observa les ''options'' perquè s'activi l'efecte de //swip//):+Aquest component (els tabs) necessita ser inicialitzat amb les opcions adequades. Per activar-ho hauràs d'afegir aquest codi al ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
  
 <sxh js> <sxh js>
 +window.onload = (event) => {
 +    console.log("Pàgina carregada completament. Inicialitzant..");
     var options = { "swipeable": true };     var options = { "swipeable": true };
-    var el = document.getElementById('tabs');+    var el = document.getElementsByClassName('tabs');
     var instance = M.Tabs.init(el, options);     var instance = M.Tabs.init(el, options);
-</sxh> +};
- +
-Com pots veure, Materialize pot utilitzar jQuery però tampoc és imprescindible (a la majoria de plugins). +
- +
-Si volem utilitzar la versió jQuery sería d'aquesta manera: +
- +
-<sxh js> +
-    $('.tabs').tabs({"swipeable":true});+
 </sxh> </sxh>
  
Línia 148: Línia 181:
  */  */
  
 +/* body fix: perquè ocupi tota la pantalla */
 html, body { html, body {
   height: 100vh;   height: 100vh;
Línia 156: Línia 190:
 } }
  
 +/*
 + * 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 168: Línia 206:
 Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte Tabs. Inicialment (a la versió 0.100) aquest objecte només es podia utilitzar amb jQuery, però des de la v1.0.0 s'ha dissenyat per no dependre de jQuery. Algunes funcions continuen podent-se cridar amb jQuery, però concretament aquesta canvi de pestanya el mostrem amb JS normal (sense jQuery). Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte Tabs. Inicialment (a la versió 0.100) aquest objecte només es podia utilitzar amb jQuery, però des de la v1.0.0 s'ha dissenyat per no dependre de jQuery. Algunes funcions continuen podent-se cridar amb jQuery, però concretament aquesta canvi de pestanya el mostrem amb JS normal (sense jQuery).
  
-Mirant la [[https://materializecss.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:+Mirant la [[https://materializeweb.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:
  
 <code javascript> <code javascript>
Línia 186: Línia 224:
 ===== Menú lateral (sidenav) ===== ===== Menú lateral (sidenav) =====
  
-Mira el [[https://materializecss.com/sidenav.html|plugin Sidenav de MaterializeCSS]] per veure les diverses opcions de la Navbar que ja porta implementada la plantilla de Starter Template.+Mira el [[https://materializeweb.com/sidenav.html|plugin Sidenav de MaterializeCSS]] per veure les diverses opcions de la Navbar que ja porta implementada la plantilla de Starter Template.
  
 Implementa un menú més complert amb diversos menus disponibles. Implementa un menú més complert amb diversos menus disponibles.
Línia 196: Línia 234:
 Per tenir una aplicació a full ens caldran aquest tipus de recursos, molt ben estilitzats. Fes-li un cop d'ull a tots ells, imprescindibles! Per tenir una aplicació a full ens caldran aquest tipus de recursos, molt ben estilitzats. Fes-li un cop d'ull a tots ells, imprescindibles!
  
-  * [[https://materializecss.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive. +  * [[https://materializeweb.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive. 
-  * [[https://materializecss.com/collections.html|Collections]] per fer llistes d'elements. +  * [[https://materializeweb.com/collections.html|Collections]] per fer llistes d'elements. 
-  * Els imprescindibles [[https://materializecss.com/buttons.html|Buttons]] amb icones i efectes xaxis. +  * Els imprescindibles [[https://materializeweb.com/buttons.html|Buttons]] amb icones i efectes xaxis. 
-  * El famós [[https://materializecss.com/floating-action-button.html|Floating-Action Button]] a baix a la dreta, amb desplegable d'accions i tot. +  * El famós [[https://materializeweb.com/floating-action-button.html|Floating-Action Button]] a baix a la dreta, amb desplegable d'accions i tot. 
-  * Obrir un [[https://materializecss.com/modals.html|diàleg modal]] per demanar accions a l'usuari sense canviar de pàgina o pestanya.+  * Obrir un [[https://materializeweb.com/modals.html|diàleg modal]] per demanar accions a l'usuari sense canviar de pàgina o pestanya.
  
 I no deixeu d'investigar la pàgina de materializecss.com , està plena de recursos ben fets. I no deixeu d'investigar la pàgina de materializecss.com , està plena de recursos ben fets.
materialize.1675281558.txt.gz · Darrera modificació: 2023/02/01 19:59 per enric_mieza_sanchez

Eines de la pàgina

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
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki