TopAppBar상단 앱 바
상단 앱 바는 페이지 상단에 핵심 정보와 관련 작업을 표시하여 사용자에게 명확한 탐색과 편리한 기능 접근성을 제공합니다.
컴포넌트 가져오기:
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { TopAppBar } from 'mdui/components/top-app-bar.js';
import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js';
사용 예시: (예시의 style="position: relative"는 데모를 위해 필요하며, 실제 사용 시에는 해당 스타일을 제거하세요.)
<mdui-top-app-bar style="position: relative;">
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
주의 사항:
이 컴포넌트는 기본적으로 position: fixed 위치 지정을 사용하며, 페이지 내용이 이 컴포넌트에 가려지는 것을 방지하기 위해 자동으로 body에 padding-top 스타일을 추가합니다.
하지만 다음 두 가지 경우에는 기본적으로 position: absolute 위치 지정을 사용합니다:
scroll-target 속성이 지정된 경우. 이 경우 scroll-target 요소에 padding-top 스타일이 추가됩니다.<mdui-layout></mdui-layout> 컴포넌트 내에 위치한 경우. 이 경우 padding-top 스타일이 추가되지 않습니다.
기본적으로 상단 앱 바는 현재 창을 기준으로 페이지 상단에 표시됩니다.
상단 앱 바를 지정된 컨테이너 안에 넣으려면 <mdui-top-app-bar> 컴포넌트에 scroll-target 속성을 지정하면 됩니다. 속성값은 스크롤 가능한 내용의 컨테이너에 대한 CSS 선택자 또는 DOM 요소입니다. 이 경우 상단 앱 바는 부모 요소를 기준으로 표시됩니다(부모 요소에 position: relative; overflow: hidden 스타일을 직접 추가해야 합니다).
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar scroll-target=".example-scroll-target">
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
</mdui-top-app-bar>
<div class="example-scroll-target" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스
<mdui-top-app-bar> 컴포넌트에 variant 속성을 사용해 상단 앱 바의 형태를 설정할 수 있습니다.
Title
center-aligned
small
medium
large
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar variant="small" scroll-target=".example-variant" class="example-variant-bar">
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-variant" style="height: 160px;overflow: auto;">
<div style="height: 1000px">
<mdui-segmented-button-group selects="single" value="small">
<mdui-segmented-button value="center-aligned">center-aligned</mdui-segmented-button>
<mdui-segmented-button value="small">small</mdui-segmented-button>
<mdui-segmented-button value="medium">medium</mdui-segmented-button>
<mdui-segmented-button value="large">large</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
</div>
<script>
const topAppBar = document.querySelector(".example-variant-bar");
const segmentedButtonGroup = document.querySelector(".example-variant");
segmentedButtonGroup.addEventListener("change", (event) => {
topAppBar.variant = event.target.value;
});
</script>
소스
<mdui-top-app-bar> 컴포넌트에 scroll-behavior 속성을 설정하여 페이지 스크롤 시 상단 앱 바의 동작을 정의할 수 있습니다. 여러 동작을 동시에 설정할 수 있으며, 공백으로 구분하면 됩니다.
스크롤 동작에는 다음이 포함됩니다:
hide: 페이지를 아래로 스크롤할 때 상단 앱 바를 숨기고, 위로 스크롤할 때 다시 표시합니다.shrink: variant 속성이 medium 또는 large일 때만 유효합니다. 페이지를 아래로 스크롤할 때 상단 앱 바를 축소하고, 위로 스크롤할 때 확장합니다.elevate: 페이지를 아래로 스크롤할 때 상단 앱 바에 그림자를 추가하고, 페이지가 맨 위로 돌아가면 그림자를 제거합니다.
scroll-threshold 속성을 사용해 상단 앱 바의 스크롤 동작을 트리거할 스크롤 픽셀 수를 설정할 수 있습니다. (참고: 신속한 응답을 위해 elevate 스크롤 동작을 사용할 때는 scroll-threshold 속성을 설정하지 마세요.)
예시: 스크롤 시 숨기기
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
scroll-behavior="hide"
scroll-threshold="30"
scroll-target=".example-scroll-behavior-hide"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-hide" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
scroll-behavior="elevate"
scroll-target=".example-scroll-behavior-elevate"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-elevate" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink"
scroll-threshold="30"
scroll-target=".example-scroll-behavior-shrink"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-shrink" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink elevate"
scroll-target=".example-scroll-behavior-shrink-elevate"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-scroll-behavior-shrink-elevate" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스
variant 속성이 medium 또는 large이고 scroll-behavior 속성이 shrink인 상단 앱 바의 경우 <mdui-top-app-bar-title> 컴포넌트에 label-large 슬롯을 추가하여 확장 상태의 텍스트를 설정할 수 있습니다.
접힌 상태의 제목입니다
펼쳐진 상태의 제목입니다
<div style="position: relative;overflow: hidden">
<mdui-top-app-bar
variant="medium"
scroll-behavior="shrink elevate"
scroll-target=".example-label-large-slot"
>
<mdui-button-icon icon="menu"></mdui-button-icon>
<mdui-top-app-bar-title>
접힌 상태의 제목입니다
<span slot="label-large">펼쳐진 상태의 제목입니다</span>
</mdui-top-app-bar-title>
<div style="flex-grow: 1"></div>
<mdui-button-icon icon="more_vert"></mdui-button-icon>
</mdui-top-app-bar>
<div class="example-label-large-slot" style="height: 160px;overflow: auto;">
<div style="height: 1000px"></div>
</div>
</div>
소스| HTML 속성 | JavaScript 프로퍼티 | Reflect | 유형 | 기본값 |
|---|
variant | variant | | 'center-aligned' | 'small' | 'medium' | 'large' | 'small' |
상단 앱 바의 모양입니다. 기본값은 small입니다. 사용 가능한 값:
center-aligned: 작은 앱 바, 제목 중앙 정렬small: 작은 앱 바medium: 중간 앱 바large: 큰 앱 바
|
hide | hide | | boolean | false |
숨길지 여부를 설정합니다.
|
shrink | shrink | | boolean | false |
variant="small" 스타일로 축소할지 여부를 설정합니다. variant="medium" 또는 variant="large"일 때만 적용됩니다.
|
scroll-behavior | scrollBehavior | | 'hide' | 'shrink' | 'elevate' | - |
스크롤 동작을 지정합니다. 여러 값을 공백으로 구분하여 동시에 사용할 수 있습니다. 사용 가능한 값:
hide: 스크롤 시 숨깁니다.shrink: 중형, 대형 앱 바에서 사용 가능하며, 스크롤 시 작은 앱 바 스타일로 축소됩니다.elevate: 스크롤 시 그림자를 추가합니다.
|
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 |
숨김 애니메이션이 완료되면 발생합니다.
|
