BottomAppBar하단 앱 바

하단 앱 바는 주로 모바일 페이지 하단에 탐색 항목과 기타 중요한 작업을 표시할 때 사용합니다.

사용법

컴포넌트 가져오기:

import 'mdui/components/bottom-app-bar.js';

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

import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js';

사용 예시: (예시의 style="position: relative"는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.)

<mdui-bottom-app-bar style="position: relative;">
  <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
  <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
  <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
  <mdui-button-icon icon="image--outlined"></mdui-button-icon>
  <div style="flex-grow: 1"></div>
  <mdui-fab icon="add"></mdui-fab>
</mdui-bottom-app-bar>

주의 사항:

이 컴포넌트는 기본적으로 position: fixed 위치 지정을 사용하며, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 body에 padding-bottom 스타일을 추가합니다.

하지만 다음 두 가지 경우에는 기본적으로 position: absolute 위치 지정을 사용합니다:

scroll-target 속성이 지정된 경우. 이 경우 scroll-target 요소에 padding-bottom 스타일이 추가됩니다.
<mdui-layout></mdui-layout> 컴포넌트 내에 위치한 경우. 이 경우 padding-bottom 스타일이 추가되지 않습니다.

예시

지정된 컨테이너 내에 위치시키기

기본적으로 하단 앱 바는 현재 창을 기준으로 페이지 하단에 표시됩니다.

하단 앱 바를 지정된 컨테이너 안에 넣으려면 scroll-target 속성을 지정하면 됩니다. 값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 하단 앱 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 position: relative; overflow: hidden 스타일을 직접 추가해야 합니다).

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar scroll-target=".example-scroll-target">Content</mdui-bottom-app-bar>

  <div class="example-scroll-target" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

소스

스크롤 시 숨기기

scroll-behavior 속성을 hide로 설정하면 페이지를 아래로 스크롤할 때 하단 앱 바를 숨기고 위로 스크롤할 때 다시 표시할 수 있습니다.

scroll-threshold 속성을 사용해 하단 앱 바 숨기기를 시작할 스크롤 픽셀 수를 설정할 수 있습니다.

Content

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-scroll-behavior"
  >Content</mdui-bottom-app-bar>

  <div class="example-scroll-behavior" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

소스

플로팅 액션 버튼 고정

하단 앱 바에 플로팅 액션 버튼이 포함된 경우 fab-detach 속성을 추가하면 페이지가 스크롤되어 하단 앱 바가 숨겨질 때 플로팅 액션 버튼이 페이지 오른쪽 하단에 그대로 유지됩니다.

<div style="position: relative;overflow: hidden">
  <mdui-bottom-app-bar
    fab-detach
    scroll-behavior="hide"
    scroll-threshold="30"
    scroll-target=".example-fab-detach"
  >
    <mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
    <mdui-button-icon icon="edit--outlined"></mdui-button-icon>
    <mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
    <mdui-button-icon icon="image--outlined"></mdui-button-icon>
    <div style="flex-grow: 1"></div>
    <mdui-fab icon="add"></mdui-fab>
  </mdui-bottom-app-bar>

  <div class="example-fab-detach" style="height: 200px;overflow: auto;">
    <div style="height: 1000px"></div>
  </div>
</div>

소스

API

속성

HTML 속성	JavaScript 프로퍼티	유형	기본값
`hide`	`hide`	`boolean`	`false`
숨길지 여부를 설정합니다.
`fab-detach`	`fabDetach`	`boolean`	`false`
하단 앱 바 내의 `<mdui-fab>` 컴포넌트를 앱 바에서 분리할지 여부를 설정합니다. `true`인 경우, 앱 바가 숨겨져도 `<mdui-fab>`는 페이지에 그대로 남습니다.
`scroll-behavior`	`scrollBehavior`	`'hide' \| 'shrink' \| 'elevate'`	-
스크롤 동작을 지정합니다. 사용 가능한 값: `hide`: 스크롤 시 숨깁니다.
`scroll-target`	`scrollTarget`	`string \| HTMLElement \| JQ<HTMLElement>`	-
스크롤 이벤트를 감지할 요소입니다. CSS 선택자, DOM 요소 또는 JQ 객체를 지정할 수 있습니다. 기본적으로 `window` 객체의 스크롤 이벤트를 감지합니다.
`scroll-threshold`	`scrollThreshold`	`number`	-
스크롤 동작을 트리거하는 데 필요한 스크롤 거리입니다. 단위는 `px`입니다.
`order`	`order`	`number`	-
`<mdui-layout>` 내에서 이 컴포넌트의 레이아웃 순서를 지정합니다. 값이 작을수록 먼저 배치됩니다. 기본값은 `0`입니다.

이벤트

이름
`show`
표시가 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 표시를 막을 수 있습니다.
`shown`
표시 애니메이션이 완료되면 발생합니다.
`hide`
숨김이 시작될 때 발생합니다. `event.preventDefault()`를 호출하여 숨김을 막을 수 있습니다.
`hidden`
숨김 애니메이션이 완료되면 발생합니다.

Slots

이름
기본
하단 앱 바 내부의 요소

CSS 사용자 정의 속성

이름
`--shape-corner`
컴포넌트의 둥근 모서리 크기입니다. 구체적인 픽셀 값을 지정할 수 있지만, 디자인 토큰을 참조하는 것을 권장합니다.
`--z-index`
컴포넌트의 CSS `z-index` 값

이전 장

Badge 배지

다음 장

Button 버튼