Layout레이아웃

레이아웃 컴포넌트는 복잡한 페이지 레이아웃을 생성하기 위한 유연한 레이아웃 시스템을 제공합니다.

사용법

컴포넌트 가져오기:

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

컴포넌트의 TypeScript 타입 가져오기:

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

소개:

레이아웃 시스템은 바깥쪽에서 안쪽으로 구축되는 원칙을 따릅니다. 각 레이아웃 컴포넌트(<mdui-layout-item> 컴포넌트)는 네 방향(위, 아래, 왼쪽, 오른쪽) 중 하나의 위치에 공간을 차지하며, 이후의 레이아웃 컴포넌트는 나머지 공간에서 계속해서 공간을 차지합니다.

다음 컴포넌트들은 <mdui-layout-item> 컴포넌트를 직접 상속받으므로 레이아웃 컴포넌트로도 사용합니다:

레이아웃 시스템의 마지막 부분은 <mdui-layout-main> 컴포넌트로, 나머지 공간을 차지하며, 이 컴포넌트 내부에 페이지 콘텐츠를 배치할 수 있습니다.

<mdui-top-app-bar>를 <mdui-navigation-drawer> 앞에 배치하면 <mdui-top-app-bar>가 먼저 화면 너비를 가득 채우고, <mdui-navigation-drawer>는 나머지 공간에서 높이를 가득 채웁니다. 둘의 순서를 바꾸면 <mdui-navigation-drawer>가 먼저 화면 높이를 가득 채우고, <mdui-top-app-bar>는 나머지 공간에서 너비를 가득 채웁니다.

레이아웃 컴포넌트 위치

<mdui-layout-item> 컴포넌트의 경우 placement 속성을 사용해 레이아웃 내에서의 위, 아래, 왼쪽, 오른쪽 위치를 지정할 수 있습니다. <mdui-navigation-drawer> 및 <mdui-navigation-rail> 컴포넌트의 경우에도 placement 속성을 사용해 레이아웃 내에서의 왼쪽, 오른쪽 위치를 지정할 수 있습니다.

아래 예시에서는 두 개의 <mdui-layout-item> 컴포넌트를 앱의 양쪽에 배치했습니다.

Top App Bar

Layout Item

Main

<mdui-layout>
  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</mdui-top-app-bar-title>
  </mdui-top-app-bar>

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

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

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

소스

레이아웃 컴포넌트 순서 사용자 정의

대부분의 경우 레이아웃 컴포넌트를 순서대로 배치하는 것만으로 원하는 레이아웃을 구현할 수 있습니다.

order 속성을 사용해 레이아웃 순서를 지정할 수도 있습니다. 시스템은 order 값이 작은 순서대로 컴포넌트를 정렬하며, order가 같을 경우 코드 순서대로 정렬합니다. 모든 레이아웃 컴포넌트의 기본 order는 0입니다.

Layout Item

Top App Bar

order="-1"

Main

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

  <mdui-top-app-bar class="example-top-app-bar">
    <mdui-top-app-bar-title>Top App Bar</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">Main</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>

소스

`mdui-layout-item` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`placement`	`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`
컴포넌트의 위치입니다. 사용 가능한 값: `top`: 위쪽 `bottom`: 아래쪽 `left`: 왼쪽 `right`: 오른쪽
`order`	`order`	`number`	-
`<mdui-layout>` 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 `0`입니다.

Slots

이름
기본
모든 콘텐츠를 포함할 수 있습니다.

`mdui-layout-main` API

Slots

이름
기본
모든 콘텐츠를 포함할 수 있습니다.

`mdui-layout` API

속성

HTML 속성	JavaScript 프로퍼티	Reflect	유형	기본값
`full-height`	`fullHeight`		`boolean`	`false`
현재 레이아웃의 높이를 100%로 설정합니다.

Slots

이름
기본
`<mdui-top-app-bar>`, `<mdui-bottom-app-bar>`, `<mdui-navigation-bar>`, `<mdui-navigation-drawer>`, `<mdui-navigation-rail>`, `<mdui-layout-item>`, `<mdui-layout-main>` 요소를 포함할 수 있습니다.

이전 장

Icon 아이콘

다음 장

LinearProgress 선형 프로그레스