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 [Pestanyes d'aplicació (tabs)]
+++ 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 221: / Línia 197: @@
 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.
+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'afegir aquest codi al ''init.js'' (observa les ''options'' perquè s'activi l'efecte //swipe//):
+<code javascript>
+window.onload = (event) => {
+    console.log("Pàgina carregada completament. Inicialitzant..");
+    var options = { "swipeable": true };
+    var el = document.getElementsByClassName('tabs');
+    var instance = M.Tabs.init(el, options);
+};
+</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'':
+<file css style.css>
+/*
+ * ...deixar els continguts que existissin prèviament...
+ */
+/* body fix: perquè ocupi tota la pantalla */
+html, body {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: column;
+}
+/*
+ * afegir la class tabs-content a cada div de contingut
+ * per solucionar el contingut scollable de cada pestanya
+ */
+.tabs-content {
+  height: 100%;
+  overflow-y: scroll !important;
+}
+</file>
+\\

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina