Widget:Home: Difference between revisions

Revision as of 22:28, 29 July 2024

参数说明

boxid 对象id, 默认值: home-tab, 当需要在同一个页面上显示多个组件时,需要保证boxid唯一
themeColor 主题颜色, 默认值: #36a5e8
tabs 分栏名称列表
tabContents 分栏内容列表
- title 要跳转的文档名称
- subtitle: 子标题,
- coverimg 封面图片, 默认显示, 失去鼠标焦点时显示
- backimg 背面图片, 获取到鼠标焦点时显示

用法

{{#widget:Home
| tabs = ["HDMI显示屏", "MHS-series显示屏", "GPIO显示屏"]
| tabContents = [
    [
      { 
        title: "3.5寸HDMI显示屏", 
        subtitle: "子标题", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
    [
      { 
        title: "3.5寸HDMI显示屏", 
        subtitle: "子标题", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
    [
      { 
        title: "3.5寸HDMI显示屏", 
        subtitle: "子标题", 
        coverimg: "http://www.lcdwiki.com/images/thumb/0/09/Main_MPI3508.jpg/200px-Main_MPI3508.jpg", 
        backimg: "http://www.lcdwiki.com/zh/images/thumb/2/21/MPI3508-01.jpg/300px-MPI3508-01.jpg" },    
    ],
  ]
}}

@@ Line 201: / Line 201: @@
                  <v-card class="ma-1 ma-md-2 ma-lg-3 ma-xl-3" elevation=1>
                    <v-img
+                    contain
+                    style="background-color: white;"
                      :src="getImageUrl(item)"
-                     class="grey darken-4"
+                     :aspect-ratio="1/1"
                      @mouseover="setHoveredItem(item)"
                      @mouseout="resetHoveredItem()"

Revision as of 22:28, 29 July 2024

参数说明

用法

效果展示