LayoutElrendezés

Az elrendezés komponens egy rugalmas elrendezési rendszert biztosít összetett oldalelrendezések létrehozásához.

Használat

A komponensek importálása:

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

A komponensek TypeScript-típusainak importálása:

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';

Bevezetés:

Az elrendezési rendszer a kívülről befelé haladó elvet követi. Minden elrendezés-komponens (a <mdui-layout-item> komponens) a négy irány (felső, alsó, bal, jobb) egyikében foglal helyet, a következő elrendezés-komponens a megmaradt helyen folytatja a helyfoglalást.

A következő komponensek közvetlenül a <mdui-layout-item> komponensből származnak, így szintén használhatók elrendezés-komponensként:

Az elrendezési rendszer utolsó része a <mdui-layout-main> komponens, amely a fennmaradó helyet foglalja el; ezen a komponensen belül helyezheti el az oldal tartalmát.

Példák

Elrendezés-komponensek sorrendje

Alapértelmezés szerint az elrendezés-komponensek a kódban való megjelenésük sorrendjében foglalják el a helyet. Ezt a koncepciót az alábbi két példán keresztül értheti meg. A két példában a <mdui-top-app-bar> és a <mdui-navigation-drawer> sorrendje eltérő a kódban.

Kérjük, nagy képernyős monitoron tekintse meg ezt a példát.

Felső alkalmazássáv

Főtartalom

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Felső alkalmazássáv</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigációs fiók</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Főtartalom</mdui-layout-main>
</mdui-layout>

Forrás

Felső alkalmazássáv

Főtartalom

<mdui-layout>
  <mdui-navigation-drawer open class="example-navigation-drawer">
    <mdui-list>
      <mdui-list-item>Navigációs fiók</mdui-list-item>
    </mdui-list>
  </mdui-navigation-drawer>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Felső alkalmazássáv</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Főtartalom</mdui-layout-main>
</mdui-layout>

Forrás

Látható, hogy ha a <mdui-top-app-bar> a <mdui-navigation-drawer> előtt van, a <mdui-top-app-bar> először az oldal teljes szélességét foglalja el, míg a <mdui-navigation-drawer> csak a fennmaradó helyen foglalja el a teljes magasságot. A sorrend felcserélése után a <mdui-navigation-drawer> először az oldal teljes magasságát foglalja el, míg a <mdui-top-app-bar> csak a fennmaradó helyen foglalja el a teljes szélességet.

Elrendezés-komponensek pozíciója

A <mdui-layout-item> komponensek esetében a placement attribútummal megadhatja azok felső, alsó, bal vagy jobb oldali pozícióját az elrendezésben. A <mdui-navigation-drawer> és a <mdui-navigation-rail> komponensek esetében is használhatja a placement attribútumot a bal vagy jobb oldali pozíció megadásához.

Az alábbi példában két <mdui-layout-item> komponenst helyeztünk el az alkalmazás két oldalán.

Felső alkalmazássáv

Elrendezés-elem

Főtartalom

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Felső alkalmazássáv</mdui-top-app-bar-title>
  </mdui-top-app-bar>

  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Elrendezés-elem</mdui-layout-item>

  <mdui-layout-item
    placement="right"
    class="example-layout-item"
    style="width: 100px"
  >Elrendezés-elem</mdui-layout-item>

  <mdui-layout-main class="example-layout-main" style="min-height: 300px">Főtartalom</mdui-layout-main>
</mdui-layout>

Forrás

Egyéni elrendezés-komponensek sorrendje

A legtöbb esetben az elrendezés-komponensek megfelelő sorrendben történő elhelyezésével elérheti a kívánt elrendezést.

Használhatja az order attribútumot is az elrendezési sorrend megadásához. A rendszer az order értéke szerint növekvő sorrendbe rendezi a komponenseket, azonos order esetén pedig a kód szerinti sorrendben. Az összes elrendezés-komponens alapértelmezett order értéke 0.

Elrendezés-elem

Felső alkalmazássáv

order="-1"

Főtartalom

<mdui-layout class="example-order">
  <mdui-layout-item
    placement="left"
    class="example-layout-item"
    style="width: 100px"
  >Elrendezés-elem</mdui-layout-item>

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Felső alkalmazássáv</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">Főtartalom</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>

Forrás

`mdui-layout-item` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
A komponens pozíciója. Lehetséges értékek: `top`: Fent `bottom`: Lent `left`: Balra `right`: Jobbra
`order`	`order`	`number`	-
A komponens sorrendje a `<mdui-layout>` elemen belül, növekvő sorrendben. Alapértelmezett érték: `0`.

Slots

Név
(alapértelmezett)
Bármilyen tartalmat tartalmazhat.

`mdui-layout-main` API

Slots

Név
(alapértelmezett)
Bármilyen tartalmat tartalmazhat.

`mdui-layout` API

Tulajdonságok

Attribútum	Tulajdonság	Reflect	Típus	Alapértelmezett
`full-height`	`fullHeight`		`boolean`	`false`
Az aktuális elrendezés magasságának beállítása 100%-ra.

Slots

Név
(alapértelmezett)
Tartalmazhat `<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>` elemeket.

Előző fejezet

Icon Ikon

Következő fejezet

LinearProgress Lineáris folyamatjelző