查看“模板:DTab”的源代码

<includeonly><div class="d-tab {{{class|}}} {{{cssClass|lineTabs}}}">{{#vardefine:active|0}}
<div class="d-tab-titles">{{#forargs:| k | v |{{#if:{{#var:v}}|{{#switch:{{#var:k}}
| class =<!-- 跳过有其他参数，只保留页签名字 -->
| cssClass=
| tabClass =<!-- 跳过有其他参数，只保留页签名字 -->
| paneClass =<!-- 跳过有其他参数，只保留页签名字 -->
| delimiter =<!-- 跳过有其他参数，只保留页签名字 -->
| #default = <span class="d-tab-title {{{tabClass|}}} {{#ifeq:{{#var:active}}|0|active{{#vardefine:active|1}}}}">{{#var:k}}</span>{{#if:{{{delimiter|}}}|<span class="d-tab-delimiter">{{{delimiter|}}}</span>}}
}}}}}}</div>
<div class="d-tab-contents tab-content">{{#vardefine:active|0}}{{#forargs:| k | v |{{#switch:{{#var:k}}
| class =<!-- 跳过有其他参数，只保留页签名字 -->
| cssClass =
| tabClass =<!-- 跳过有其他参数，只保留页签名字 -->
| paneClass =<!-- 跳过有其他参数，只保留页签名字 -->
| delimiter =<!-- 跳过有其他参数，只保留页签名字 -->
| #default = <div class="tab-content {{{paneClass|}}} {{#ifeq:{{#var:active}}|0|{{#vardefine:active|1}}active|hidden}}">
{{#var:v}}</div>
}}}}</div>
</div>{{#if:{{#varexists:DTabJS}}||{{#vardefine:DTabJS |1}}{{#widget:TabJS}}{{#css:.d-tab .hidden{display:none;} .d-tab-titles .d-tab-delimiter:last-child{display:none;} }}}}{{#switch:{{{cssClass|}}}
|#default={{#if:{{#varexists:DTablineTabs}} || {{#vardefine:DTablineTabs | 1 }}<bstyle>/*<pre>*/
.lineTabs>.d-tab-titles{/*按钮组*/
    display: flex;
    gap:3px;
    margin: 0px 0px 4px 0px!important;
    flex-wrap: wrap;
    padding: 0 0;
    border-bottom:1px solid #A4A1BE;
}
.lineTabs>.d-tab-titles>.d-tab-title {< !--按钮默认状态-->
    flex: 1;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    border-width:0;
    margin:0 0;
    padding:0 1em;
    text-align: center;
    font-size:16px;
    color:#464654;
}
.lineTabs>.d-tab-titles>.d-tab-title.active {/*按钮激活样式*/
    position:relative;
    border-bottom: 1px solid #464654;
    color:black;
}
.lineTabs>.d-tab-titles>.d-tab-title:hover{
    background:#6b6b6b30;
}
.lineTabs>.d-tab-contents {/*内容组*/
    padding: 4px 0;
}
.lineTabs>.d-tab-contents>.d-tab-content {/*单个内容*/
    margin-top: 5px;
}

@media (max-width: 800px) {/*手机css*/
    .lineTabs>.d-tab-titles>.d-tab-title {/*按钮宽度*/
        font-size:14px;
    }
}
/*</pre>*/</bstyle>
}}
|gameSameTabs={{#if:{{#varexists:DTabgameSameTabs}} || {{#vardefine:DTabgameSameTabs | 1 }}<bstyle>/*<pre>*/
.gameSameTabs > .d-tab-titles{/*按钮组*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: center;
    gap:8px;
    margin: 0px 0px 4px 0px!important;
    flex-wrap: wrap;
    padding: 0 0 8px 0;
}
.gameSameTabs > .d-tab-titles > .d-tab-title {< !--按钮默认状态-->
    flex: 1;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    margin:0 0;
    width: 80%;
    border-radius: 30px;
    border: 1px solid #b7b4b6;
    background: transparent;
    box-shadow: -3px 3px 3px #a2a9b124!important;
    padding: 6px 6px;
    text-align: center;
    min-height:36px;
}

.gameSameTabs>.d-tab-titles>.d-tab-title.active {/*按钮激活样式*/
    position:relative;
    color: #806564;
    border: 1px solid #ccada0;
    background: linear-gradient(to bottom, #f5e7d8, #ecdac9);
}
.gameSameTabs>.d-tab-titles>.d-tab-title.active:before{/*按钮激活时斜灰色线*/
    background-image: url(https://patchwiki.biligame.com/images/lysk/f/fb/n80ikq6e1u25ec3n23rcc3ljo5y7q91.png);
    content: "";
    width: 40%;
    max-width: 140px;
    height: 25px;
    position: absolute;
    top: -1px;
    left: -5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.gameSameTabs>.d-tab-titles>.d-tab-title:not(.active):hover{/*按钮悬停样式*/
    background:#6b6b6b30;
}
.gameSameTabs>.d-tab-contents {/*内容组*/
    padding: 4px 0;
}
.gameSameTabs>.d-tab-contents>.d-tab-content {/*单个内容*/
    margin-top: 5px;
}

@media (max-width: 800px) {/*手机css*/
    .gameSameTabs>.d-tab-titles>.d-tab-title {/*按钮宽度*/
        min-width: 80px;
    }
}
/*</pre>*/</bstyle>
}}
|gameSameMiniTabs={{#if:{{#varexists:DTabgameSameMiniTabs}} || {{#vardefine:DTabgameSameMiniTabs | 1 }}<bstyle>/*<pre>*/
.gameSameMiniTabs > .d-tab-titles{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-content: center;
    gap:2px;
    margin: 0px 0px 2px 0px!important;
    flex-wrap: wrap;
    padding: 0 0 8px 0;
}

.gameSameMiniTabs > .d-tab-titles > .d-tab-title {< !--按钮默认状态-->
    flex: 1;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-block;
    margin:0 0;
    width: 80%;
    border-radius: 30px;
    border: 1px solid #b7b4b6;
    background: transparent;
    box-shadow: -3px 3px 3px #a2a9b124!important;
    padding: 2px 2px;
    text-align: center;
}

.gameSameMiniTabs>.d-tab-titles>.d-tab-title.active {/*按钮激活样式*/
    position:relative;
    color: #806564;
    border: 1px solid #ccada0;
    background: linear-gradient(to bottom, #f5e7d8, #ecdac9);
}
.gameSameMiniTabs>.d-tab-titles>.d-tab-title.active:before{/*按钮激活时斜灰色线*/
    background-image: url(https://patchwiki.biligame.com/images/lysk/f/fb/n80ikq6e1u25ec3n23rcc3ljo5y7q91.png);
    content: "";
    width: 40%;
    max-width: 140px;
    height: 25px;
    position: absolute;
    top: -1px;
    left: -5px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.gameSameMiniTabs>.d-tab-titles>.d-tab-title:not(.active):hover{/*按钮悬停样式*/
    background:#6b6b6b30;
}
.gameSameMiniTabs>.d-tab-contents {/*内容组*/
    padding: 4px 0;
}
.gameSameMiniTabs>.d-tab-contents>.d-tab-content {/*单个内容*/
    margin-top: 5px;
}

@media (max-width: 800px) {/*手机css*/
    .gameSameMiniTabs>.d-tab-titles>.d-tab-title {/*按钮宽度*/
        min-width: 80px;
    }
}
/*</pre>*/</bstyle>
}}
|blackTabs={{#if:{{#varexists:DTabblackTabs}} || {{#vardefine:DTabblackTabs | 1 }}<bstyle>/*<pre>*/
.blackTabs>.d-tab-titles {
    background: #414858;
    display: flex;
    border-bottom: 2px solid #414858;
    color:white;
    padding: 0 5px;
}
.blackTabs>.d-tab-titles>.d-tab-title.active {
    color: #fff1c5;
    box-shadow: none;
    border-bottom:2px solid #fff1c5;
}
.blackTabs>.d-tab-titles>.d-tab-title {
    min-width: 25%;
    padding: 7px 0;
    font-size: 16px;
    border-radius: 0;
    text-align: center;
}
/*</pre>*/</bstyle>
}}
|blackTabBtn={{#if:{{#varexists:DTabblackTabBtn}} || {{#vardefine:DTabblackTabBtn | 1 }}<bstyle>/*<pre>*/
.blackTabBtn>.d-tab-titles {
    display: flex;
}
.blackTabBtn>.d-tab-titles>.d-tab-title.active {
    background-image: url(https://patchwiki.biligame.com/images/lysk/6/61/hu3wyzk73ail9hpe0j80gl5ycnbgp7j.png);
    background-size: 100% 100%;
    color: white;
    border-radius: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 2px solid #fae7da;
}
.blackTabBtn>.d-tab-titles>.d-tab-title {
    flex: 1;
    cursor: pointer;
    transition: background 0.3s ease;
    max-width: 144px;
    position: relative;
    padding: 5px;
    line-height: 20px;
    text-align:center;
}
/*</pre>*/</bstyle>
}}
|SwitchLeftSmall={{#if:{{#varexists:DTabSwitchLeftSmall}} || {{#vardefine:DTabSwitchLeftSmall | 1 }}<bstyle>/*<pre>*/
.SwitchLeftSmall .d-tab-titles{display:flex;}
.SwitchLeftSmall .d-tab-titles>.d-tab-title {<!--按钮默认状态-->
    width:auto;
    margin:2px;
    padding:0 10px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 2px;
    border: 1px solid #736e7759;
    background-color:#dddddd54;
    color: #736e77;
    font-size: 14px;
}
.SwitchLeftSmall .d-tab-titles>.d-tab-title:hover {<!--按钮鼠标悬停状态-->
    color:#666;
    font-weight:bold;
}
.SwitchLeftSmall .d-tab-titles>.d-tab-title.active {<!--按钮激活状态-->
    color:#666;
    background-color:#ffffff54;
    border: 1px solid #736e77;
    font-weight:bold;
}
/*</pre>*/</bstyle>
}}
}}
</includeonly><noinclude>{{文档}}
</noinclude>