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 [2024/11/26 17:42]
enric_mieza_sanchez [Grid (la quadrícula)]
+++ materialize [2024/12/03 16:05] (actual)
enric_mieza_sanchez [Pestanyes d'aplicació (tabs)]
@@ Línia 31: / Línia 31: @@
 ===== 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.
 <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:
     * (s)mall screen: 1 sol element
@@ Línia 65: / Línia 65: @@
 </WRAP>
-Descarrega el Starter-Template al final d'aquesta pàgina: https://materializecss.com/getting-started.html
+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).
@@ Línia 159: / Línia 159: @@
 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.
-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>
+window.onload = (event) => {
+    console.log("Pàgina carregada completament. Inicialitzant..");
     var options = { "swipeable": true };
-    var el = document.getElementById('tabs');
+    var el = document.getElementsByClassName('tabs');
     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>
@@ Línia 211: / 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).
-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>
@@ Línia 229: / Línia 224: @@
 ===== 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.
@@ Línia 239: / 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!
-  * [[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.

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina