CODEWITHSUNDEEP
cssvue.jsionic-frameworkmaterialize
joshhemphill
joshhemphill

Reputation: 612

Materialize CSS/components in Ionic/Vue to use materialize interchangeably with Ionic?

If I put the materialize css link in the head for the index.html for the @ionic/vue source code, will I be able to use those css class styles inside/on vue and ionic components? And will it override the default styles for Ionic components?

Upvotes: 0

Views: 4955

Answers (2)

joshhemphill
joshhemphill

Reputation: 612

I successfully implemented Materialize in Vue/Ionic, the other answer is still correct because I didn't think about the difference between Ionic components and using normal html(div) components and still using Vue and Ionic functions on html components that are tagged with Materialize classes.

I just set up a sass folder in the root of the project and set my pre-processor to save the output to the /src/assets/ folder. Then I added imports to the main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import './assets/materialize.min.css';
import './assets/materialize.min.js';

Then I added the html imports in the /public/index.html file:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="<%= BASE_URL %>materialize.min.css" rel="stylesheet">
  <title>CIWI</title>
</head>

<body>
  <noscript>
    <strong>We're sorry but CIWI doesn't work properly without JavaScript enabled. Please enable it to
      continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="<%= BASE_URL %>materialize.min.js"></script>
</body>

</html>

Now when I create components, I can choose to use the materialize components and theme instead of Ionic's by adding the materialize classes.

Upvotes: 0

Ryker
Ryker

Reputation: 51

No, adding materialize will not override the ionic components. the material components need to be predefined.

http://ionicmaterial.com/

https://github.com/zachfitz/Ionic-Material

Upvotes: 1

Related Questions