A Vue.js interactive card design component to show essentials and description for an event.

The Vue Event Card is a fluid and modern design to showcase your events in a clean and interactive way, and handling user actions. Completely responsive and easy to use, making sure both desgin and setup are minimal. Created for Vue.js by Dhruv Misra

Live Demo

A live demo can be found here.

Installation

npm i --save vue-event-card

This package in also dependent on the vue-router

npm i --save vue-router or vue add router

Global Usage

Register the component globally using the Vue.use() method.

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
//Import the plugin
import CardGrid from 'vue-event-card'

//Use the plugin
Vue.use(CardGrid);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Local Usage

Import the component and register it locally in the components option

<script>
  import CardGrid from 'vue-event-card'

  export default {
    components: {
      CardGrid
    }
  }
</script>

Once registered, you can use the component by passing an array of events:

<CardGrid :events="events" buttonText="Know More" hideTitle />

Props

| Prop | Type | Default | Description | |-------------- |------------------ |------------ |------------------------------------------------------------------------- | | events | Array (Required) | - | The array of event objects | | buttonText | String | "Register" | The text which appears inside the button | | hideTitle | Boolean | false | Hide the title on collapsed card (Will show in the expanded state) | | hideButton | Boolean | false | Hide button in the expanded state |

Emits

| Emitted Action | Description | |----------------- |------------------------------------------------------------------------ | | buttonClicked | Fired when the user clicks the button. Used to handle the click event. |

Events Array

The events array should be an array of objects. Individual objects should contain the following fields:

events: [
  {
    name: "Event name",
    date: "October 11, 2019",
    description: "Blah blah blah blah",
    html: '<p>This is some valid <br> HTML</p>',
    outerImage: "assets/images/event.jpg",
    innerImage: "https://i.imgflip.com/3cjfgr.jpg",
    details: {
      'Team Size': '2',
      'Time': '10AM - 1PM'
    }
  },
  ...
]

Event Object

| Name | Type | Description | |--------------- |--------------------- |------------------------------------------------------------------------------------------------------------------- | | name | String (Required) | Name of the event (Should be unique) | | date | String | Date of the event | | description | String | ...you know. | | html | String | Valid HTML code to render inside the card. | | outerImage | String (Image path) | The image appearing in the card in it's collapsed state. Also the image in the background in expanded state. | | innerImage | String (Image path) | The image appearing inside the card in expanded state. | | details | Object | Key-value pairs to show essential details on hovering the card. |

Things to keep in mind

Image paths

Image paths can be defined for images in the project relative to src folder

outerImage: 'assets/images/marvel.jpg'  //converts to: /src/assets/images/marvel.jpg

How these paths works?

The given image path is prefixed with @/ and then the image is imported using require() to get the webpack relative path.

Image paths can also be a URL

outerImage: 'https://i.imgflip.com/3cjfgr.jpg'  //should start with https:// or http://

Details Object

This object should contain key-value pairs for the information to be shown on hover

details: {
  'Field A': 'Value A',
  'Field B': 'Value B',
  'Field C': 'Value C',
  ...
}

This will have this affect:

Date Field

Preferred format for the date string:

[Month] [Date], [Year]

The comma (,) is important as the component takes the first part of the string before comma to display. I am planning to switch to UNIX timestamps or maybe another slight animation for the year.