IBest-UI

Appearance

Card 卡片 ​

介绍 ​

用于将内容展示在有阴影的容器中。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

ts
import { IBestCard } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder cardContent(){
    Column(){
      ForEach([1, 2, 3, 4], (item: number) => {
        Row(){
          Text('内容' + item)
        }
        .height(30)
      })
    }
  }
  build() {
    Column() {
      IBestCard(){
        this.cardContent()
      }
    }
  }
}

显示标题 ​

显示标题

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder cardContent(){
    Column(){
      ForEach([1, 2, 3, 4], (item: number) => {
        Row(){
          Text('内容' + item)
        }
        .height(30)
      })
    }
  }
  build() {
    Column() {
      IBestCard({
        title: '标题',
        titleClickable: true,
        onTitleClick: () => {
          console.log('点击了标题')
        }
      }){
        this.cardContent()
      }
    }
  }
}

背景图片 ​

背景图片

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder cardContent(){
    Column(){
      ForEach([1, 2, 3, 4], (item: number) => {
        Row(){
          Text('内容' + item)
        }
        .height(30)
      })
    }
  }
  build() {
    Column() {
      IBestCard({
        bgImage: "https://uploadfile.bizhizu.cn/2017/0731/20170731103322735.jpg"
      }){
        this.cardContent()
      }
    }
  }
}

API ​

@Props ​

参数说明类型默认值
title标题文字ResourceStr''
titleFontSize标题文字大小string | number16
titleFontColor标题文字颜色ResourceColor#323232
titlePadding标题内边距Length | Padding | LocalizedPadding{left:12, right:12,top:10,bottom:10}
titleClickable标题是否可点击booleanfalse
radius圆角string | number8
contentPadding内容内边距Length | Padding | LocalizedPadding12
bgColor背景颜色ResourceColor#ffffff
bgImage背景图片ResourceStr''
shadowRadius阴影半径number | Resource12
shadowColor阴影颜色ResourceColor#1f000000

插槽 ​

插槽名说明类型
defaultBuilder默认内容的插槽CustomBuilder

Events ​

事件名说明事件类型
onTitleClick标题点击事件, titleClickable为true时生效() => void

主题定制 ​

组件提供了下列颜色变量，可用于自定义深色/浅色模式样式，使用方法请参考 颜色模式 章节，如需要其它颜色变量可提 issue。

名称描述默认值
ibest_card_background_color背景颜色#fff
ibest_card_title_font_color标题文字颜色#323232
ibest_card_shadow_color阴影颜色#1f000000