61 lines
1.5 KiB
Markdown
61 lines
1.5 KiB
Markdown
# FlipCard
|
||
|
||
控件功能：一个可翻转的卡片控件，正面显示标题和副标题，鼠标悬停时 3D 翻转为背面显示详细信息。常用于产品展示、功能卡片等场景。
|
||
类型：普通控件
|
||
父类控件：`bricks.JsWidget`
|
||
|
||
## 初始化参数
|
||
|
||
| 参数名 | 类型 | 说明 |
|
||
|-------|------|------|
|
||
| `width` | string | 卡片宽度，默认 `280px`。 |
|
||
| `height` | string | 卡片高度，默认 `360px`。 |
|
||
| `css` | string/object | 自定义 CSS 样式类名。 |
|
||
|
||
## 子控件结构
|
||
|
||
FlipCard 接受 2 个子控件（subwidgets），分别为正面和背面内容：
|
||
|
||
```json
|
||
{
|
||
"widgettype": "FlipCard",
|
||
"subwidgets": [
|
||
{"widgettype": "VBox", "subwidgets": [...]}, // 正面
|
||
{"widgettype": "VBox", "subwidgets": [...]} // 背面
|
||
]
|
||
}
|
||
```
|
||
|
||
## 主要事件
|
||
|
||
- **`click`**
|
||
当卡片被点击时触发。
|
||
|
||
## 示例
|
||
|
||
```json
|
||
{
|
||
"widgettype": "FlipCard",
|
||
"options": {"css": "product-card"},
|
||
"subwidgets": [
|
||
{
|
||
"widgettype": "VBox", "options": {"css": "card-front"},
|
||
"subwidgets": [
|
||
{"widgettype": "Text", "options": {"text": "产品名称"}},
|
||
{"widgettype": "Text", "options": {"text": "简短描述"}}
|
||
]
|
||
},
|
||
{
|
||
"widgettype": "VBox", "options": {"css": "card-back"},
|
||
"subwidgets": [
|
||
{"widgettype": "Text", "options": {"text": "详细说明"}}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
## 依赖
|
||
|
||
需要在页面 CSS 中定义翻转动画样式（perspective、rotateY、backface-visibility），或使用 bricks 内置 CSS 类 `.bricks-flipcard`。
|