bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • smx_mp04_uf3 • android_persistencia • materialize
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 [2025/11/20 20:15]
enric_mieza_sanchez [Mes widgets!] 		materialize [2025/11/26 19:55] (actual)
enric_mieza_sanchez [Primera plantilla Cordova + Materialize]
Línia 65: Línia 65:
 </WRAP> </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: 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">     <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
     <title>Materialize 2025</title>     <title>Materialize 2025</title>
-    <link +    <!-- Fonts Google -->
-      rel="stylesheet" +
-      href="https://cdn.jsdelivr.net/npm/@materializecss/materialize/dist/css/materialize.min.css" +
-    />+
     <link     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"       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>   </head>
   <body>   <body>
Línia 98: Línia 100:
     <script src="cordova.js"></script>     <script src="cordova.js"></script>
     <!-- Compiled and minified JavaScript -->     <!-- 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 -->     <!-- init -->
     <script src="js/index.js"></script>     <script src="js/index.js"></script>
 +        
   </body>   </body>
 </html> </html>
Línia 107: Línia 109:
 </WRAP> </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> <file javascript index.js>
Línia 134: Línia 136:
   $ cordova plugin add cordova-plugin-device   $ cordova plugin add cordova-plugin-device
 </WRAP> </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: 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/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/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: 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}} {{materialize-sidenav.png?200|Sidenav}}
  
materialize.1763669717.txt.gz · Darrera modificació: 2025/11/20 20:15 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