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.

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,399
İ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.