https://github.com/cuduy197/vue-flashcard

Rich flashcard component for vue js 2 :tada:
https://github.com/cuduy197/vue-flashcard

awesome-vue flashcards vue-components vuejs2

Last synced: 4 months ago
JSON representation

Rich flashcard component for vue js 2 :tada:

• Host: GitHub
• URL: https://github.com/cuduy197/vue-flashcard
• Owner: cuduy197
• Created: 2017-04-27T19:46:46.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-04-28T13:08:27.000Z (about 8 years ago)
• Last Synced: 2024-10-29T23:15:43.649Z (7 months ago)
• Topics: awesome-vue, flashcards, vue-components, vuejs2
• Language: Vue
• Homepage:
• Size: 4.88 KB
• Stars: 122
• Watchers: 3
• Forks: 18
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue Flashcard :zap:

![Image flashcard](https://media.giphy.com/media/3og0ICaNlqFKHKlXKo/giphy.gif)

+ This is [on GitHub](https://github.com/cuduy197/vue-flashcard)  so let me know if I've b0rked it somewhere, give me a star :star: if you like it 

### :white_check_mark: Install :ok_hand:

``` npm i vue-flashcard```

### :white_check_mark: Usage :mortar_board:

- Add it to  your component  :tada:

![Usage image](https://media.giphy.com/media/l1BgQGZQxJcXNiwk8/giphy.gif)

```javascript

import vueFlashcard from 'vue-flashcard';

export default {

components : { vueFlashcard }

}

```

### :white_check_mark: Example :four_leaf_clover: 

```html

```

### :white_check_mark: :book: Props: 

+ `front` ( Front text) [default: ""]

+ `back` (Back text) [default: ""]

+ `imgFront` (Image front ) [default: ""]

+ `imgBack` (Image back)  [default: ""]

+ `colorFront` (Color front card ) [default: "white"]

+ `colorBack` (Color back card ) [default: "green"]

+ `colorTextFront` (Color text front card ) [default: "black"]

+ `colorTextBack` (Color text back card ) [default: "white"]

+ `textSizeFront` (Text size front card ) [default: "2em"]

+ `textSizeBack` (Text size back card )  [default: "2em"]

+ `headerFront` (Header front text ) [default: "Do you know?"]

+ `headerBack` (Header back text )  [default: "Answer"]

+ `footerFront` (Footer front text)  [default: "Click to show Back"]

+ `footerBack` (Footer back text ) [default: "Click to show Front"]

## Make with my old laptop :octocat:  

[![NPM](https://nodei.co/npm/vue-flashcard.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-flashcard/)