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

Menü

Tablolar sayfa yüklendikten sonra otomatik olarak başlatılacaktır. Dinamik olarak oluşturulan tablolar için başlatma işlemi için <a href="/tr/docs/1/global#mutation"><code>mdui.mutation()</code></a> çağrılması gerekir.

Kullanım

Öznitelik ile Çağır
JavaScript ile Çağır

İlgili Okumalar

Material Design tasarım yönergeleri: Bileşenler - Veri Tabloları

Stil

Temel tablo

Sütun hizalama

Sütun seçimi

Örnek

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Duyarlı (Responsive)

Örnek

<ul class="mdui-menu">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >remove_red_eye</i
      >Preview
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >file_download</i
      >Download
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons">delete</i
      >Remove
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>Empty
    </a>
  </li>
</ul>

Fare ile üzerine gelme

Dinamik olarak oluşturulan tablolar

table etiketine .mdui-table sınıfını ekleyerek tabloya temel stilini verebilirsiniz.

Tablo genişliği çok fazlaysa, sayfada yatay kaydırma çubukları görünebilir. .mdui-table öğesini .mdui-table-fluid öğesi içine sararak, tablo genişliği sayfa genişliğini aştığında tablonun yatayda kaydırılabilmesini sağlayabilirsiniz.

.mdui-table öğesine .mdui-table-hoverable sınıfını ekleyerek tbody içindeki her satırın fareyle üzerine gelindiğinde yanıt vermesini sağlayabilirsiniz.

Örnek

<ul class="mdui-menu mdui-menu-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
    </ul>
  </li>
</ul>

Kullanım

Öznitelik ile Çağır

Material Design yönergelerine göre, tablodaki metin sütunları sola hizalanmalı, sayısal sütunlar sağa hizalanmalıdır.

mdui tablolarında sütunlar varsayılan olarak sola hizalanır. Sayısal sütunların <th> etiketine .mdui-table-col-numeric sınıfını ekleyerek o sütunu sağa hizalayabilirsiniz.

Örnek

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#example-attr'}"
>
  open
</button>

<ul class="mdui-menu" id="example-attr">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Refresh</a>
  </li>
  <li class="mdui-menu-item" disabled>
    <a href="javascript:;">Help & feedback</a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Settings</a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">Sign out</a>
  </li>
</ul>

Örnek

<button
  class="mdui-btn mdui-color-theme-accent"
  mdui-menu="{target: '#demo-attr-cascade'}"
>
  cascade menu
</button>

<ul class="mdui-menu mdui-menu-cascade" id="demo-attr-cascade">
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_bold</i
      >
      Bold
      <span class="mdui-menu-item-helper">Ctrl+B</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon mdui-icon material-icons"
        >format_italic</i
      >
      Italic
      <span class="mdui-menu-item-helper">Ctrl+I</span>
    </a>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      <i class="mdui-menu-item-icon"></i>
      Superscript
      <span class="mdui-menu-item-helper">Ctrl+.</span>
    </a>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Paragraph style
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >Custom: 1.2
        </a>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space before paragraph</a
        >
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple"
          >Add space after paragraph</a
        >
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">Custom spacing...</a>
      </li>
    </ul>
  </li>
  <li class="mdui-menu-item">
    <a href="javascript:;" class="mdui-ripple">
      Line spacing
      <span class="mdui-menu-item-more"></span>
    </a>
    <ul class="mdui-menu mdui-menu-cascade">
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Single
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          1.15
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>
          Double
        </a>
      </li>
      <li class="mdui-menu-item">
        <a href="javascript:;" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons"
            >check</i
          >
          Custom: 1.2
          <span class="mdui-menu-item-more"></span>
        </a>
        <ul class="mdui-menu mdui-menu-cascade">
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Line spacing
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing before
              <span class="mdui-menu-item-helper">1.2</span>
            </a>
          </li>
          <li class="mdui-menu-item">
            <a href="javascript:;" class="mdui-ripple">
              Paragraph spacing after
              <span class="mdui-menu-item-helper">1.5</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

JavaScript ile Çağır

<code>.mdui-table</code> öğesine <code>.mdui-table-selectable</code> sınıfını ekleyerek her satırın başına bir onay kutusu (checkbox) ekleyebilirsiniz.

// Onay kutusu seçildikten sonra, ilgili satırın <code>&lt;tr&gt;</code> öğesine <code>.mdui-table-row-selected</code> sınıfı eklenecektir.
// İlgili satırın varsayılan olarak seçili gelmesi için <code>&lt;tr&gt;</code> öğesine önceden <code>.mdui-table-row-selected</code> sınıfını ekleyebilirsiniz.
// Tablonuz dinamik olarak oluşturulmuşsa, başlatma işlemi için <a href="/tr/docs/1/global#mutation"><code>mdui.mutation()</code></a> çağrılması gerekir.
var inst = new mdui.Menu(anchorSelector, menuSelector, options);

Çalıştır

Parametre

Parametre Adı	Tür	Varsayılan	Açıklama
`position`	`string`	`auto`	Tablo özniteliklerini dinamik olarak değiştirdiyseniz, tabloları yeniden başlatmak için <code>mdui.updateTables()</code> yöntemini çağırmanız gerekir. Bu yöntem parametre olarak bir CSS seçicisi (<code><table class="mdui-table"></code> öğesini seçmek için), bir DOM öğesi veya bir DOM öğesi dizisi kabul edebilir; bu, yalnızca belirtilen tabloların yeniden başlatılacağı anlamına gelir. Eğer parametre girilmezse, sayfadaki tüm tablolar yeniden başlatılır. Tablo bileşenini tanımlar. Duyarlı tabloyu tanımlar. Tablo satırlarının fareyle üzerine gelindiğinde yanıt vermesini sağlar. Sütunları sağa hizalar.
`align`	`string`	`auto`	Her satırın başına onay kutusu ekler. Seçili satırlar bu sınıfa sahip olacaktır. Açılır menü kapanma animasyonunu bitirdiğinde olay tetiklenir. Bir Select bileşeni tanımlayın.
`gutter`	`int`	`16`
`fixed`	`boolean`	`false`
`covered`	`boolean`	`auto`
`subMenuTrigger`	`string`	`hover`
`subMenuDelay`	`int`	`200`

Yöntem

Yöntem Adı	Açıklama
`open()`
`close()`
`toggle()`

Olay

Olay Adı	Açıklama	Hedef	Parametreler
`open.mdui.menu`		`<ul class="mdui-menu"></ul>`
`opened.mdui.menu`
`close.mdui.menu`
`closed.mdui.menu`

CSS Sınıf Listesi

Sınıf Adı	Açıklama
`.mdui-menu`
`.mdui-menu-cascade`
`.mdui-menu-item`
`.mdui-menu-item-icon`
`.mdui-menu-item-helper`
`.mdui-menu-item-more`

Diyalog

İlerleme Çubuğu