Neler yeni

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

  • Forumdan daha fazla yararlanmak için, profilinizi telefon numaranız 📱 ile doğrulayın ve daha ayrıcalıklı olun 😉
    Daha fazla bilgi!
Kaynak ikonu

XF 2.2 Eklenti XenForo Açılır Kapanır Kategoriler Yapma

Bu eklenti, add-ons XenForo 2.2.X ile uyumlu ve stabil olarak çalışmaktadır.
Uyumlu XF 2 Sürümleri
  1. 2.2.X
İçerik için Steve F. adlı kullanıcıya teşekkürler.

node_list_category şablonunu açın.

BUL:
Kod:
<xf:if is="{$node.description}"><span class="block-desc">{$node.description|raw}</span></xf:if>

SONUNA EKLE:
Kod:
</div>

BUL
Kod:
</h2>
VE ÜSTÜNE EKLE
Kod:
<span id="collapse-{$node.node_id}" class="collapseTrigger collapseTrigger--block {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}" data-xf-click="toggle" data-xf-init="toggle-storage" data-storage-type="cookie" data-target=".block--category{$node.node_id} .block-body" data-storage-key="_node-{$node.node_id}"></span>

BUL
Kod:
<div class="block-body">

BUNUNLA DEĞİŞTİR
Kod:
<div class="block-body block-body--collapsible {{ !is_toggled('_node-' . $node.node_id) ? ' is-active' : '' }}">

Extra.less şablonuna ekle:

Kod:
/* Node Collapse */

.block--category
{

    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        &.is-active:before

        {
            content: "f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }

        &:before

        {
            content: "f205";
            font-size: 80%;
        }
    }

    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}



.collapsible-nodes
{

        .block-header
        {
            display: flex;
        }

        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

Kategorilerinin bir animasyonla açılıp kapanmasını istiyorsanız aşağıda ki kodu extra.less şablonuna eklemeniz yeterli.

Kod:
.block-body.block-body--collapsible
{

    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    -webkit-transition-property: all, -xf-opacity;
    transition-property: all, -xf-opacity;
    overflow-y: hidden;
    height: 0;
    -webkit-transition-property: all, -xf-height;
    transition-property: all, -xf-height;
}
Yazar
Lim10Ata
Görüntüleme
1,885
İlk yayınlama
Son güncelleme
Değerlendirme
0.00 yıldız 0 değerlendirme

Lim10Ata ait diğer kaynakar

Foruma hoş geldin 👋, Ziyaretçi

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.