FlipCard Flip Card

The FlipCard component provides a flipable card interface, supporting the display of content on both sides.

Basic Usage

Control the flip state of the card using the flipped attribute, and set the content of both sides using the front and back properties respectively.

FAILED

Onionl-UI: a UI library for Vue 3🚀

This is my first Open Source project,and I will continue to improve it.

I hope you like it🌟.

在 github 中打开

展开代码

复制代码

<script setup>
import { ref } from 'vue'
import Back from './back.vue'
import Front from './front.vue'

const isFlipped = ref(false)
function handleClick() {
  isFlipped.value = !isFlipped.value
}
</script>

<template>
  <div class="flex justify-center">
    <ol-flip-card
      class="w-70 h-70"
      :flipped="isFlipped"
      :front="Front"
      :back="Back"
      @click="handleClick"
    />
  </div>
</template>

Attributes

Attribute Name	Type	Default Value	Description
flipped	boolean	false	Controls whether the card is flipped
class	string | object | array	-	Custom class
front	Component	-	Component displayed on the front of the card
back	Component	-	Component displayed on the back of the card