Primary color MDB Pro component
A primary color is the color displayed most frequently across your app’s screens and components.
If you don’t have a secondary color, your primary color can also be used to accent elements.
Dark and light primary variants
You can make a color theme for your app using your primary color, as well as dark and light primary variants.
Distinguish UI elements
To create contrast between UI elements, such as distinguishing a top app bar from a system bar, you can use light or dark variants of your primary color on each elements. You can also use variants to distinguish elements within a component, such different variants used on a floating action button container, and the icon within it.
<template>
<mdb-card>
<mdb-card-header
class="deep-purple darken-4 white-text text-right p-2"
>
<mdb-icon fab class="px-2" icon="facebook-f" size="sm" />
<mdb-icon fab class="px-2" icon="twitter" size="sm" />
<mdb-icon fab class="px-2" icon="instagram" size="sm" />
</mdb-card-header>
<mdb-navbar dark color="deep-purple accent-4" hamburger expand="xl">
<mdb-navbar-brand>
Analytics
</mdb-navbar-brand>
<mdb-navbar-toggler> </mdb-navbar-toggler>
</mdb-navbar>
<mdb-card-body>
<mdb-card-title>Alie Corporation</mdb-card-title>
<mdb-card-text>NYSE: AZHC • Oct 16, 1:45PM</mdb-card-text>
<div class="d-flex justify-content-between mb-2">
<p class="display-4 align-self-end">887.32</p>
<p class="align-self-end pb-2">887.02 (.03%)</p>
</div>
<mdb-bar-chart :data="data" :options="options" :height="200" />
<mdb-btn
tag="a"
floating
icon="plus"
class="deep-purple accent-1 float-right"
iconClass="black-text"
/>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
} from "mdbvue";
export default {
name: "ColorCombination",
components: {
mdbIcon,
mdbCard,
mdbCardBody,
mdbCardHeader,
mdbBarChart,
mdbBtn,
mdbCardTitle,
mdbCardText,
mdbNavbar,
mdbNavbarToggler,
mdbNavbarBrand
},
data() {
return {
data: {
labels: [
"8 AM",
"10 AM",
"12 PM",
"2 PM",
"4 PM",
"6 PM",
"8 PM"
],
datasets: [
{
fill: false,
borderColor: "#673ab7",
pointBackgroundColor: "#673ab7",
data: [881, 882, 883, 884, 887, 885, 0],
backgroundColor: "#311b92"
}
]
},
options: {
responsive: true,
legend: {
display: false
},
elements: {
line: {
tension: 0.0
}
},
scales: {
xAxes: [
{
gridLines: {
display: false
},
ticks: {
padding: 15,
height: 30
}
}
],
yAxes: [
{
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
padding: 15,
min: 880,
max: 890
}
}
]
}
}
};
}
};
</script>
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)