TabberDesign/tr — dev

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;
}

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;
}

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);
}

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;
}

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;
}

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.