打开/关闭搜索
搜索
打开/关闭菜单
43
1,113
4
9,249
LCD wiki
导航
首页
最近更改
帮助
特殊页面
上传文件
站点
English Site
中文站点
notifications
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。
user-interface-preferences
个人工具
登录
查看“Widget:ProductCard”的源代码
来自LCD wiki
更多操作
←
Widget:ProductCard
因为以下原因,您没有权限编辑该页面:
您请求的操作仅限属于该用户组的用户执行:
用户
您没有权限编辑
Widget
命名空间内的页面。
您可以查看和复制此页面的源代码。
<noinclude> == 参数说明 == * 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 点击事件时的跳转链接, 必填 == 用法 == <pre><nowiki> {{#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/", }, ] }} </nowiki></pre> == 效果展示 == {{#widget:ProductCard | boxid = demo1 | themeColor = #bc1d46 | images = [ { title: "CM4核心板", src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", url: "http://www.lcdwiki.com" }, { title: "官方底板", src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", }, { title: "官方底板外", src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", }, ] | chipsTitle = 板载接口 | chips = [ { name: "DIS", url: "http://www.lcdwiki.com", }, { name: "CSI", url: "" }, { name: "HDMI", url: "" }, { name: "USB2.0", url: "" }, { name: "I2C", url: "" }, { name: "PECI", url: "http://www.lcdwiki.com", }, { name: "SPI", url: "http://www.lcdwiki.com", }, { name: "UART", url: "" }, ] | kvDatasTitle = 功能简介 | kvDatas = [ { key: "特性", value: "1200万像素", }, { key: "模组", value: "IMX708", }, { key: "视场角", value: "75°/120°", url: "", }, { key: "接口", value: "CSI", url: "http://www.lcdwiki.com", }, ] | liDataTitle = 相关产品 | liDatas = [ { name: "Raspberry Pi开发板", url: "http://www.lcdwiki.com", }, { name: "Pioneer600", url: "http://www.lcdwiki.com", }, ] }} {{StyledHeader | text = 显示一个标题 }} 这是一段示例文本。这段文本将环绕显示。你可以在这里添加更多内容, 注意<nowiki>{{#widget:ProductCard}}</nowiki>必须放在第一行位置, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 你可以在这里添加更多内容, 接下是其它效果展示: {{#widget:ProductCard | boxid = demo2 | images = [ { title: "CM4核心板", src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", }, { title: "官方底板", src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", }, { title: "官方底板外", src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", }, ] }} {{#widget:ProductCard | boxid = demo3 | themeColor = #5c855c | images = [ { title: "CM4核心板", src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", }, ] | kvDatasTitle = 功能简介 | kvDatas = [ { key: "特性", value: "1200万像素", }, { key: "模组", value: "IMX708", }, { key: "视场角", value: "75°/120°", url: "", }, { key: "接口", value: "CSI", url: "http://www.lcdwiki.com", }, ] | liDataTitle = 相关产品 | liDatas = [ { name: "Raspberry Pi开发板", url: "http://www.lcdwiki.com", }, { name: "Pioneer600", url: "http://www.lcdwiki.com", }, ] }} {{#widget:ProductCard | boxid = demo4 | themeColor = #2c2c2c | images = [ { title: "CM4核心板", src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", url: "http://www.lcdwiki.com" }, { title: "官方底板", src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", }, ] | chipsTitle = 板载接口 | chips = [ { name: "DIS", url: "http://www.lcdwiki.com", }, { name: "CSI", url: "" }, { name: "HDMI", url: "" }, { name: "USB2.0", url: "" }, { name: "I2C", url: "" }, { name: "PECI", url: "http://www.lcdwiki.com", }, { name: "SPI", url: "http://www.lcdwiki.com", }, { name: "UART", url: "" }, ] }} </noinclude> <includeonly> <onlyinclude> <html> <div class="float-md-right"> <div id="<!--{$boxid|default:"product-card"}-->" class="v-application v-application--is-ltr theme--light" style="display: none; float: right; max-width: 365px" > <v-container :style="containsStyle"> <div id="product-card-imgs"> <v-tabs v-model="tab" grow center-active dark :background-color="themeColor" > <v-tab v-for="(tabName, index) in imageTabs" :key="index" >{{ tabName }}</v-tab > </v-tabs> <v-tabs-items v-model="tab"> <v-tab-item v-for="(img, index) in images" :key="index"> <a v-if="img.url" :href="img.url" target="_blank"> <v-img :src="img.src" :aspect-ratio="16/9" width="300"></v-img> </a> <v-img v-else :src="img.src" :aspect-ratio="16/9" width="300" ></v-img> </v-tab-item> </v-tabs-items> </div> <div id="product-card-chips" v-if="chips && chips.length > 0"> <span v-if="chipsTitle" :style="titleStyle">{{chipsTitle}}</span> <div class="d-flex flex-wrap justify-start"> <v-chip v-for="(chip, index) in chips" :key="index" class="ma-1" :color="themeColor" outlined small > <a v-if="chip.url" :href="chip.url" target="_blank" >{{chip.name}}</a > <span v-else>{{chip.name}}</span> </v-chip> </div> </div> <div id="product-card-kvData" v-if="kvDatas && kvDatas.length > 0"> <span v-if="kvDatasTitle" :style="titleStyle" >{{kvDatasTitle}}</span > <div v-for="(kvItem, index) in kvDatas" :key="index" class="d-flex justify-start" > <div :style="kvKeyStyle">{{kvItem.key}}</div> <div :style="kvValueStyle"> <a v-if="kvItem.url" :href="kvItem.url" target="_blank" >{{kvItem.value}}</a > <span v-else>{{kvItem.value}}</span> </div> </div> </div> <div id="product-card-liData" v-if="liDatas && liDatas.length > 0"> <span v-if="liDataTitle" :style="titleStyle">{{liDataTitle}}</span> <a style="display: block; padding: 2px; margin-left: 5px" v-for="(liItem, index) in liDatas" :key="index" :href="liItem.url" target="_blank" >{{liItem.name}}</a > </div> </v-container> </div> <script> if (typeof BoxPool == "undefined") { BoxPool = new Map(); } BoxPool["<!--{$boxid|default:"product-card"}-->"] = setInterval(() => { if (typeof Vuetify !== 'undefined' && typeof Vue !== 'undefined') { clearInterval(BoxPool["<!--{$boxid|default:"product-card"}-->"]); let appDom = document.getElementById("<!--{$boxid|default:"product-card"}-->"); if (window.innerWidth < 960){ appDom.style.float = "none"; appDom.style.width = "100%"; } appDom.style.display = "block"; window.addEventListener("resize", () => { let appDom = document.getElementById("<!--{$boxid|default:"product-card"}-->"); if (window.innerWidth < 960) { appDom.style.float = "none"; appDom.style.width = "100%"; } else { appDom.style.float = "right"; appDom.style.width = "365px"; } }); let app = new Vue({ el: "#<!--{$boxid|default:"product-card"}-->", vuetify: new Vuetify(), methods: {}, computed: { imageTabs() { return this.images.map((item) => item.title); }, containsStyle() { return `border: 1px solid ${this.themeColor};padding: 2px;`; }, titleStyle() { return `display: inline-block; width: 100%; text-align: center; color: white; background-color: ${this.themeColor};`; }, kvKeyStyle() { return `width: 50%; text-align: center; color: white; border: 1px solid ${ this.themeColor }; background-color: ${lightenColor(this.themeColor, 10)};`; }, kvValueStyle() { return `width: 50%; text-align: center; border: 1px solid ${ this.themeColor }; background-color: ${lightenColor(this.themeColor, 50)};`; }, }, data: { tab: null, themeColor: "<!--{$themeColor|default:"#36a5e8"}-->", images: <!--{$images}-->, chipsTitle: "<!--{$chipsTitle|default:""}-->", chips: <!--{$chips|default:"[]"}-->, kvDatasTitle: "<!--{$kvDatasTitle|default:""}-->", kvDatas:<!--{$kvDatas|default:"[]"}-->, liDataTitle:"<!--{$liDataTitle|default:""}-->", liDatas: <!--{$liDatas|default:"[]"}-->, }, }); } }, 100) </script> </div> </html> </onlyinclude> </includeonly>
该页面使用的模板:
Template:StyledHeader
(
查看源代码
)
Module:StyledHeader
(
查看源代码
)
返回
Widget:ProductCard
。