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 (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-28T13:08:27.000Z (over 8 years ago)
- Last Synced: 2025-07-25T08:38:14.858Z (5 months ago)
- Topics: awesome-vue, flashcards, vue-components, vuejs2
- Language: Vue
- Homepage:
- Size: 4.88 KB
- Stars: 123
- Watchers: 3
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-zh - Vue,烧录卡 - 带有Vue.js 2.x动画的FLashcard组件: 灯泡: (UI组件 / 杂)
- awesome-vue - vue-flashcard - Rich flashcard component for vue js 2 ` 📝 4 years ago` (UI Components [🔝](#readme))
- awesome-vue - vue-flashcard - FLashcard component with animation for Vue.js 2.x :bulb: (Components & Libraries / UI Components)
- awesome-vue - vue-flashcard ★77 - FLashcard component with animation for Vue.js 2.x :bulb: (UI Components / Miscellaneous)
- awesome-vue - vue-flashcard - FLashcard component with animation for Vue.js 2.x :bulb: (UI Components / Miscellaneous)
README
# Vue Flashcard :zap:
+ 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:
```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:
[](https://nodei.co/npm/vue-flashcard/)