near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
스낵바
스낵바(Snackbar)는 창 하단에 작은 팝업 상자를 표시하며, 시간이 지나거나 사용자가 화면의 다른 곳을 클릭/터치하면 자동으로 사라집니다.
화면에는 한 번에 하나의 스낵바만 표시될 수 있으며, 현재 스낵바가 닫히기 전에 다음 스낵바가 열리면 다음 스낵바는 대기열에 추가되어 현재 스낵바가 닫힌 후 열립니다.
호출 방식
mdui.snackbar(params) 메서드를 호출하면 됩니다.
사용 방법
스낵바는 JavaScript를 통해 직접 호출할 수 있으며 HTML 레이아웃을 작성할 필요가 없습니다.
스낵바를 호출하는 방법은 두 가지가 있습니다:
mdui.snackbar(message, params)mdui.snackbar(params)
두 가지 방식 모두 스낵바 인스턴스를 반환합니다.
스낵바 지원 매개변수:
| 매개변수 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
message | string | 스낵바의 텍스트입니다. mdui.snackbar(params)를 통해 호출할 때 이 매개변수는 필수입니다. | |
timeout | int | 4000 | 스낵바가 자동으로 숨겨지는 지연 시간(밀리초)입니다. 0으로 설정하면 자동으로 닫히지 않습니다. |
position | string | bottom | 스낵바의 위치.
|
buttonText | string | 버튼 텍스트. | |
buttonColor | string | #90CAF9 | 버튼 텍스트 색상이며 색상 이름 또는 색상 값(예: red, #ffffff, rgba(255, 255, 255, 0.3) 등)일 수 있습니다. |
closeOnButtonClick | boolean | true | 버튼 클릭 시 스낵바를 닫을지 여부. |
closeOnOutsideClick | boolean | true | 스낵바 외부 영역 클릭 또는 터치 시 스낵바를 닫을지 여부. |
onClick | function | 스낵바 클릭 시 콜백 함수. | |
onButtonClick | function | 스낵바 버튼 클릭 시 콜백 함수. | |
onOpen | function | 스낵바 열기 시작 시 콜백 함수. | |
onOpened | function | 스낵바 열린 후 콜백 함수. | |
onClose | function | 스낵바 닫기 시작 시 콜백 함수. | |
onClosed | function | 스낵바 닫힌 후 콜백 함수. |
스낵바 인스턴스 메서드:
| 메서드 이름 | 설명 |
|---|---|
close | 스낵바를 닫습니다. 닫힌 후 스낵바는 제거됩니다. |
콜백이 있는 스낵바
예시
mdui.snackbar({
message: 'Archived',
buttonText: 'undo',
onClick: function(){
mdui.alert('스낵바 클릭됨');
},
onButtonClick: function(){
mdui.alert('버튼 클릭됨');
},
onClose: function(){
mdui.alert('닫힘');
}
});다양한 위치의 스낵바
예시
mdui.snackbar({
message: 'bottom',
position: 'bottom',
});
mdui.snackbar({
message: 'top',
position: 'top',
});
mdui.snackbar({
message: 'left-top',
position: 'left-top',
});
mdui.snackbar({
message: 'left-bottom',
position: 'left-bottom',
});
mdui.snackbar({
message: 'right-top',
position: 'right-top',
});
mdui.snackbar({
message: 'right-bottom',
position: 'right-bottom',
});