欢迎侍主大人~本WIKI编辑权限开放,如有意向参与编辑和建设,请移步交流群:212446168。
编辑帮助:目录 • BWIKI反馈留言板 • 人才招募·
欢迎侍主大人~本WIKI编辑权限开放,如有意向参与编辑和建设,请移步交流群:212446168。
全站通知:
模板:切换标签面板/文档
刷
历
编
跳到导航
跳到搜索
使用方法
队伍编号要对应,一个页面只能存在一个相同的序号。
基本调用代码
{{切换标签面板|模板开始|主体样式= }} {{切换标签面板|开始组队|tab样式= }} {{切换标签面板|首队编号|编号= |编队名称= |标签样式= }} {{切换标签面板|结束组队}} {{切换标签面板|次队编号|编号= |编队名称= |标签样式= }} {{切换标签面板|结束组队}} {{切换标签面板|首队内容开始|编号= |内容样式= }} {{切换标签面板|推荐星痕|星痕名称= (多个成员间以符号#分隔)}} {{切换标签面板|队伍内容结束}} {{切换标签面板|次队内容开始|编号= |内容样式= }} {{切换标签面板|推荐星痕|星痕名称= (多个成员间以符号#分隔)}} {{切换标签面板|队伍内容结束}} {{切换标签面板|模板结束}}
切换标签面板在上方
{{切换标签面板|模板开始}} {{切换标签面板|开始组队}} {{切换标签面板|首队编号|编号=1|队伍名称=队伍1}} {{切换标签面板|次队编号|编号=2|队伍名称=队伍2}} {{切换标签面板|次队编号|编号=3|队伍名称=队伍3}} {{切换标签面板|结束组队}} {{切换标签面板|首队内容开始|编号=1}} {{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}} 队伍1需要显示的内容。 {{切换标签面板|队伍内容结束}} {{切换标签面板|次队内容开始|编号=2}} 队伍2需要显示的内容。 {{切换标签面板|队伍内容结束}} {{切换标签面板|次队内容开始|编号=3}} 队伍3需要显示的内容。 {{切换标签面板|队伍内容结束}} {{切换标签面板|模板结束}}
切换标签面板在上方并居中
{{切换标签面板|模板开始}} {{切换标签面板|开始组队|tab样式=display: flex; justify-content: center;}} {{切换标签面板|首队编号|编号=7|队伍名称=队伍1}} {{切换标签面板|次队编号|编号=8|队伍名称=队伍2}} {{切换标签面板|次队编号|编号=9|队伍名称=队伍3}} {{切换标签面板|结束组队}} {{切换标签面板|首队内容开始|编号=7}} {{切换标签面板|推荐星痕|星痕名称=昔莱#丹妮#桃}} 队伍1需要显示的内容。 {{切换标签面板|队伍内容结束}} {{切换标签面板|次队内容开始|编号=8}} 队伍2需要显示的内容。 {{切换标签面板|队伍内容结束}} {{切换标签面板|次队内容开始|编号=9}} 队伍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}} {{切换标签面板|结束组队}} {{切换标签面板|模板结束}}
标签在下方居中
{{切换标签面板|模板开始|主体样式=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}} {{切换标签面板|结束组队}} {{切换标签面板|模板结束}}
渐入渐出效果
使用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 */ } }}