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

Collapse Paneli

Kullanım

Özel öznitelikler aracılığıyla çağırın (bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağırmanız gerekir)
JavaScript ile Çağır

İlgili Okumalar

Material Design yönergeleri: Bileşenler - Genişleme panelleri

Stil

Tam HTML yapısı

Bu örnek, dahil edilebilecek tüm HTML öğelerini içerir.

Örnek

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Minimum HTML yapısı

Yukarıdaki örnekteki bazı öğeler zorunlu değildir, aşağıdaki örnek yalnızca gerekli HTML öğelerini içerir.

Örnek

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Varsayılan olarak açık panel öğesi

<div class="mdui-panel-item"></div> öğesine .mdui-panel-item-open sınıfını ekleyerek panel öğesini varsayılan olarak açık duruma getirebilirsiniz.

Örnek

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Panel aralığını kaldır

<div class="mdui-panel"></div> öğesine .mdui-panel-gapless sınıfını ekleyerek açık panel ile diğer paneller arasındaki boşluk kaldırılabilir.

Örnek

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Popout panel

<div class="mdui-panel"></div> öğesine .mdui-panel-popout sınıfını ekleyerek açık panelin bir açılır efekte sahip olması sağlanabilir.

Örnek

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

İç içe paneller

Genişleme panelleri birbirinin içine yerleştirilebilir.

Örnek

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- İlk iç içe genişleme paneli -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- İkinci iç içe genişleme paneli -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Kullanım

Öznitelik ile Çağır

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

Bileşen dinamik olarak oluşturulmuşsa, başlatmak için mdui.mutation() çağırmanız gerekir.

Örnek

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Olayları bağlamak için genişleme paneli içindeki öğelere bazı öznitelikler eklenebilir; bu öznitelikler JavaScript çağrı yöntemi kullanılırken de kullanılabilir.

Öznitelik	Açıklama
`mdui-panel-item-close`	Bu öğeye tıklamak `close.mdui.panel` olayını tetikleyecek ve öğenin bulunduğu panel öğesini kapatacaktır.

JavaScript ile Çağır

Bileşeni örnekleme:

// selector, .mdui-panel öğesinin bir CSS seçicisi veya bir DOM öğesidir
// options, eklenti parametreleridir, aşağıdaki parametre listesine bakın
var inst = new mdui.Panel(selector, options);

Çalıştır

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 panel öğesi açık olabilir; bir panel öğesi açıldığında diğer panel öğeleri kapatılır. `false` olduğunda, aynı anda birden fazla panel öğesi açılabilir.

Yöntem

Yöntem Adı	Açıklama
`open(item)`	Bir panel öğesini açın. `item`: Panel öğesinin dizin numarası veya DOM öğesi veya CSS seçicisi.
`close(item)`	Bir panel öğesini kapatın. `item`: Panel öğesinin dizin numarası veya DOM öğesi veya CSS seçicisi.
`toggle(item)`	Bir panel öğesinin durumunu değiştirin. `item`: Panel öğesinin dizin numarası veya DOM öğesi veya CSS seçicisi.
`openAll()`	Tüm panel öğelerini açın. Bu yöntem yalnızca `accordion` değeri `false` olduğunda geçerlidir.
`closeAll()`	Tüm panel öğelerini kapatın.

Olay

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

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-panel`	Bir genişleme paneli tanımlayın.
`.mdui-panel-gapless`	Açık panel ile diğer paneller arasındaki boşluğu kaldırın.
`.mdui-panel-popout`	Açılan panelin dışa açılma efektine sahip olmasını sağlayın.
`.mdui-panel-item`	Bir genişleme panelinin öğesini tanımlayın.
`.mdui-panel-item-open`	Panel öğesinin varsayılan olarak açık olmasını sağlayın.
`.mdui-panel-item-header`	Bir panel öğesinin başlığını tanımlayın.
`.mdui-panel-item-title`	Panel öğesinin adını tanımlayın.
`.mdui-panel-item-summary`	Panel öğesinin özetini tanımlayın.
`.mdui-panel-item-arrow`	Bir panel öğesinin genişletme/daraltma simgesini tanımlayın.
`.mdui-panel-item-body`	Panel öğesinin içeriğini tanımlayın.
`.mdui-panel-item-actions`	Panel öğesinin işlem çubuğunu tanımlayın.

Ayırıcı

Metin Alanı