# FlipCard

**Repository Path**: maybe_gmy/flip-card

## Basic Information

- **Project Name**: FlipCard
- **Description**: 翻转卡片
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-26
- **Last Updated**: 2025-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# FlipCard

#### 介绍
FlipCard是一个卡片翻转的自定义组件。单击可以进行翻转，正面和反面UI可以自定义。

#### 安装

```ohpm install @maybe/flip_card```

#### 效果
![功能演示](res/功能演示.gif)

#### 自定义参数

| 参数        | 默认值 | 描述         |
|-----------|-----|------------|
| frontView | 28  | 默认显示view   |
| backView  | 32  | 点击翻转后的view |
| isNeedReverse  | 45  | 翻转后是否复原    |

#### 使用

```
  @Builder
  FrontView() {
    Image($r('app.media.ic_backcard'))
  }

  @Builder
  BackView() {
    Row() {
      Text('恭喜中奖').fontColor(Color.White)
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Blue)
  }

  build() {
    Row() {
      FlipCard({
        frontView: () => this.FrontView(),
        backView: () => this.BackView(),
        isNeedReverse: false
      }).width(140).height(200)
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
```