Widget:ProductCard

参数说明

• boxid 对象id, 默认值: product-card, 当需要在同一个页面上显示多个卡片时,需要保证boxid唯一
• themeColor 主题颜色, 默认值: #36a5e8
• images 图片数据, 必填
  • title 名称, 必填
  • src 图片链接, 必填
  • url 点击事件时的跳转链接, 选填
• chipsTitle 标签数据标题, 选填
• chips 标签数据, 选填
  • name 名称, chips有值时必填
  • url 点击事件时的跳转链接, 选填
• kvDatasTitle K-V数据标题, 选填
• kvDatas K-V数据, 选填
  • key 名称, 必填
  • value 值, 必填
  • url 点击事件时的跳转链接, 选填
• liDataTitle 列表数据标题, 选填
• liDatas 列表数据, 选填
  • name 名称, 必填
  • url 点击事件时的跳转链接, 必填

用法

{{#widget:ProductCard
| themeColor = #36a5e8
| images = [
    {
      title: "CM4核心板",
      src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg",
      url: "http://www.lcdwiki.com/"
    },
  ]
| chipsTitle = 板载接口
| chips = [
    {
      name: "DIS",
      url: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg",
    },
    { name: "CSI", url: "" },
  ]
| kvDatasTitle = 功能简介
| kvDatas = [
    {
      key: "特性",
      value: "1200万像素",
    },
    {
      key: "接口",
      value: "CSI",
      url: "http://www.lcdwiki.com/",
    },
  ] 
| liDataTitle = 相关产品
| liDatas = [
    {
      name: "Raspberry Pi开发板",
      url: "http://www.lcdwiki.com/",
    },
  ]
}}

效果展示

{{ tabName }}

{{chipsTitle}}

{{chip.name}} {{chip.name}}

{{kvDatasTitle}}

{{kvItem.key}}

{{kvItem.value}} {{kvItem.value}}

{{liDataTitle}} {{liItem.name}}

显示一个标题

这是一段示例文本。这段文本将环绕显示。你可以在这里添加更多内容, 注意{{#widget:ProductCard}}必须放在第一行位置, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 接下是其它效果展示:

{{ tabName }}

{{chipsTitle}}

{{chip.name}} {{chip.name}}

{{kvDatasTitle}}

{{kvItem.key}}

{{kvItem.value}} {{kvItem.value}}

{{liDataTitle}} {{liItem.name}}

{{ tabName }}

{{chipsTitle}}

{{chip.name}} {{chip.name}}

{{kvDatasTitle}}

{{kvItem.key}}

{{kvItem.value}} {{kvItem.value}}

{{liDataTitle}} {{liItem.name}}

{{ tabName }}

{{chipsTitle}}

{{chip.name}} {{chip.name}}

{{kvDatasTitle}}

{{kvItem.key}}

{{kvItem.value}} {{kvItem.value}}

{{liDataTitle}} {{liItem.name}}