CODEWITHSUNDEEP
cssvue.jsvuejs2vue-componentvuetify.js
user1592380
user1592380

Reputation: 36317

Add color to vuetify component

I'm working with vuetify expansion panel ui component (https://vuetifyjs.com/en/components/expansion-panels). I'm bot sure how to add color to this. As you can see I've been trying to add color="#26c6da" to multiple components without success.

<template>
  <!-- <v-layout align-start > -->

  <!-- <v-layout align-start justify-center row fill-height> -->
  <v-container row fill-height justify-center style="max-width: 1200px" class="mx-auto" color="#26c6da">
    <!-- <v-layout row fill-height=""> -->
            <!-- <v-layout row justify-space-around> -->

      <v-flex  class="mx-auto" color="#26c6da">
        <v-expansion-panel style="max-width: 1200px" class="mx-auto" color="#26c6da" >
          <v-expansion-panel-content v-for="(item,i) in items" :key="i">
            <div slot="header" class="headline font-weight-bold">{{item.header}}</div>
            <v-card >
              <v-card-text class="headline font-weight-bold">{{item.text}}</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>
      </v-flex>
    <!-- </v-layout> -->
  </v-container>

Here is a component codepen link:

https://codepen.io/anon/pen/OdJKqm?&editable=true&editors=101

How can I get this working?

Upvotes: 2

Views: 15114

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Try to add a standard style like style="background:#26c6da;color:white" to any element you want : 

new Vue({
  el: '#app',

})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(item,i) in 5" :key="i" style="background:#26c6da;color:white">
        <div slot="header">Item</div>
        <v-card>
          <v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Upvotes: 4

Related Questions