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/20 20:15] (actual)
enric_mieza_sanchez [Mes widgets!]
@@ Línia 221: / Línia 221: @@
 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