person-card 个人信息卡
解释:个人信息卡组件,可配置卡片类型、卡片背景图、卡片名称、卡片信息功能,适用于信息展示,并可放置在页面的任何位置。
属性说明
属性名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
type | String | 否 | normal | 信息卡类型。normal:默认普通模式,big:大图模式 |
bgImg | String | 否 | 卡片背景图 | |
name | String | 是 | 卡片名称 | |
infoList | Array | 是 | 卡片信息,最多可配置 5 条,超过不会显示 | |
person-card-wrap | String | 否 | 提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片的样式,如背景颜色,背景图的展现方式 | |
info-name-wrap | String | 否 | 提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片 name 的的样式 | |
info-title-wrap | String | 否 | 提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片信息的左侧标题样式 | |
info-desc-wrap | String | 否 | 提供卡片的扩展样式类,供开发者自定义组件样式,可通过此 class 改变卡片信息的右边内容样式 |
示例
跳转编辑工具
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<view class="wrap">
<view class="content">
<view class="card-panel" s-for="item, index in personList">
<view class="comp-wrap">
<smt-person-card
name="主标题"
type="normal"
info-list="{{item.personCard}}"
bg-img="{{item.imgSrc}}"
/>
</view>
</view>
</view>
</view>