CODEWITHSUNDEEP
vue.jsvue-component
FUN_
FUN_

Reputation: 5

Coloring buttons in Vue using vuematerial

I can not get the button colored as I want it to.

See this screenshot, showing the expected and actual results:

screenshot

I do not know what i have missed, this my first time that i use vuematerial. Here is my source code: 

 <template>
      <div>
        <div>
          <small>Flat</small>
          <md-button>Default</md-button>
          <md-button :md-ripple="false">Ripple Off</md-button>
          <md-button class="md-primary">Primary</md-button>
          <md-button class="md-accent">Accent</md-button>
          <md-button disabled>Disabled</md-button>
        </div>

        <div>
          <small>Raised</small>
          <md-button class="md-raised">Default</md-button>
          <md-button class="md-raised" :md-ripple="false">Ripple Off</md-button>
          <md-button class="md-raised md-primary">Primary</md-button>
          <md-button class="md-raised md-accent">Accent</md-button>
          <md-button class="md-raised" disabled>Disabled</md-button>
        </div>

        <div>
          <small>Dense</small>
          <md-button class="md-dense md-primary">Flat</md-button>
          <md-button class="md-dense md-raised md-primary">Raised</md-button>
        </div>
      </div>
    </template>

    <style scoped>
      small {
        display: block;
      }
    </style>

    <script>
      export default {
        name: 'RegularButtons'
      }
    </script>

Upvotes: 0

Views: 805

Answers (1)

Nathan Bland
Nathan Bland

Reputation: 245

From a quick look at their documentation it appears that you are missing a theme for the library, which is where things like md-primary are set.

Below wherever you are importing the base library, i.e.

import 'vue-material/dist/vue-material.min.css'

You need to add the theme import as well,

import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

This should solve the buttons not having any colors.

Upvotes: 0

Related Questions