Vue Mini Player Card - Argon

The MiniPlayerCard component helps you to simply create a beautiful player card.

Demo

Some Kind Of Blues

Deftones

<template>
 <mini-player-card
  color="success"
  :song="{ label: 'Some Kind Of Blues', album: 'Deftones' }"
/>
</template>

<script>
import MiniPlayerCard from '@/examples/Cards/MiniPlayerCard.vue";

export default {
 components: {
    MiniPlayerCard,
   },
 };
</script>

1<template>
2 <mini-player-card
3  color="success"
4  :song="{ label: 'Some Kind Of Blues', album: 'Deftones' }"
5/>
6</template>
7
8<script>
9import MiniPlayerCard from '@/examples/Cards/MiniPlayerCard.vue";
10
11export default {
12 components: {
13    MiniPlayerCard,
14   },
15 };
16</script>

Props Information

Name	Type	Default	Description
color	['success' 'primary' 'secondary' 'info' 'dark' 'danger' 'light' 'warning' 'error']	primary	`color` is used to add overlay color to the `MiniPlayerCard` component.
song	Object		`song` is an object used to add description and has the following keys: `label` of type string. `album` of type string.