Material Design 3 ve Web Components tabanlı yeni mdui 2 yayınlandı, mdui 2 dokümantasyonuna gidin.

Collapse

Collapse eklentisi, içerik bloklarını daraltmak veya genişletmek için kullanılır.

Eklentinin kendisi herhangi bir stil içermez, kendi stillerinizi yazmanız veya diğer bileşenlerle birlikte kullanmanız gerekir.

Kullanım

(Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır)
JavaScript ile Çağır

HTML Yapısı

İşte en temel HTML yapısı:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

.mdui-collapse-item-open sınıfı eklenerek içerik bloğunun varsayılan olarak genişletilmiş durumda olması sağlanabilir:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

.mdui-collapse-item-arrow sınıfını içeren öğeler, içerik bloğu genişlediğinde 180 derece dönecektir:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Kullanım

Öznitelik ile Çağır

Bu yöntemi kullanırken JavaScript kodu yazmanıza gerek yoktur. Eklentiyi etkinleştirmek için <div class="mdui-collapse"></div> öğesine mdui-collapse="options" özniteliğini eklemeniz yeterlidir.

Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağrılmalıdır.

Örnek

<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- İç içe geçmiş öğeler -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Olayları bağlamak için Collapse içindeki öğelere bazı öznitelikler eklenebilir. Bu öznitelikler JavaScript çağrı yöntemi kullanıldığında da kullanılabilir.

Öznitelik	Açıklama
`mdui-collapse-item-close`	Bu öğeye tıklamak `close.mdui.collapse` olayını tetikler ve öğenin bulunduğu paneli kapatır.

JavaScript ile Çağır

Eklentiyi başlatın:

// selector, öğenin CSS seçicisi veya DOM öğesidir
// options, eklentinin parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Collapse(selector, options);

demo

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`accordion`	`boolean`	`false`	Akordeon efektinin etkinleştirilip etkinleştirilmeyeceği. `true` olduğunda, aynı anda en fazla bir içerik bloğu açık olabilir; bir içerik bloğu açıldığında diğer içerik blokları kapatılır. `false` olduğunda, birden fazla içerik bloğu aynı anda açık olabilir.

Yöntem

Yöntem Adı	Açıklama
`open(item)`	İçerik bloğunu aç. `item`: İçerik bloğunun dizin numarası, DOM öğesi veya CSS seçicisi.
`close(item)`	İçerik bloğunu kapat. `item`: İçerik bloğunun dizin numarası, DOM öğesi veya CSS seçicisi.
`toggle(item)`	İçerik bloğunun durumunu değiştir. `item`: İçerik bloğunun dizin numarası, DOM öğesi veya CSS seçicisi.
`openAll()`	Tüm içerik bloklarını aç. Bu yöntem yalnızca `accordion` değeri `false` olduğunda geçerlidir.
`closeAll()`	Tüm içerik bloklarını kapat.

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.collapse`	İçerik bloğu açılma animasyonuna başladığında olay tetiklenir.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: Örnek
`opened.mdui.collapse`	İçerik bloğu açılma animasyonunu bitirdiğinde olay tetiklenir.
`close.mdui.collapse`	İçerik bloğu kapanma animasyonuna başladığında olay tetiklenir.
`closed.mdui.collapse`	İçerik bloğu kapanma animasyonunu bitirdiğinde olay tetiklenir.

Daha fazla örnek

Alt liste

Örnek

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>

İlerleme Çubuğu

Headroom