Snackbar스낵바
스낵바 컴포넌트는 페이지에 간단한 애플리케이션 프로세스 정보를 표시할 때 사용합니다.
컴포넌트를 직접 사용하는 것 외에도 mdui는 mdui.snackbar 함수를 제공하여 Snackbar 컴포넌트 사용을 간소화할 수 있습니다.
컴포넌트 가져오기:
import 'mdui/components/snackbar.js';
컴포넌트의 TypeScript 타입 가져오기:
import type { Snackbar } from 'mdui/components/snackbar.js';
사용 예시:
Photo archived
Snackbar 열기
<mdui-snackbar class="example-snackbar">Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-snackbar");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
placement 속성으로 Snackbar의 표시 위치를 설정할 수 있습니다.
Photo archived
top-start
Photo archived
top
Photo archived
top-end
Photo archived
bottom-start
Photo archived
bottom
Photo archived
bottom-end
<div class="example-placement">
<div class="row">
<mdui-snackbar placement="top-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-start</mdui-button>
<mdui-snackbar placement="top">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top</mdui-button>
<mdui-snackbar placement="top-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">top-end</mdui-button>
</div>
<div class="row">
<mdui-snackbar placement="bottom-start">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-start</mdui-button>
<mdui-snackbar placement="bottom">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom</mdui-button>
<mdui-snackbar placement="bottom-end">Photo archived</mdui-snackbar>
<mdui-button variant="outlined">bottom-end</mdui-button>
</div>
</div>
<script>
const snackbars = document.querySelectorAll(".example-placement mdui-snackbar");
snackbars.forEach((snackbar) => {
const button = snackbar.nextElementSibling;
button.addEventListener("click", () => snackbar.open = true);
});
</script>
<style>
.example-placement mdui-button {
margin: 0.25rem;
width: 7.5rem;
}
</style>
소스
action 속성을 사용해 Snackbar 오른쪽에 작업 버튼을 추가하고, 이 속성으로 버튼의 텍스트를 지정할 수 있습니다. 작업 버튼을 클릭하면 action-click 이벤트가 트리거됩니다. 작업 버튼을 로딩 중 상태로 표시하려면 action-loading 속성을 추가합니다.
Photo archived
Snackbar 열기
<mdui-snackbar action="Undo" class="example-action">Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-action");
const openButton = snackbar.nextElementSibling;
snackbar.addEventListener("action-click", () => {
snackbar.actionLoading = true;
setTimeout(() => snackbar.actionLoading = false, 2000);
});
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스action 슬롯을 통해 Snackbar 오른쪽에 사용자 정의 요소를 추가할 수도 있습니다.
Photo archived
Undo
Snackbar 열기
<mdui-snackbar class="example-action-slot">
Photo archived
<mdui-button slot="action" variant="text">Undo</mdui-button>
</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-action-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스
closeable 속성을 추가하면 Snackbar 오른쪽에 닫기 버튼이 나타납니다. 이 버튼을 클릭하면 Snackbar가 닫히고 close 이벤트가 트리거됩니다.
Photo archived
Snackbar 열기
<mdui-snackbar closeable class="example-closeable">Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-closeable");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스close-button 슬롯을 통해 닫기 버튼의 요소를 사용자 정의할 수 있습니다.
Photo archived
Snackbar 열기
<mdui-snackbar closeable class="example-close-button-slot">
Photo archived
<mdui-avatar slot="close-button" icon="people_alt"></mdui-avatar>
</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-button-slot");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스close-icon 속성을 설정하여 기본 닫기 버튼의 Material Icons 아이콘을 수정할 수 있습니다. close-icon 슬롯을 통해 닫기 버튼의 아이콘 요소를 사용자 정의할 수도 있습니다.
Photo archived
Snackbar 열기
<mdui-snackbar
closeable
close-icon="delete"
class="example-close-icon"
>Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-icon");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스
기본적으로 메시지 텍스트는 행 수 제한이 없습니다. message-line 속성으로 텍스트 행 수를 제한할 수 있으며, 최대 2행까지 설정할 수 있습니다.
The item already has the label "travel". You can add a new label. You can add a new label.
Snackbar 열기
<mdui-snackbar message-line="1" class="example-line">The item already has the label "travel". You can add a new label. You can add a new label.</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-line");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스
auto-close-delay 속성을 사용해 자동 닫힘 지연 시간을 설정할 수 있습니다. 단위는 밀리초이며, 기본값은 5000밀리초입니다.
Photo archived
Snackbar 열기
<mdui-snackbar auto-close-delay="2000" class="example-close-delay">Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-close-delay");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스
close-on-outside-click 속성을 추가하면 Snackbar 외부 영역을 클릭할 때 Snackbar를 닫을 수 있습니다.
Photo archived
Snackbar 열기
<mdui-snackbar close-on-outside-click class="example-outside">Photo archived</mdui-snackbar>
<mdui-button>Snackbar 열기</mdui-button>
<script>
const snackbar = document.querySelector(".example-outside");
const openButton = snackbar.nextElementSibling;
openButton.addEventListener("click", () => snackbar.open = true);
</script>
소스| 이름 |
|---|
open |
스낵바 표시가 시작될 때 발생합니다. event.preventDefault()를 호출하여 스낵바 표시를 막을 수 있습니다.
|
opened |
스낵바 표시 애니메이션이 완료되면 발생합니다.
|
close |
스낵바 숨김이 시작될 때 발생합니다. event.preventDefault()를 호출하여 스낵바 닫힘을 막을 수 있습니다.
|
closed |
스낵바 숨김 애니메이션이 완료되면 발생합니다.
|
action-click |
작업 버튼을 클릭할 때 발생합니다.
|
