Fandom Developers Wiki
Advertisement

Sekmeci, aynı anda yalnızca bir sekme görüntülendiğinde ve farklı sekmeler arasında gezinmek için sekme etiketleri kullanıldığında, içeriği sekmelere ayırmanın bir yoludur.

Sekmeciler, aşağıdaki temel söz dizimi kullanılarak oluşturulabilir:

<tabber>
Etiket 1 = 
Sekme 1 içeriği
|-|
Etiket 2 = 
Sekme 2 içeriği
|-|
Etiket 3 = 
Sekme 3 içeriği
</tabber>

Bu sayfadaki kod pasajları, bir vikinin sekmelerinin görünümünü özelleştirmesine olanak tanır. Bir vikide kullanılan herhangi bir CSS sayfasına (tipik olarak MediaWiki:Common.css) veya hatta istenirse kişisel CSS'ye eklenebilir.

Not: Sekmeleri olan bilgi kutularını sekmelerin içine yerleştirmek bu sayfada verilen kodla uyumlu değildir ve bilgi kutusu sekmelerine garip bir görünüm verebilir. Bu etkiden kaçınmak için kodu daha hassas seçiciler kullanacak şekilde ayarlamak mümkündür, ancak kod önemli ölçüde daha uzun olacaktır.

Tam özel temaları[]

Tema 1 - Yarı Sekmeli Tasarım[]

Kod
.tabber .wds-tabs__wrapper .wds-tabs {
    padding: 3px 0 0;
}

.tabber .wds-tabs > .wds-tabs__tab {
    box-shadow: none;
}

.tabber .wds-tabs > .wds-tabs__tab:not(:last-child) {
    margin-right: 2px;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
    line-height: 1.2;
}

.tabber .wds-tabs__tab a {
    background: #014604;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 2px solid black;
    color: white !important;
    font-size: 16px;
    font-weight: normal;
    padding: 3px 0.5em;
}

.tabber .wds-tabs__tab.wds-is-current a {
    cursor: default;
    font-weight: bold;
}

.tabber .wds-tab__content {
    border: 2px solid grey;
}

Tabber Customized

Tema 2 - macOS Sekmeci Stili[]

Kod
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background-color: transparent;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 -10px 0;
    padding: 3px 0;
    text-align: center;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    background-color: #ffffff;
    border: none;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    color: #444444 !important;
    cursor: default;
    font-family: Helvetica, Sans-serif;
    font-size: 13px;
    font-weight: 300;
    margin: 0;
    padding:2px 12px;
}

.tabber .wds-tabs__tab:first-child a {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.tabber .wds-tabs__tab:last-child a {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.tabber .wds-tabs__tab a:active {
    background-color: #f0f0f0 !important;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: linear-gradient(#6FB3F4, #2687F7);
    color: white !important;
}

.tabber .wds-tabs__tab.wds-is-current a:active {
    background-color: linear-gradient(#5198F6, #1D6EDD);
}

.tabber .wds-tab__content {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 10px 10px 5px 10px;
}

Theme 2 - OS X Yosemite Tabber Style result

Tema 3 - "Küçültülmüş" Stil[]

Kod
.tabber .wds-tabs__wrapper {
    border-bottom: 0;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    border-bottom: 3px solid #2aa198;
    font-size: 13px;
    padding: 0.3em 0 0;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    color: #3a3a3a !important;
    font-weight: normal;
    font-size: 13px;
    padding: 0.3em 0.5em;
}

.tabber .wds-tabs__tab.wds-is-current {
    box-shadow: none;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #2aa198;
    color: white !important;
}

.tabber .wds-tabs__tab:not(.wds-is-current) a:hover {
    background-color: rgba(42,161,152, 0.2);
}

Theme 3 Minified style result

Tema 4 - Esnek Kutu[]

Kod
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 4px;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    justify-content: space-between;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    flex-shrink: 1;
    text-align: center;
    transition-duration: 0.15s;
    width: 100%;
}

.tabber .wds-tabs__tab a {
    color: #999 !important;
    cursor: default;
    font-size: 15px;
    font-weight: normal;
    padding: 10px 0;
    transition-duration: 0.15s;
}

.tabber .wds-tabs__tab.wds-is-current, .tabber .wds-tabs__tab:hover {
    background-color: #eee;
}

.tabber .wds-tabs__tab.wds-is-current a, .tabber .wds-tabs__tab:hover a {
    color: black !important;
}

Theme 4 style result.png

Tema 5 - Dikey[]

Kod
.tabber {
    display: table;
    margin-top: 0.5em;
    width: 100%;
}

.tabber .wds-tabs__wrapper {
    border: none;
    display: table-cell;
    width: 200px;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    align-items: flex-start;
    flex-direction: column;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    font-size: 14px;
    padding-top: 1em;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0;
}

.tabber .wds-tabs a {
    color: black !important;
    display: block;
    padding: 10px;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #2aa198;
    border-radius: 3px;
    color: white !important;
}

.tabber .wds-tab__content.wds-is-current {
    display: table-cell;
    padding: 0em 1em;
}

Theme 5 style

Tema 6 - Oasis stili[]

Kod
.tabber .wds-tabs__wrapper {
    border: none;
}

.tabber .wds-tabs__wrapper .wds-tabs {
    border-bottom: 1px solid #ccc;
    display: block;
    font: bold 12px Verdana, sans-serif;
    padding: 3px 0;
}

.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
    display: inline-block;
    font: inherit;
    list-style: none;
    padding-top: 1em;
}

.tabber .wds-tabs .wds-tabs__tab-label {
    display: inline-block;
    font: inherit;
    height: auto;
    margin: 0;
}

.tabber .wds-tabs__tab a {
    background-color: #f2f7ff;
    border: 1px solid #ccc;
    border-bottom: none;
    display: inline;
    font: inherit;
    margin-left: 3px;
    padding: 3px 0.5em;
    text-decoration: none;
    white-space: pre;
}

.tabber .wds-tabs__tab.wds-is-current a {
    background-color: #fff;
}

.tabber .wds-tabs__tab a:link, .tabber .wds-tabs__tab a:visited {
    color: #448;
}

.tabber .wds-tabs__tab a:hover {
    background-color: #fff9f2;
    border-color: #ccc;
    color: #000;
    text-decoration: underline;
}

.tabber .wds-tabs__tab.wds-is-current a:hover {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}

.tabber .wds-tab__content {
    border: 1px solid #ccc;
    border-top: 0;
    padding: 5px;
}

Bireysel yönleri özelleştirme[]

Çok Satırlı Sekmeci - fazladan etiketler yatay kaydırma yerine yeni bir satıra gider[]

Kod
.tabber .wds-tabs {
    flex-wrap: wrap;
}

Etkin sekme etiketinin altındaki alt çizgiyi kaldırma[]

Kod
.tabber .wds-tabs .wds-tabs__tab {
    box-shadow: none;
}

Eski tasarıma benzer şekilde azaltılmış etiket boyutu ve aralığı[]

Kod
.tabber .wds-tabs .wds-tabs__tab-label {
    height: auto;
    margin: 0 1.5px;
}

.tabber .wds-tabs .wds-tabs__tab a {
    font-size: 12px;
    padding: 3px 0.5em;
}

Bilinen sorunlar[]

Sorun bulursanız lütfen bunları ilgili tartışma sayfasında bildirin.

Advertisement