vue-flip-flop-card v0.2.5

vue-flip-flop-card

The is a card.. for vue.. that flips!

Why the name flip-flop-card, you ask? Well, hopefully it will be just as easy to apply in a project, as applying a set of flip flops to your feet. Oh, and the other names were taken, I guess 🤷‍♂️

This is my first attempt making a reusable npm-module, and it's mainly an exercise for me to learn how to package SFCs (Single File Components) for Vue via rollupjs, as well as getting into the habit of maintaining and documenting open-source on npm and git. Not expecting it to work perfectly for all purposes, but will try to maintain from time to time.

Feel free to report issues, fork, send feature/pull-requests, or reuse for whatever purpose you see fit.

Disclaimer: the author would like to emphasize that he doesn't wear flip flops. Ever.

Preview

Installation

npm install vue-flip-flop-card --save

Getting started

Global registration

Within a Vue project, add these lines in your main.js or index.js;

import Vue from 'vue';
import FlipFlopCard from 'vue-flip-flop-card';

Vue.use(FlipFlopCard);

Local registration

import FlipFlopCard from "vue-flip-flop-card";
export default {
    components: {FlipFlopCard}
}

Example usage

Component usage with just bare slots for custom content:

<flip-flop-card :elevation="8" direction="horizontal">
    <template slot="front">
      <div class="container basic-card">
        <h1>vue-flip-flop-card</h1>
        <h2>horizontal flip</h2>
      </div>
    </template>
    <template slot="back">
      <div class="container basic-card">
      </div>
    </template>
</flip-flop-card>

Notes; within the slot, wrapping the content in a <div> with a class named container will automatically apply full height of the card.

Component usage with styled card;

<template>
  <flip-flop-card
      :styled-front="optionsFrontCard"
      :styled-back="optionsBackCard"
  ></flip-flop-card>
</template>

Options set via object;

<script>
export default {
  data() {
    return {
      styledCardFront: {
        coverImg: 'https://images.unsplash.com/photo-1608903837898-17a1f38bbf6c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80',
        coverTitle: 'Hello, there!',
        themeColor: '#64ce87',
        themeColor2: '#188d65',
      },
      styledCardBack: {
        coverImg: 'https://images.unsplash.com/photo-1608903837898-17a1f38bbf6c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2255&q=80',
        coverTitle: 'I\'m back!',
        themeColor: '#5eadcd',
        themeColor2: '#126b8e',
      }
    }
  }
}
</script>

Props

Props are also documented within component, and can be found using the documentation shortcut in your IDE, such as Ctrl + Q in Jetbrains' Webstorm.

Styled card 🎴

The styled card is a pre-styled card where you pass in a set of options (as an object) that help theme how the card looks. The styled card consists of a header/cover image, title heading, and color styles for displaying content. The content is set via slots (see below);

Slots

Slots are used to pass content for the front or the back of the card. Both styled and regular blank cards use the same slot name (as of current version).

Todo

• Implement custom ways to trigger flip (not just :hover)
• Debug documentation/IDE support failing
• More options for styled card. Alternative shading for title, slots, etc

Changelog

0.2.1

• package.json sfc browser reference updated
• Updated documentation (jsDoc)
• Updated package description
• Fixed shield-links
• Updated documentation, moved assets to docs

License

This package is open source and released under the MIT Licence.