qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Card 卡片


提供常见的卡片样式。

使用指南

在 Taro 文件中引入组件

import { AtCard } from 'taro-ui-vue3'

组件依赖的样式文件(仅按需引用时需要)

@import "taro-ui-vue3/dist/style/components/card.scss";

一般用法

<AtCard
  note='小Tips'
  extra='额外信息'
  title='这是个标题'
  thumb='http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG'
>
  这也是内容区 可以随意定义功能
</AtCard>

AtCard 参数

参数说明类型可选值默认值
title元素的标题String--
note元素的辅助信息String--
thumb元素的缩略图String--
icon元素的图标,仅支持 AtIcon 支持的类型: AtIconBaseProps, 详细定义如下AtIconBaseProps--
renderIcon元素自定义图标JSX.Element | VNode--
extra元素的额外信息String--
extraStyle元素的额外信息自定义样式Object--
isFull是否通栏Boolean--

AtIconBaseProps 字段定义

interface AtIconBaseProps {
  value: string
  color?: string
  prefixClass?: string
  size?: number | string
}

AtCard 事件

事件名称说明返回参数
onClick元素被点击触发的事件-