Tabs탭

탭 컴포넌트는 콘텐츠나 데이터 세트를 그룹화하여 표시하는 데 사용되며, 사용자가 다양한 범주 간에 빠르게 전환할 수 있도록 합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/tabs.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';

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

import type { Tabs } from 'mdui/components/tabs.js';
import type { Tab } from 'mdui/components/tab.js';
import type { TabPanel } from 'mdui/components/tab-panel.js';

사용 예시:

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

예시

탭 스타일

<mdui-tabs> 컴포넌트에 variant 속성을 사용해 탭의 스타일을 설정할 수 있습니다.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" variant="primary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

<mdui-tabs value="tab-1" variant="secondary">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

소스

탭 위치

<mdui-tabs> 컴포넌트에 placement 속성을 사용해 탭의 위치를 설정할 수 있습니다.

top-start

top

top-end

bottom-start

bottom

bottom-end

left-start

left

left-end

right-start

right

right-end

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-select class="example-change-placement" placeholder="placement 값 선택" style="width: 180px">
  <mdui-menu-item value="top-start">top-start</mdui-menu-item>
  <mdui-menu-item value="top">top</mdui-menu-item>
  <mdui-menu-item value="top-end">top-end</mdui-menu-item>
  <mdui-menu-item value="bottom-start">bottom-start</mdui-menu-item>
  <mdui-menu-item value="bottom">bottom</mdui-menu-item>
  <mdui-menu-item value="bottom-end">bottom-end</mdui-menu-item>
  <mdui-menu-item value="left-start">left-start</mdui-menu-item>
  <mdui-menu-item value="left">left</mdui-menu-item>
  <mdui-menu-item value="left-end">left-end</mdui-menu-item>
  <mdui-menu-item value="right-start">right-start</mdui-menu-item>
  <mdui-menu-item value="right">right</mdui-menu-item>
  <mdui-menu-item value="right-end">right-end</mdui-menu-item>
</mdui-select>

<mdui-tabs value="tab-1" placement="top-start" class="example-placement">
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1" style="height: 260px">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2" style="height: 260px">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3" style="height: 260px">Panel 3</mdui-tab-panel>
</mdui-tabs>

<script>
  const select = document.querySelector(".example-change-placement");
  const tabs = document.querySelector(".example-placement");

  select.addEventListener("change", (event) => {
    tabs.placement = event.target.value;
  });
</script>

소스

전체 너비 표시

<mdui-tabs> 컴포넌트에 full-width 속성을 추가하면 탭이 전체 너비를 차지하며, 각 탭은 너비를 균등하게 분배합니다.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1" full-width>
  <mdui-tab value="tab-1">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

소스

아이콘

<mdui-tab> 컴포넌트에 icon 속성을 설정하면 탭에 Material Icons 아이콘을 추가할 수 있습니다. icon 슬롯을 통해 아이콘 요소를 추가할 수도 있습니다.

inline 속성을 추가하면 아이콘과 텍스트를 수평으로 정렬할 수 있습니다.

Tab 1

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1" icon="library_music">Tab 1</mdui-tab>
  <mdui-tab value="tab-2">
    Tab 2
    <mdui-icon slot="icon" name="movie"></mdui-icon>
  </mdui-tab>
  <mdui-tab value="tab-3" icon="menu_book" inline>Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

소스

배지

<mdui-tab> 컴포넌트에서 badge 슬롯을 통해 배지를 추가할 수 있습니다.

Tab 1 99+

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-badge slot="badge">99+</mdui-badge>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

소스

사용자 정의 내용

<mdui-tab> 컴포넌트에서 custom 슬롯을 사용하면 탭의 내용을 완전히 사용자 정의할 수 있습니다.

Tab 1 Icon

Tab 2

Tab 3

Panel 1

Panel 2

Panel 3

<mdui-tabs value="tab-1">
  <mdui-tab value="tab-1">
    Tab 1
    <mdui-chip slot="custom" icon="search">Icon</mdui-chip>
  </mdui-tab>
  <mdui-tab value="tab-2">Tab 2</mdui-tab>
  <mdui-tab value="tab-3">Tab 3</mdui-tab>

  <mdui-tab-panel slot="panel" value="tab-1">Panel 1</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-2">Panel 2</mdui-tab-panel>
  <mdui-tab-panel slot="panel" value="tab-3">Panel 3</mdui-tab-panel>
</mdui-tabs>

소스

`mdui-tab-panel` API

속성

HTML 속성	JavaScript 프로퍼티	Reflect	유형	기본값
`value`	`value`		`string`	-
탭 패널 항목의 값입니다.

Slots

이름
기본
탭 패널 항목 콘텐츠

`mdui-tab` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`value`	`value`	`string`	-
탭 내비게이션 항목의 값입니다.
`icon`	`icon`	`string`	-
Material Icons 아이콘 이름입니다. `slot="icon"`을 통해서도 설정할 수 있습니다.
`inline`	`inline`	`boolean`	`false`
아이콘과 텍스트를 가로로 정렬할지 여부를 설정합니다.
`autofocus`	`autofocus`	`boolean`	`false`
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
`tabindex`	`tabIndex`	`number`	-
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.

메서드

이름	매개변수	반환값
`click`		`void`
마우스 클릭을 시뮬레이션합니다.
`focus`	`options: FocusOptions` (선택사항)	`void`
현재 요소에 포커스를 설정합니다. 객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다: `preventScroll`: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 `true`로 설정하십시오.
`blur`		`void`
현재 요소에서 포커스를 제거합니다.

이벤트

이름
`focus`
포커스를 얻었을 때 발생합니다.
`blur`
포커스를 잃었을 때 발생합니다.

Slots

이름
기본
탭 내비게이션 항목의 텍스트 콘텐츠
`icon`
탭 내비게이션 항목 내의 아이콘
`badge`
배지
`custom`
탭 내비게이션 항목 내의 전체 콘텐츠를 사용자 정의합니다.

CSS Parts

이름
`container`
탭 내비게이션 항목 컨테이너
`icon`
탭 내비게이션 항목 내의 아이콘
`label`
탭 내비게이션 항목의 텍스트

`mdui-tabs` API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`variant`	`variant`	`'primary' \| 'secondary'`	`'primary'`
탭 모양입니다. 사용 가능한 값: `primary`: `<mdui-top-app-bar>` 아래에 위치하여 앱의 메인 페이지를 전환하는 시나리오에 적합합니다. `secondary`: 페이지 내에 위치하여 관련 콘텐츠 그룹을 전환하는 시나리오에 적합합니다.
`value`	`value`	`string`	-
현재 활성화된 `<mdui-tab>`의 값입니다.
`placement`	`placement`	`'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'top-start'`
탭 위치입니다. 기본값은 `top-start`입니다. 사용 가능한 값: `top-start`: 위쪽, 왼쪽 정렬 `top`: 위쪽, 중앙 정렬 `top-end`: 위쪽, 오른쪽 정렬 `bottom-start`: 아래쪽, 왼쪽 정렬 `bottom`: 아래쪽, 중앙 정렬 `bottom-end`: 아래쪽, 오른쪽 정렬 `left-start`: 왼쪽, 상단 정렬 `left`: 왼쪽, 중앙 정렬 `left-end`: 왼쪽, 하단 정렬 `right-start`: 오른쪽, 상단 정렬 `right`: 오른쪽, 중앙 정렬 `right-end`: 오른쪽, 하단 정렬
`full-width`	`fullWidth`	`boolean`	`false`
부모 요소의 너비를 채울지 여부를 설정합니다.

이벤트

이름
`change`
선택된 값이 변경될 때 발생합니다.

Slots

이름
기본
`<mdui-tab>` 요소
`panel`
`<mdui-tab-panel>` 요소

CSS Parts

이름
`container`
`<mdui-tab>` 요소의 컨테이너
`indicator`
활성 상태 표시기

이전 장

Switch 스위치

다음 장

TextField 텍스트 필드