更多操作
创建页面,内容为“<noinclude> == 参数说明 == * themeColor 主题颜色, 默认值: #36a5e8 * images 图片数据, 必填 ** title 名称, 必填 ** src 图片链接, 必填 * chipsTitle 标签数据标题, 选填 * chips 标签数据, 选填 ** name 名称, chips有值时必填 ** url 跳转链接, 选填 * kvDatasTitle K-V数据标题, 选填 * kvDatas K-V数据, 选填 ** key 名称, 必填 ** value 值, 必填 ** url 跳转链接, 选填 * liDataTitle 列表数据标题,…” |
无编辑摘要 |
||
(未显示同一用户的21个中间版本) | |||
第1行: | 第1行: | ||
<noinclude> | <noinclude> | ||
== 参数说明 == | == 参数说明 == | ||
* boxid 对象id, 默认值: product-card, 当需要在同一个页面上显示多个卡片时,需要保证boxid唯一 | |||
* themeColor 主题颜色, 默认值: #36a5e8 | * themeColor 主题颜色, 默认值: #36a5e8 | ||
* images 图片数据, 必填 | * images 图片数据, 必填 | ||
** title 名称, 必填 | ** title 名称, 必填 | ||
** src 图片链接, 必填 | ** src 图片链接, 必填 | ||
** url 点击事件时的跳转链接, 选填 | |||
* chipsTitle 标签数据标题, 选填 | * chipsTitle 标签数据标题, 选填 | ||
* chips 标签数据, 选填 | * chips 标签数据, 选填 | ||
** name 名称, chips有值时必填 | ** name 名称, chips有值时必填 | ||
** url 跳转链接, 选填 | ** url 点击事件时的跳转链接, 选填 | ||
* kvDatasTitle K-V数据标题, 选填 | * kvDatasTitle K-V数据标题, 选填 | ||
* kvDatas K-V数据, 选填 | * kvDatas K-V数据, 选填 | ||
** key 名称, 必填 | ** key 名称, 必填 | ||
** value 值, 必填 | ** value 值, 必填 | ||
** url 跳转链接, 选填 | ** url 点击事件时的跳转链接, 选填 | ||
* liDataTitle 列表数据标题, 选填 | * liDataTitle 列表数据标题, 选填 | ||
* liDatas 列表数据, 选填 | * liDatas 列表数据, 选填 | ||
** name 名称, 必填 | ** name 名称, 必填 | ||
** url 跳转链接, 必填 | ** url 点击事件时的跳转链接, 必填 | ||
== 用法 == | == 用法 == | ||
<pre><nowiki> | <pre><nowiki> | ||
{{#widget:ProductCard | {{#widget:ProductCard | ||
| themeColor = | | themeColor = #36a5e8 | ||
| images = [ | | images = [ | ||
{ | { | ||
title: "CM4核心板", | title: "CM4核心板", | ||
src: " | 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: "官方底板", | title: "官方底板", | ||
src: " | src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", | ||
}, | }, | ||
{ | { | ||
title: "官方底板外", | title: "官方底板外", | ||
src: " | src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", | ||
}, | }, | ||
] | ] | ||
| chipsTitle = | | chipsTitle = 板载接口 | ||
| chips = [ | | chips = [ | ||
{ | { | ||
name: "DIS", | name: "DIS", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
{ name: "CSI", url: "" }, | { name: "CSI", url: "" }, | ||
第48行: | 第91行: | ||
{ | { | ||
name: "PECI", | name: "PECI", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
{ | { | ||
name: "SPI", | name: "SPI", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
{ name: "UART", url: "" }, | { name: "UART", url: "" }, | ||
] | ] | ||
| kvDatasTitle = | | kvDatasTitle = 功能简介 | ||
| kvDatas = [ | | kvDatas = [ | ||
{ | { | ||
第74行: | 第117行: | ||
key: "接口", | key: "接口", | ||
value: "CSI", | value: "CSI", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
] | ] | ||
| liDataTitle = | | liDataTitle = 相关产品 | ||
| liDatas = [ | | liDatas = [ | ||
{ | { | ||
name: "Raspberry Pi开发板", | name: "Raspberry Pi开发板", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
{ | { | ||
name: "Pioneer600", | name: "Pioneer600", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
] | ] | ||
}} | }} | ||
< | {{StyledHeader | ||
| text = 显示一个标题 | |||
}} | |||
这是一段示例文本。这段文本将环绕显示。你可以在这里添加更多内容, 注意<nowiki>{{#widget:ProductCard}}</nowiki>必须放在第一行位置, | |||
你可以在这里添加更多内容, | |||
你可以在这里添加更多内容, | |||
你可以在这里添加更多内容, | |||
你可以在这里添加更多内容, | |||
接下是其它效果展示: | |||
{{#widget:ProductCard | {{#widget:ProductCard | ||
| | | boxid = demo2 | ||
| images = [ | | images = [ | ||
{ | { | ||
title: "CM4核心板", | title: "CM4核心板", | ||
src: " | src: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", | ||
}, | }, | ||
{ | { | ||
title: "官方底板", | title: "官方底板", | ||
src: " | src: "http://www.lcdwiki.com/images/thumb/2/28/MPI3508-20181115.jpg/300px-MPI3508-20181115.jpg", | ||
}, | }, | ||
{ | { | ||
title: "官方底板外", | title: "官方底板外", | ||
src: " | 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 = | | kvDatasTitle = 功能简介 | ||
| kvDatas = [ | | kvDatas = [ | ||
{ | { | ||
第145行: | 第185行: | ||
key: "接口", | key: "接口", | ||
value: "CSI", | value: "CSI", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
] | ] | ||
| liDataTitle = | | liDataTitle = 相关产品 | ||
| liDatas = [ | | liDatas = [ | ||
{ | { | ||
name: "Raspberry Pi开发板", | name: "Raspberry Pi开发板", | ||
url: " | url: "http://www.lcdwiki.com", | ||
}, | }, | ||
{ | { | ||
name: "Pioneer600", | name: "Pioneer600", | ||
url: " | 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: "" }, | |||
] | ] | ||
}} | }} | ||
第165行: | 第240行: | ||
<html> | <html> | ||
<div | <div | ||
id="<!--{$boxid|default:"product-card"}-->" | |||
class="v-application v-application--is-ltr theme--light" | |||
style="display: none; float: right; max-width: 365px" | |||
> | > | ||
<div | <v-container :style="containsStyle"> | ||
<div id="product-card-imgs"> | |||
< | <v-tabs | ||
<v- | v-model="tab" | ||
v- | show-arrows | ||
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> | |||
<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> | </div> | ||
</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"; | appDom.style.display = "block"; | ||
let | window.addEventListener("resize", () => { | ||
el: "#product-card", | 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"; | |||
} | |||
}); | |||
new Vue({ | |||
el: "#<!--{$boxid|default:"product-card"}-->", | |||
vuetify: new Vuetify(), | vuetify: new Vuetify(), | ||
methods: {}, | methods: {}, | ||
第294行: | 第374行: | ||
data: { | data: { | ||
tab: null, | tab: null, | ||
themeColor: <!--{$themeColor|default:"#36a5e8"}-->, | themeColor: "<!--{$themeColor|default:"#36a5e8"}-->", | ||
images: <!--{$images}-->, | images: <!--{$images}-->, | ||
chipsTitle: <!--{$chipsTitle|default:""}-->, | chipsTitle: "<!--{$chipsTitle|default:""}-->", | ||
chips: <!--{$chips|default:[]}-->, | chips: <!--{$chips|default:"[]"}-->, | ||
kvDatasTitle: <!--{$kvDatasTitle|default:""}-->, | kvDatasTitle: "<!--{$kvDatasTitle|default:""}-->", | ||
kvDatas:<!--{$kvDatas|default:[]}-->, | kvDatas:<!--{$kvDatas|default:"[]"}-->, | ||
liDataTitle:<!--{$liDataTitle|default:""}-->, | liDataTitle:"<!--{$liDataTitle|default:""}-->", | ||
liDatas: <!--{$liDatas|default:[]}-->, | liDatas: <!--{$liDatas|default:"[]"}-->, | ||
}, | }, | ||
}); | }); | ||
} | } | ||
</script> | }, 50) | ||
</script> | |||
</html> | </html> | ||
</onlyinclude> | </onlyinclude> | ||
</includeonly> | </includeonly> |
2024年7月27日 (六) 17:43的最新版本
参数说明
- 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}}必须放在第一行位置,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
你可以在这里添加更多内容,
接下是其它效果展示: