NavigationBar내비게이션 바
내비게이션 바는 모바일 페이지에서 몇 개의 주요 페이지 간을 쉽게 전환할 때 사용합니다.
컴포넌트 가져오기:
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { NavigationBar } from 'mdui/components/navigation-bar.js';
import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js';
사용 예시: (예시의 style="position: relative"는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.)
Item 1
Item 2
Item 3
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
주의 사항:
이 컴포넌트는 기본적으로 position: fixed 위치 지정을 사용하며, 페이지 내용이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 body에 padding-bottom 스타일을 추가합니다. 하지만 다음 두 가지 경우에는 기본적으로 position: absolute 위치 지정을 사용합니다:
scroll-target 속성이 지정된 경우. 이 경우 scroll-target 요소에 padding-bottom 스타일이 추가됩니다.- 컴포넌트가
<mdui-layout></mdui-layout> 내에 위치한 경우. 이 경우 padding-bottom 스타일이 추가되지 않습니다.
내비게이션 바의 텍스트 레이블은 기본적으로 내비게이션 항목이 3개 이하일 때 항상 표시되고, 내비게이션 항목이 3개를 초과하면 선택된 상태의 텍스트만 표시됩니다.
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 4
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<br/>
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="directions_railway" value="item-3">Item 3</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-4">Item 4</mdui-navigation-bar-item>
</mdui-navigation-bar>
소스<mdui-navigation-bar> 컴포넌트에 label-visibility 속성을 설정하여 텍스트 레이블의 표시 상태를 조정할 수 있습니다. 가능한 값은 다음과 같습니다:
selected: 선택된 상태의 텍스트만 표시labeled: 항상 텍스트 표시unlabeled: 항상 텍스트 표시 안 함
Item 1
Item 2
Item 3
selected
labeled
unlabeled
<mdui-navigation-bar value="item-1" label-visibility="selected" style="position: relative" class="example-label">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<mdui-segmented-button-group value="selected" selects="single" style="margin-top: 16px">
<mdui-segmented-button value="selected">selected</mdui-segmented-button>
<mdui-segmented-button value="labeled">labeled</mdui-segmented-button>
<mdui-segmented-button value="unlabeled">unlabeled</mdui-segmented-button>
</mdui-segmented-button-group>
<script>
const navigationBar = document.querySelector(".example-label");
const segmentedButtonGroup = navigationBar.nextElementSibling;
segmentedButtonGroup.addEventListener("change", (event) => {
navigationBar.labelVisibility = event.target.value;
});
</script>
소스
기본적으로 내비게이션 바는 현재 창을 기준으로 페이지 하단에 표시됩니다.
내비게이션 바를 지정된 컨테이너 안에 넣으려면 <mdui-navigation-bar> 컴포넌트에 scroll-target 속성을 지정하면 됩니다. 이 속성의 값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 내비게이션 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 position: relative; overflow: hidden 스타일을 직접 추가해야 합니다).
<div style="position: relative;overflow: hidden">
<mdui-navigation-bar scroll-target=".example-scroll-target" value="item-1">
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<div class="example-scroll-target" style="height: 160px;overflow: auto;">
<div style="height: 1000px">페이지 내용</div>
</div>
</div>
소스
<mdui-navigation-bar> 컴포넌트에 scroll-behavior 속성을 hide로 설정하면 페이지를 아래로 스크롤할 때 내비게이션 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다.
scroll-threshold 속성을 사용해 내비게이션 바 숨기기를 시작할 스크롤 픽셀 수를 설정할 수 있습니다.
<div style="position: relative;overflow: hidden">
<mdui-navigation-bar
scroll-behavior="hide"
scroll-threshold="30"
scroll-target=".example-scroll-behavior"
value="item-1"
>
<mdui-navigation-bar-item icon="place" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="people" value="item-3">Item 3</mdui-navigation-bar-item>
</mdui-navigation-bar>
<div class="example-scroll-behavior" style="height: 160px;overflow: auto;">
<div style="height: 1000px">페이지 내용</div>
</div>
</div>
소스
<mdui-navigation-bar-item> 컴포넌트에서 icon 속성은 비활성화 상태의 내비게이션 항목 아이콘을 설정하고, active-icon 속성은 활성화 상태의 내비게이션 항목 아이콘을 설정할 때 사용합니다. icon 및 active-icon 슬롯을 통해 비활성화 및 활성화 상태의 아이콘 요소를 설정할 수도 있습니다.
Item 1
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item
icon="place--outlined"
active-icon="place"
value="item-1"
>Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item value="item-2">
Item 2
<mdui-icon slot="icon" name="people--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="people"></mdui-icon>
</mdui-navigation-bar-item>
</mdui-navigation-bar>
소스
<mdui-navigation-bar-item> 컴포넌트에 href 속성을 설정하면 내비게이션 항목을 링크로 변환할 수 있습니다. 이때 링크 관련 속성(download, target, rel)도 함께 사용합니다.
Item 1
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" href="https://www.mdui.org" target="_blank" value="item-1">Item 1</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>
소스
<mdui-navigation-bar-item> 컴포넌트에서 badge 슬롯을 통해 배지를 추가할 수 있습니다.
Item 1
99+
Item 2
<mdui-navigation-bar value="item-1" style="position: relative">
<mdui-navigation-bar-item icon="place" value="item-1">
Item 1
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-bar-item>
<mdui-navigation-bar-item icon="commute" value="item-2">Item 2</mdui-navigation-bar-item>
</mdui-navigation-bar>
소스| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
icon | icon | | string | - |
비활성 상태의 Material Icons 아이콘 이름입니다. slot="icon"을 통해서도 설정할 수 있습니다.
|
active-icon | activeIcon | | string | - |
활성 상태의 Material Icons 아이콘 이름입니다. slot="active-icon"을 통해서도 설정할 수 있습니다.
|
value | value | | string | - |
내비게이션 항목의 값입니다.
|
href | href | | string | - |
링크의 대상 URL입니다.
이 속성을 설정하면 컴포넌트 내부가 <a> 요소로 렌더링되며, 링크 관련 속성을 사용할 수 있습니다.
|
download | download | | string | - |
다운로드할 링크 대상을 지정합니다.
참고: href 속성이 지정된 경우에만 유효합니다.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
링크를 여는 방식을 지정합니다. 사용 가능한 값은 다음과 같습니다:
_blank: 새 창에서 링크 열기_parent: 부모 프레임에서 링크 열기_self: 기본값. 현재 프레임에서 링크 열기_top: 전체 창에서 링크 열기
참고: href 속성이 지정된 경우에만 유효합니다.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
현재 문서와 링크된 문서 간의 관계를 나타냅니다. 사용 가능한 값은 다음과 같습니다:
alternate: 현재 문서의 대체 버전author: 현재 문서 또는 글의 작성자bookmark: 가장 가까운 상위 섹션으로의 영구 링크external: 참조된 문서가 현재 문서와 동일한 사이트에 있지 않음help: 관련 도움말 문서로 링크license: 현재 문서의 주요 내용이 참조된 파일의 저작권 라이선스에 따라 사용됨me: 현재 문서가 링크된 콘텐츠의 소유자를 나타냄next: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 다음 문서임nofollow: 현재 문서의 작성자 또는 게시자가 참조된 파일을 보증하지 않음noreferrer: Referer 헤더가 포함되지 않음. noopener와 유사하게 동작합니다.opener: 하이퍼링크가 최상위 브라우징 컨텍스트를 생성할 때(즉, target 속성 값이 _blank인 경우) 보조 브라우징 컨텍스트를 생성함prev: 현재 문서가 시리즈의 일부이며, 참조된 문서는 시리즈의 이전 문서임search: 현재 파일 및 관련 페이지를 검색하는 데 사용할 수 있는 리소스 링크를 제공tag: 현재 문서에 적용할 수 있는 태그(지정된 주소로 식별됨)를 제공
참고: href 속성이 지정된 경우에만 사용 가능합니다.
|
autofocus | autofocus | | boolean | false |
페이지 로드 후 자동으로 포커스를 받을지 여부를 지정합니다.
|
tabindex | tabIndex | | number | - |
Tab 키를 사용하여 포커스를 이동할 때 요소의 순서를 지정합니다.
|
| 이름 | 매개변수 | 반환값 |
|---|
click | | void |
마우스 클릭을 시뮬레이션합니다.
|
focus | options: FocusOptions (선택사항)
| void |
현재 요소에 포커스를 설정합니다.
객체를 인자로 전달할 수 있으며, 객체의 속성은 다음과 같습니다:
preventScroll: 기본적으로 요소가 포커스를 받으면 페이지가 스크롤되어 해당 요소가 화면에 표시됩니다. 페이지 스크롤을 방지하려면 이 속성을 true로 설정하십시오.
|
blur | | void |
현재 요소에서 포커스를 제거합니다.
|
| 이름 |
|---|
focus |
포커스를 얻었을 때 발생합니다.
|
blur |
포커스를 잃었을 때 발생합니다.
|
| 이름 |
|---|
change |
값이 변경될 때 발생합니다.
|
show |
표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 표시를 막을 수 있습니다.
|
shown |
표시 애니메이션이 완료되면 발생합니다.
|
hide |
숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 숨김을 막을 수 있습니다.
|
hidden |
숨김 애니메이션이 완료되면 발생합니다.
|
| 이름 |
|---|
| 기본 |
<mdui-navigation-bar-item> 컴포넌트
|
다음 장
NavigationDrawer 내비게이션 드로어
