snackbar

snackbar 함수는 <mdui-snackbar> 컴포넌트를 래핑한 것입니다. 이 함수를 사용하면 컴포넌트의 HTML 코드를 작성하지 않고도 스낵바를 열 수 있습니다.

사용법

함수 가져오기:

import { snackbar } from 'mdui/functions/snackbar.js';

사용 예시:

열기

<mdui-button class="example-button">열기</mdui-button>

<script type="module">
  import { snackbar } from "mdui/functions/snackbar.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    snackbar({
      message: "사진이 보관됨",
      action: "실행 취소",
      onActionClick: () => console.log("작업 버튼 클릭")
    });
  });
</script>

API

snackbar(options: Options): Snackbar

함수는 Options 객체를 매개변수로 받습니다. 반환값은 <mdui-snackbar> 컴포넌트 인스턴스입니다.

Options

속성명	타입	기본값
`message`	`string`	-
스낵바의 메시지 텍스트 내용
`placement`	`'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end'`	`bottom`
스낵바가 나타나는 위치. 기본값은 `bottom`입니다. 사용 가능한 값: `top`: 상단, 가운데 정렬 `top-start`: 상단, 왼쪽 정렬 `top-end`: 상단, 오른쪽 정렬 `bottom`: 하단, 가운데 정렬 `bottom-start`: 하단, 왼쪽 정렬 `bottom-end`: 하단, 오른쪽 정렬
`action`	`string`	-
작업 버튼의 텍스트
`closeable`	`boolean`	`false`
오른쪽에 닫기 버튼을 표시할지 여부
`messageLine`	`1 \| 2`	-
메시지 텍스트를 최대 몇 줄까지 표시할지 여부. 기본값은 행 수 제한 없음. 사용 가능한 값: `1`: 메시지 텍스트를 최대 한 줄로 표시 `2`: 메시지 텍스트를 최대 두 줄로 표시
`autoCloseDelay`	`number`	`5000`
몇 초 후에 자동으로 닫을지(밀리초 단위). 0으로 설정하면 자동으로 닫히지 않습니다. 기본값은 5초 후 자동 닫힘.
`closeOnOutsideClick`	`boolean`	`false`
스낵바 외부 영역을 클릭하거나 터치할 때 스낵바를 닫을지 여부
`queue`	`string`	-
큐 이름. 기본적으로 큐가 비활성화되어 있어, 이 함수를 여러 번 호출하면 여러 개의 스낵바가 동시에 표시됩니다. 이 매개변수에 큐 이름을 전달하면, 같은 큐 이름을 가진 snackbar 함수는 이전 스낵바가 닫힌 후에 다음 스낵바를 엽니다.
`onClick`	`(snackbar: Snackbar) => void`	-
스낵바 클릭 시의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다.
`onActionClick`	`(snackbar: Snackbar) => void \| boolean \| Promise<void>`	-
작업 버튼 클릭 시의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다. 기본적으로 클릭 시 스낵바가 닫힙니다. 반환값이 `false`이면 스낵바를 닫지 않고, promise를 반환하면 해당 promise가 resolve된 후 스낵바를 닫습니다.
`onOpen`	`(snackbar: Snackbar) => void`	-
스낵바가 표시되기 시작할 때의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다.
`onOpened`	`(snackbar: Snackbar) => void`	-
스낵바 표시 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다.
`onClose`	`(snackbar: Snackbar) => void`	-
스낵바가 숨겨지기 시작할 때의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다.
`onClosed`	`(snackbar: Snackbar) => void`	-
스낵바 숨기기 애니메이션 완료 시의 콜백 함수. 함수 매개변수는 스낵바 인스턴스이며, `this`도 스낵바 인스턴스를 가리킵니다.

이전 장

prompt

다음 장

getTheme