More actions
No edit summary |
No edit summary |
||
Line 321: | Line 321: | ||
</v-container> | </v-container> | ||
</div> | </div> | ||
<script src="/res/Common/js/vue.min.js"></script> | |||
<script src="/res/Common/js/vuetify.min.js"></script> | |||
<script> | <script> | ||
if (typeof BoxPool == "undefined") { | if (typeof BoxPool == "undefined") { | ||
Line 385: | Line 387: | ||
}); | }); | ||
} | } | ||
}, | }, 50) | ||
</script> | </script> | ||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
Revision as of 17:38, 27 July 2024
参数说明
- 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/", }, ] }}
效果展示
显示一个标题
这是一段示例文本。这段文本将环绕显示。你可以在这里添加更多内容, 注意{{#widget:ProductCard}}必须放在第一行位置,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
接下是其它效果展示: