Add color to vuetify component
11,872
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>
Related videos on Youtube
Author by
user1592380
Updated on June 04, 2022Comments
-
user1592380 almost 2 years
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?
-
ljubadr about 5 years
style="color: ..."
orstyle="background-color: ..."
. The propcolor="..."
expects one of these values -
Traxo about 5 yearsSome components such as
v-flex
don't havecolor
prop. So you must either set custom color in theme and use the relevant class, or style it manually. -
Michael Iyke about 3 years@Traxo I wish you had put a link on setting custom color. But thanks for your answer nonetheless, was helpful
-
-
user1592380 about 5 yearsThank you, Any idea how to turn the text white instead of black?
-
Boussadjra Brahim about 5 yearsyou're welcome, see my updated answer about changing the text color