LayoutLayout

Layout bileşeni, karmaşık sayfa düzenleri oluşturmak için esnek bir düzen sistemi sağlar.

Kullanım Şekli

Bileşenleri ihtiyacınıza göre içe aktarın:

import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';

Bileşenlerin TypeScript türlerini ihtiyacınıza göre içe aktarın:

import type { Layout } from 'mdui/components/layout.js';
import type { LayoutItem } from 'mdui/components/layout-item.js';
import type { LayoutMain } from 'mdui/components/layout-main.js';

Giriş:

Düzen sistemi, dıştan içe doğru bir prensibi takip eder. Her düzen bileşeni (<mdui-layout-item> bileşeni), dört yönden (üst, alt, sol, sağ) birinde yer kaplar. Sonraki düzen bileşenleri, kalan alanda yer kaplamaya devam eder.

Aşağıdaki bileşenler doğrudan <mdui-layout-item> bileşeninden türetilmiştir ve bu nedenle düzen bileşenleri olarak da kullanılabilirler:

Düzen sisteminin son kısmı <mdui-layout-main> bileşenidir. Bu bileşen kalan alanı kaplar. Sayfa içeriğinizi bu bileşenin içine yerleştirebilirsiniz.

Örnekler

Düzen Bileşenlerinin Sırası

Varsayılan olarak, düzen bileşenleri koddaki görünme sıralarına göre yer kaplar. Bu kavramı aşağıdaki iki örnekle anlayabilirsiniz. Bu örneklerde <mdui-top-app-bar> ve <mdui-navigation-drawer> koddaki görünme sıraları farklıdır.

Lütfen bu örneği büyük ekranlı bir monitörde görüntüleyin.

Üst Uygulama Çubuğu

Ana Alan

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Üst Uygulama Çubuğu</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Gezinme çekmecesi</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Ana Alan</mdui-layout-main>
</mdui-layout>

Kaynak Kodu

Üst Uygulama Çubuğu

Ana Alan

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Gezinme çekmecesi</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Üst Uygulama Çubuğu</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Ana Alan</mdui-layout-main>
</mdui-layout>

Kaynak Kodu

Görüldüğü gibi, <mdui-top-app-bar> bileşenini <mdui-navigation-drawer> bileşeninden önce yerleştirmek, <mdui-top-app-bar> bileşeninin sayfanın tüm genişliğini kaplamasına, <mdui-navigation-drawer> bileşeninin ise yalnızca kalan alanda yüksekliği kaplamasına neden olur. İkisinin sırasını değiştirmek, <mdui-navigation-drawer> bileşeninin sayfanın tüm yüksekliğini kaplamasına, <mdui-top-app-bar> bileşeninin ise yalnızca kalan alanda genişliği kaplamasına neden olur.

Düzen Bileşenlerinin Konumu

<mdui-layout-item> bileşenleri için, düzendeki üst, alt, sol, sağ konumunu belirtmek üzere placement özniteliğini kullanabilirsiniz. <mdui-navigation-drawer> ve <mdui-navigation-rail> bileşenleri için de düzendeki sol, sağ konumunu belirtmek üzere placement özniteliğini kullanabilirsiniz.

Aşağıdaki örnekte, iki <mdui-layout-item> bileşenini uygulamanın iki tarafına yerleştiriyoruz.

Üst Uygulama Çubuğu

Layout Öğesi

Ana Alan

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Üst Uygulama Çubuğu</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Öğesi</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Layout Öğesi</mdui-layout-item>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Ana Alan</mdui-layout-main>
</mdui-layout>

Kaynak Kodu

Özel Düzen Bileşeni Sırası

Çoğu durumda, istediğiniz düzeni elde etmek için düzen bileşenlerini sırayla yerleştirmeniz yeterlidir.

Ayrıca, düzen sırasını belirtmek için order özniteliğini de kullanabilirsiniz. Sistem, bileşenleri order değerine göre küçükten büyüğe doğru sıralar; order değerleri aynıysa kod sırasına göre sıralar. Tüm düzen bileşenlerinin varsayılan order değeri 0'dır.

Layout Öğesi

Üst Uygulama Çubuğu

order="-1"

Ana Alan

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Layout Öğesi</mdui-layout-item>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Üst Uygulama Çubuğu</mdui-top-app-bar-title>
    <div style="flex-grow: 1"></div>
    <mdui-checkbox>order="-1"</mdui-checkbox>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Ana Alan</mdui-layout-main>
</mdui-layout>

<script>
  const topAppBar = document.querySelector(".example-order mdui-top-app-bar");
  const checkbox = document.querySelector(".example-order mdui-checkbox");

  checkbox.addEventListener("change", (event) => {
    topAppBar.order = event.target.checked ? -1 : 0;
  });
</script>

Kaynak Kodu

`mdui-layout-item` API

Özellikler

Öznitelik	Özellik	Tür	Varsayılan
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
Bileşenin konumu. Olası değerler: `top`: Üstte `bottom`: Altta `left`: Solda `right`: Sağda
`order`	`order`	`number`	-
Bu bileşenin `<mdui-layout>` içindeki yerleşim sırası. Küçükten büyüğe doğru sıralanır. Varsayılan değer `0`'dır.

Slots

Ad
Varsayılan
Herhangi bir içerik içerebilir.

`mdui-layout-main` API

Slots

Ad
Varsayılan
Herhangi bir içerik içerebilir.

`mdui-layout` API

Özellikler

Öznitelik	Özellik	Reflect	Tür	Varsayılan
`full-height`	`fullHeight`		`boolean`	`false`
Geçerli düzenin yüksekliğini %100 olarak ayarlar.

Slots

Ad
Varsayılan
`<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>` öğelerini içerebilir.

Önceki Bölüm

Icon Simge

Sonraki Bölüm

LinearProgress Doğrusal İlerleme