More actions
No edit summary |
No edit summary |
||
| Line 184: | Line 184: | ||
center-active | center-active | ||
dark | dark | ||
hide-slider | |||
active-class="active-tab" | |||
:background-color="themeColor" | :background-color="themeColor" | ||
> | > | ||
<v-tab v-for="(tabName, index) in tabs" :key="index">{{ | <v-tab v-for="(tabName, index) in tabs" :key="index"> | ||
{{tabName}} | |||
</v-tab> | |||
</v-tabs> | </v-tabs> | ||
<v-tabs-items v-model="tab"> | <v-tabs-items v-model="tab"> | ||
| Line 294: | Line 296: | ||
font-size: 18px; /* 大屏幕及以上 */ | font-size: 18px; /* 大屏幕及以上 */ | ||
} | } | ||
} | |||
.active-tab { | |||
font-weight: bold; | |||
font-size: 18px; | |||
} | |||
.active-tab::after { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
background-color: rgba(255, 255, 255, 0.3); /* 透明白色 */ | |||
pointer-events: none; /* 让蒙版不影响鼠标事件 */ | |||
} | } | ||
</style> | </style> | ||
Revision as of 20:11, 27 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" },
],
]
}}
效果展示