欢迎侍主大人~本WIKI编辑权限开放,如有意向参与编辑和建设,请移步交流群:212446168。

全站通知:

模板:切换标签面板/文档

来自千年之旅WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索

使用方法

队伍编号要对应,一个页面只能存在一个相同的序号。

基本调用代码

{{切换标签面板|模板开始|主体样式= }}
{{切换标签面板|开始组队|tab样式= }}
{{切换标签面板|首队编号|编号= |编队名称= |标签样式= }}
{{切换标签面板|结束组队}}
{{切换标签面板|次队编号|编号= |编队名称= |标签样式= }}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号= |内容样式= }}
{{切换标签面板|推荐星痕|星痕名称= (多个成员间以符号#分隔)}}
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号= |内容样式= }}
{{切换标签面板|推荐星痕|星痕名称= (多个成员间以符号#分隔)}}
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}

切换标签面板在上方

{{切换标签面板|模板开始}}
{{切换标签面板|开始组队}}
{{切换标签面板|首队编号|编号=1|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=2|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=3|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号=1}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=2}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=3}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}
推荐星痕

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在上方并居中

{{切换标签面板|模板开始}}
{{切换标签面板|开始组队|tab样式=display: flex; justify-content: center;}}
{{切换标签面板|首队编号|编号=7|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=8|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=9|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|首队内容开始|编号=7}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=8}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=9}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|模板结束}}
推荐星痕

队伍1需要显示的内容。

队伍2需要显示的内容。

队伍3需要显示的内容。

切换标签面板在下方

{{切换标签面板|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{切换标签面板|首队内容开始|编号=4}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=5}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=6}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|开始组队|tab样式=position: absolute; bottom: 0;left: 0;}}
{{切换标签面板|首队编号|编号=4|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=5|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=6|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|模板结束}}
推荐星痕

队伍1需要显示的内容。桃立绘.png

队伍2需要显示的内容。

队伍3需要显示的内容。

标签在下方居中

{{切换标签面板|模板开始|主体样式=position: relative; height: 650px; overflow: hidden;}}
{{切换标签面板|首队内容开始|编号=10}}
{{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}}
队伍1需要显示的内容。[[文件:桃立绘.png]]
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=11}}
队伍2需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|次队内容开始|编号=12}}
队伍3需要显示的内容。
{{切换标签面板|队伍内容结束}}
{{切换标签面板|开始组队|tab样式=position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}}
{{切换标签面板|首队编号|编号=10|队伍名称=队伍1}}
{{切换标签面板|次队编号|编号=11|队伍名称=队伍2}}
{{切换标签面板|次队编号|编号=12|队伍名称=队伍3}}
{{切换标签面板|结束组队}}
{{切换标签面板|模板结束}}
推荐星痕

队伍1需要显示的内容。桃立绘.png

队伍2需要显示的内容。

队伍3需要显示的内容。

渐入渐出效果

使用CSS添加渐入渐出效果,一个页面仅需设置一次即可:

{{#CSS:
.tab-pane {  
    opacity: 0; /* 默认透明度为0 */  
    transition: opacity 1s ease-in-out; /* 添加过渡效果 */  
}  
  
.tab-pane.active {  
    opacity: 1; /* 活动状态时透明度为1 */  
    animation: fadeIn 1s ease-in-out; /* 添加关键帧动画 */  
}  
  
@keyframes fadeIn { /* 定义关键帧动画 */  
    0% { opacity: 0; } /* 从透明度0开始 */  
    100% { opacity: 1; } /* 变为透明度1 */  
}
}}