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ó

--- materialize [2025/11/20 20:13]
enric_mieza_sanchez [Obrir una pestanya des del codi]
+++ materialize [2025/11/26 19:55] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
@@ Línia 65: / Línia 65: @@
 </WRAP>
-Pots fer un cop d'ull al Starter-Template al final d'aquesta pàgina: https://materializeweb.com/getting-started.html (millor no, el starter-template a Novembre de 2025 no és correcte).
+<WRAP download>
+Ves a [[https://materializeweb.com/getting-started.html|Getting Started]] i descarrega els arxius de la darrera versió de Materialize. Afegeix-los a la carpeta ''www'' del projecte Cordova.
+</WRAP>
 A partir d'aquesta podrem elaborar el projecte base per a una app mòbil Cordova:
@@ Línia 80: / Línia 82: @@
     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
     <title>Materialize 2025</title>
-    <link
+    <!-- Fonts Google -->
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css"
-    />
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
-    <link href="css/style.css" rel="stylesheet" media="screen,projection" />
+    <!-- CSS materialize -->
+    <link rel="stylesheet" href="css/materialize.min.css" />
+    <!-- CSS personalitzat -->
+    <link rel="stylesheet" href="css/style.css" media="screen,projection" />
   </head>
   <body>
@@ Línia 98: / Línia 100: @@
     <script src="cordova.js"></script>
     <!-- Compiled and minified JavaScript -->
-    <script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/js/materialize.min.js"></script>
+    <script src="js/materialize.min.js"></script>
     <!-- init -->
     <script src="js/index.js"></script>
   </body>
 </html>
@@ Línia 107: / Línia 109: @@
 </WRAP>
-A ''init.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:
+A ''index.js'' li afegirem el codi que també tenim a l'aplicació original de Cordova, hauria de quedar així:
 <file javascript index.js>
@@ Línia 134: / Línia 136: @@
   $ cordova plugin add cordova-plugin-device
 </WRAP>
-<WRAP info>
-ULL, perquè el "include" del codi i CSS de l'exemple l'estem descarregant de la CDN, en concret en aquestes línies:
-<file html index.html>
-<!-- head CSS -->
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css"
-/>
-<!-- Compiled and minified JavaScript (al final de l'arxiu HTML) -->
-<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/js/materialize.min.js"></script>
-</file>
-Si executéssim l'app en algun lloc sense cobertura, no funcionaria ja que li faltaria poder accedir a la llibreria de Materialize. Seria més adient descarregar els arxius a les carpetes locals ''js'' i ''css'' i carregar-les així:
-<file html index.html>
-<!-- head css -->
-<link rel="stylesheet" href="css/materialize.min.css" />
-<!-- Compiled and minified JavaScript -->
-<script src="js/materialize.min.js"></script>
-</file>
-</WRAP>
 \\
@@ Línia 169: / Línia 145: @@
 Aplicarem una Navbar i Tabs per disposar d'una plantilla d'app força complerta:
   * [[https://materializeweb.com/navbar.html|Navbar]]: barra de menú de navegació superior.
-  * [[https://materializeweb.com/sidenav.html|Sidenav]]: menú lateral que s'activa al prémer el botó de "menú hamburguesa" o quan llisquem des de la banda esquerra.
   * [[https://materializeweb.com/tabs.html|Tabs]]: accés a les diferents pantalles de l'aplicació.
+  * [[https://materializeweb.com/sidenav.html|Sidenav]]: menú lateral que s'activa al prémer el botó de "menú hamburguesa" o quan llisquem des de la banda esquerra.
 Si seguim els exemples bàsics hauríem d'aconseguir una app com aquesta:
-{{materialize-navbar-tabs.png?200|Tabs}}
+{{materialize-navbar-tabs.png?200|Navbar + Tabs}}
 {{materialize-sidenav.png?200|Sidenav}}
@@ Línia 188: / Línia 164: @@
 \\
-===== 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ó.
+===== Obrir una pestanya des del codi (canvi de pantalla) =====
+Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte ''Tabs''.
+Mirant la [[https://materializeweb.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:
+<code javascript>
+// canviem al tab 3
+var tabs = document.getElementById("id_element_tab_ul");
+var tabsInstance = M.Tabs.getInstance(tabs);
+tabsInstance.select("id_del_tab3");
+</code>
+Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:
+<code javascript>
+$('#tabs-swipe-demo').tabs("select", "id_del_tab3");
+</code>
+\\
+===== Mes widgets! =====
+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://materializeweb.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive.
+  * [[https://materializeweb.com/collections.html|Collections]] per fer llistes d'elements.
+  * Els imprescindibles [[https://materializeweb.com/buttons.html|Buttons]] amb icones i efectes xaxis.
+  * 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://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.
+\\
+===== Pestanyes lliscants =====
 [[https://materializeweb.com/tabs.html#swipeable|Materialize implementa tabs amb efecte de desplaçament]] força vistosos.
@@ Línia 197: / Línia 208: @@
 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>
+<code javascript>
 window.onload = (event) => {
     console.log("Pàgina carregada completament. Inicialitzant..");
@@ Línia 204: / Línia 215: @@
     var instance = M.Tabs.init(el, options);
 };
-</sxh>
+</code>
 I finalment, per aconseguir que cadascuna de les seccions ocupin l'alçada de la pantalla, caldrà afegir aquestes línies al l'arxiu ''style.css'':
@@ Línia 234: / Línia 245: @@
 \\
-===== Obrir una pestanya des del codi (canvi de pantalla) =====
-Si volem obrir una pestanya des d'una altra, caldrà fer una crida a l'objecte ''Tabs''.
-Mirant la [[https://materializeweb.com/tabs.html|doc de Tabs]] veurem que per saltar de pestanya farem el següent:
-<code javascript>
-// canviem al tab 3
-var tabs = document.getElementById("id_element_tab_ul");
-var tabsInstance = M.Tabs.getInstance(tabs);
-tabsInstance.select("id_del_tab3");
-</code>
-Si ho volem fer amb jQuery també tenim aquesta alternativa, més concisa:
-<code javascript>
-$('#tabs-swipe-demo').tabs("select", "id_del_tab3");
-</code>
-\\
-===== Mes widgets! =====
-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://materializeweb.com/grid.html|Grid i containers]] per aprendre com administrar els continguts del cos de forma responsive.
-  * [[https://materializeweb.com/collections.html|Collections]] per fer llistes d'elements.
-  * Els imprescindibles [[https://materializeweb.com/buttons.html|Buttons]] amb icones i efectes xaxis.
-  * 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://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.

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina