토스트
토스트 (Toast)
잠시 화면에 나타났다 사라지는 알림 메시지 컴포넌트예요. 제목, 진행 바, 액션 버튼, 이미지 등을 조합해 알림을 만들 수 있어요.
출처: 문서
본문
유형 (Types)
jQuery 짧은 표기법 `$.toast()` 지원은 2.9.0에서 추가됐어요. 이전 FUI 버전에서 이 기능을 쓰려면
`$.toast = $.fn.toast;`
을 추가하세요. 기존 선택자 표기법 `$('body').toast()`도 이전처럼 동작해요.
최소 (Minimal)
최소 토스트는 메시지만 표시해요.
$.toast({
message: 'I am a toast, nice to meet you !'
})
;
제목 (Titled)
토스트에 제목을 추가할 수 있어요.
$.toast({
title: 'Better ?',
message: 'Hey look, I have a title !'
})
;
진행 바 (Progress Bar)
토스트에 진행 바를 붙일 수 있어요.
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom'
})
;
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'bottom',
classProgress: 'red'
})
;
변형 (Variations)
토스트 유형 (Toast Type)
토스트는 다양한 유형의 정보를 표시하는 데 사용할 수 있어요.
$.toast({
class: 'success',
message: `You're using the good framework !`
})
;
$.toast({
class: 'error',
message: `An error occurred !`
})
;
$.toast({
class: 'warning',
message: `Behind you !`
})
;
위치 (Position)
토스트는 화면의 여러 위치에 나타날 수 있어요.
$.toast({
position: 'bottom right',
message: `It's pretty cold down there...`
})
;
$.toast({
position: 'top left',
message: `Look, I'm here !`
})
;
부착 위치 (Attached Position)
토스트는 화면 전체 너비에 걸쳐 표시되는 부착 위치를 가질 수 있어요. 모바일 기기의 알림처럼요.
Attached positions with centered content only support attached actions. See the examples tab for more info.
$.toast({
position: 'top attached',
title: 'Watch out!',
message: `I am a top attached toast`
})
;
$.toast({
position: 'bottom attached',
title: 'Watch out!',
message: 'I am a bottom attached toast',
newestOnTop: true
})
;
중앙 정렬 콘텐츠가 있는 부착 위치는 attached 액션만 지원해요. 자세한 내용은 예시 탭을 참고하세요.
방향 (Direction)
토스트를 가로로 쌓을 수 있어요.
$.toast({
horizontal: true,
position: 'top left',
message: `Next one will open to the right`
})
;
중앙 정렬 (Center Aligned)
토스트 콘텐츠를 중앙 정렬로 표시할 수 있어요.
Centered content in attached toasts only support attached actions. See the examples tab for more info.
$.toast({
title: 'Veronika has joined',
message: 'Welcome to the Fomantic-UI community!',
class: 'center aligned', // you can also use 'centered'
})
;
부착된 토스트의 중앙 정렬 콘텐츠는 attached 액션만 지원해요. 자세한 내용은 예시 탭을 참고하세요.
지속 시간 (Duration)
토스트를 표시할 시간을 선택할 수 있어요.
$.toast({
displayTime: 5000,
message: `You will see me for 5 seconds.`
})
;
$.toast({
displayTime: 0,
message: `I'll stay here until you click on me !`
})
;
$.toast({
displayTime: 'auto',
showProgress: 'top',
classProgress: 'blue',
message: 'The display time of this toast is calculated by its amount of containing words.You can adjust the calculation by modifying the default values for minDisplayTime and wordsPerMinute'
})
;
메시지 스타일 사용 (Use Message Style)
message 컴포넌트의 모든 스타일과 색상을 사용할 수 있어요.
$.toast({
title: 'Awesome',
message: 'I got my style from the message class',
class : 'purple',
className: {
toast: 'ui message'
}
})
;
증가하는 진행 바 (Increasing Progress Bar)
진행 바는 줄어드는 대신 증가할 수 있어요.
$.toast({
title: 'LOOK',
message: 'See, how long i will last',
showProgress: 'top',
progressUp: true
})
;
색상 변형 (Color Variants)
흔히 쓰는 모든 색상 이름을 사용할 수 있어요.
if(typeof document.suiToastColorIndex === 'undefined') {
document.suiToastColorIndex = -1;
}
var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'],
suiPlus = function(){
if (++document.suiToastColorIndex === suiColors.length) {
document.suiToastColorIndex = 0;
}
return document.suiToastColorIndex;
}
;
$.toast({
message: 'I am a colorful toast',
class : suiColors[suiPlus()], //cycle through all colors
showProgress: 'bottom'
})
;
반전 색상 (Inverted Colors)
위와 같고, class 정의에 inverted만 추가하면 돼요.
if(typeof document.suiToastColorIndex === 'undefined') {
document.suiToastColorIndex = -1;
}
var suiColors = ['red','orange','yellow','olive','green','teal','blue','violet','purple','pink','brown','grey','black'],
suiPlus = function(){
if (++document.suiToastColorIndex === suiColors.length) {
document.suiToastColorIndex = 0;
}
return document.suiToastColorIndex;
}
;
$.toast({
message: 'I am an inverted colorful toast',
class : 'inverted ' + suiColors[suiPlus()], //cycle through all colors
showProgress: 'bottom'
})
;
액션 (Actions)
일반 (General)
텍스트와/또는 아이콘, 선택적 class와 클릭 핸들러를 제공해 토스트에 클릭 액션을 정의해요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
actions: [{
text: 'Yes',
icon: 'check',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
icon: 'ban',
class: 'icon red'
},{
text: '?',
class: 'blue',
click: function() {
$.toast({message:'Returning false from the click handler avoids closing the toast '});
return false;
}
}]
})
;
기본 (Basic)
classActions 설정으로 액션 버튼의 전체적인 모양을 조정할 수 있어요. basic class를 사용하면 액션 배경이 밝아지지 않아요. left는 버튼을 왼쪽으로 정렬해요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'basic left',
actions: [{
text: 'Yes, really',
class: 'yellow',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
}]
})
;
중앙 (Centered)
액션 버튼을 중앙에 표시할 수도 있어요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'centered', // you can also use 'center aligned'
actions: [{
text: 'Yes, really',
class: 'yellow',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
}]
})
;
부착 (Attached)
attached를 사용하면 액션이 버튼 그룹이 돼요. top을 추가하면 액션을 토스트 상단에 붙여 표시해요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'top attached',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
세로 (Vertical)
vertical을 사용해 액션을 토스트 오른쪽에 표시할 수 있어요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'vertical',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
세로 부착 (Vertical attached)
세로 액션은 vertical attached로 버튼 그룹으로 표시할 수도 있어요. 세로 부착 액션은 left도 지원해요.
$.toast({
message: 'Do you really want to star Fomantic-UI?',
displayTime: 0,
class: 'black',
classActions: 'left vertical attached',
actions: [{
text: 'Yes, really',
class: 'green',
click: function() {
$.toast({message:'You clicked "yes", toast closes by default'});
}
},{
text: 'Maybe later',
class: 'red',
click: function() {
$.toast({message:'You clicked "maybe", toast closes by default'});
}
}]
})
;
예시 (Examples)
아이콘 없이 (Without icon)
상태 아이콘을 숨기도록 선택할 수 있어요.
$.toast({
class: 'warning',
showIcon: false,
message: 'Hey, where is my icon ?'
})
;
개별 아이콘 (Individual icon)
포함된 FontAwesome 갤러리에서 원하는 것을 사용해요.
$.toast({
class: 'info',
showIcon: 'microphone',
message: 'Listen to me'
})
;
이미지 (Image)
이미지 경로를 제공하면 아이콘처럼 표시돼요. 별도의 classImage 설정으로 이미지를 조정해요.
$.toast({
showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg',
classImage: 'avatar',
message: `Veronika has joined the Fomantic-UI community`
})
;
$.toast({
showImage: 'https://fomantic-ui.com/images/avatar/small/veronika.jpg',
class: 'image',
classImage: 'tiny',
message: `Veronika has joined the Fomantic-UI community`
})
;
닫기 아이콘 (Close Icon)
토스트 아무 곳이나 클릭해 닫는 대신, 닫기 아이콘을 클릭해야 닫히게 강제할 수 있어요.
$.toast({
class: 'info',
displayTime: 0,
closeIcon: true,
message: 'Click on the X to close me'
})
;
$.toast({
class: 'info',
displayTime: 0,
closeIcon: 'left',
message: 'Click on the X to close me'
})
;
트랜지션 (Transitions)
다른 트랜지션 유형과 지속 시간을 설정할 수 있어요.
$.toast({
class: 'success',
message: 'Did you notice any difference ?',
transition: {
showMethod : 'zoom',
showDuration : 1000,
hideMethod : 'fade',
hideDuration : 1000
}
})
;
액션과 중앙·부착 위치 (Actions and centered and attached position)
부착 위치 변형에서 중앙 정렬 토스트 콘텐츠와 함께 액션을 사용하는 것은 attached 액션만 지원해요. 이는 콘텐츠 옆 아이콘/이미지를 정렬하는 데 flexbox를 사용하기 때문이에요.
$.toast({
title: 'Centered top attached',
message: 'I only support attached actions',
displayTime: 0,
position: 'top attached',
class: 'centered',
classActions: 'attached',
actions: [{
text: 'Mark as read',
class: 'grey'
},{
text: 'Delete',
class: 'red'
}]
})
;
DOM에서 만들기 (Create from DOM)
기존 DOM 노드로 토스트를 만들면 다른 기존 FUI 컴포넌트를 활용할 수 있어요.
토스트 (Toast)
Notice
A Toast can be generated out of existing DOM Nodes
$('#domtoast')
.toast()
;
템플릿 (Template)
DOM 템플릿을 재사용하고 설정 매개변수로 그 콘텐츠를 제공할 수 있어요.
$('#domtemplate')
.toast({
title: 'Hello visitor #' + Math.random().toString(36).substr(2),
message: 'Message ID: '+ Math.random().toString(36).substr(2),
showImage: 'https://fomantic-ui.com/images/avatar/small/zoe.jpg'
})
;
승인/거부 콜백 (Approve / Deny Callbacks)
Modal처럼 Toast도 positive/approve, negative/deny 또는 ok/cancel 버튼에 approve/deny 콜백을 자동으로 연결해서, setting으로 액션을 만들 필요가 없어요.
Notice
Want to close this DOM toast?
Yes
No
$('#domtoastactions')
.toast({
displayTime: 0,
onDeny : function(){
$.toast({message:'Wait not yet!'});
return false;
},
onApprove : function() {
$.toast({message:'Approved'});
}
})
;
메시지 (Message)
Download the source code at github
$('#dommessage')
.toast()
;
카드 (Card)
Fomantic-UI
2.8.0 Card Toast
$('#domcard')
.toast()
;
상호작용 (Interaction)
일시정지 방지 (Prevent pausing)
토스트를 호버할 때 기본 동작은 표시 시간 감소를 일시정지하는 것이에요. pauseOnHover를 false로 설정하면 토스트가 일시정지하지 않도록 강제할 수 있어요.
$.toast({
message: 'This toast does not pause when you hover on it',
pauseOnHover: false,
showProgress: 'top'
});
닫기 방지 (Prevent closing)
토스트를 클릭할 때 기본 동작은 닫는 것이에요. closeOnClick을 false로 설정하면 토스트가 이렇게 하지 않도록 강제할 수 있어요.
$.toast({
message: 'This toast does not close when you click on it',
closeOnClick: false,
showProgress: 'top'
});
만들어진 토스트 접근 (Access created toast)
각 .toast() 호출이 만들어진 토스트의 인스턴스를 반환하므로, 표시된 토스트와 javascript 동작으로 상호작용할 수 있어요.
Open pink toast first
Remaining display time?
How many toasts displayed?
Close toast
var myToast = $.toast();
var remainingTime = myToast.toast('get remainingTime');
모양 (Appearance)
2.7.0에서 마이그레이션 (Migration from 2.7.0)
토스트 기본값이 2.8.0에서 변경됐어요. 모든 토스트에 대해 이전 기본값을 유지하려면 다음과 같이 기본값을 덮어쓰세요.
/* To change the defaults for all toast at once override the module as follows
$.fn.toast.settings.progressUp = true;
$.fn.toast.settings.class = 'info';
$.fn.toast.settings.showIcon = true;
$.fn.toast.settings.className.box = 'toast-box'; //removes shadow
$.fn.toast.settings.className.title = 'header'; // smaller font size
$.fn.toast.settings.className.icon = 'icon'; // top position again
$.fn.toast.settings.transition.closeEasing = 'easeOutBounce';
*/
// Or apply the old defaults directly to the toast
$.toast({
title: 'LOOK',
message: 'Turned back time to 2.7.0 defaults',
showProgress: 'bottom',
//make it look like 2.7.0
showIcon: true,
progressUp: true,
class: 'info',
className: {
box:'toast-box',
title:'header',
icon: 'icon'
},
transition: {
closeEasing: 'easeOutBounce'
}
})
;
일반 HTML 레이아웃 (General HTML Layout)
렌더링된 토스트의 일반 레이아웃은, 자신의 javascript 표시 로직을 구현하고 Fomantic의 HTML CSS 레이아웃만 재사용하려는 사람들에게 유용할 수 있어요.
Action button
Toast Header
Toast content
Action button
동작 (Behaviors)
다음 모든 동작은 다음 구문으로 호출할 수 있어요:
$('.ui.toast').toast('behavior', argumentOne, argumentTwo...);
Behavior / Description
animate pause
표시 시간 감소(및 가능한 진행 바 애니메이션)를 일시정지해요.
animate continue
표시 시간 감소(및 가능한 진행 바 애니메이션)를 계속해요.
close
토스트를 닫아요.
get toasts
현재 toast-container 안에 보이는 모든 토스트를 객체 배열로 반환해요.
get remainingTime
남은 시간을 밀리초로 반환해요.
destroy
인스턴스를 파괴하고 모든 이벤트를 제거해요.
설정 (Settings)
토스트 설정 (Toast Settings)
토스트 동작을 구성하는 설정이에요.
Setting / Default / Description
position
top right
토스트를 표시할 위치를 설정해요. top right, top center, top left, bottom right, bottom center, bottom left, centered가 될 수 있어요.
horizontal
false
토스트가 세로 대신 가로로 쌓여야 하는지 여부예요.
class
neutral
알림의 class를 정의해요. 기존 색상 정의나 info, success, warning, error가 될 수 있어요. className.toast 옵션에서 ui message를 사용하면(아래 참고), 이 옵션은 message 컴포넌트의 지원되는 어떤 class든 담을 수 있어요.
classProgress
false
진행 바 class에 추가할 문자열을 담을 수 있어요. 예를 들어 별도의 색상이요.
classActions
false
액션 class에 추가해 모양을 제어할 문자열을 담을 수 있어요. 보통 basic, left, top, bottom, vertical, attached의 조합이에요.
classImage
mini
이미지 class에 추가할 문자열을 담을 수 있어요. mini, tiny, small, avatar가 기본 지원돼요.
context
body
토스트 컨테이너를 붙일 영역을 지정하는 선택자 또는 jquery 객체예요.
displayTime
3000
토스트 표시 시간(ms)을 설정해요. 자동 닫기를 비활성화하려면 0으로 설정하세요. 토스트 안의 단어 수로 시간을 계산하려면 auto로 설정하세요.
minDisplayTime
1000
displayTime이 'auto'로 설정된 경우의 최소 표시 시간이에요.
wordsPerMinute
120
displayTime이 'auto'로 설정된 경우 표시 시간 계산의 기준이에요.
showImage
false
이미지 URL이 주어지면 그 이미지가 토스트 왼쪽에 표시돼요.
alt
false
showImage가 true일 때, alt 설정이 이미지 alt 속성에 사용할 문자열을 제공할 수 있어요.
showIcon
true
토스트가 주어진 class와 일치하는 아이콘을 표시할지 정의해요. 문자열이 주어지면 아이콘 classname으로 사용돼요.
closeIcon
false
true로 설정하면 토스트 아무 곳이나 클릭하는 대신 오른쪽 위 모서리 아이콘으로 닫을 수 있게 해요. left로 설정하면 닫기 아이콘이 오른쪽이 아닌 왼쪽에 표시돼요.
closeOnClick
true
토스트가 클릭될 때 닫히는 것을 피하려면 false로 설정하세요.
cloneModule
true
주어진 DOM 노드를 토스트로 그 복제본을 사용해 재사용 가능하게 유지할지 여부예요. false로 설정하면 토스트가 닫힐 때 원본 DOM 노드가 분리되어 제거돼요.
showProgress
false
displayTime에 도달할 때까지 증가하는 진행 바를 상단 또는 하단에 표시해요. false는 진행 바를 표시하지 않아요. displayTime 옵션이 0이면 이 옵션은 무시돼요.
progressUp
false
true는 진행 바를 0%에서 100%로 증가, false는 진행 바를 100%에서 0%로 감소시켜요.
pauseOnHover
true
토스트를 호버할 때 표시 타이머가 일시정지하지 않도록 하려면 false로 설정하세요.
compact
true
true는 고정 너비로 토스트를 표시하고, false는 동적 너비로 반응형 표시해요.
opacity
1
show 트랜지션 이후의 토스트 불투명도 값이에요.
newestOnTop
false
새 토스트를 다른 토스트 위에 표시할지 정의해요.
preserveHTML
true
주어진 title, message 또는 actions에 포함된 HTML을 보존할지 여부예요. 신뢰할 수 없는 제3자 콘텐츠를 다룰 때는 false로 설정하세요.
transition
transition: {
showMethod : 'scale',
showDuration : 500,
hideMethod : 'scale',
hideDuration : 500,
closeEasing : 'easeOutCubic',
closeDuration: 500,
}
토스트 표시 또는 숨김 중의 트랜지션과 지속 시간을 설정하는 설정이에요.
콜백 (Callbacks)
콜백은 특정 동작 이후에 실행할 함수를 지정해요.
Parameters / Description
onShow
$module
토스트가 표시되기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 토스트 표시가 취소돼요.
onVisible
$module
토스트가 표시된 후의 콜백이에요.
onClick
$module
팝업이 클릭된 후의 콜백이에요.
onHide
$module
토스트가 숨겨지기 전의 콜백이에요. 이 콜백에서 `false`를 반환하면 토스트 숨김이 취소돼요.
onHidden
$module
토스트가 숨겨진 후의 콜백이에요.
onRemove
$module
토스트가 파괴되기 전의 콜백이에요.
onApprove
$module
`positive`, `ok`, `approve` class가 있는 기존 버튼이 클릭될 때의 콜백이에요. 토스트 닫기를 피하려면 false를 반환하세요.
onDeny
$module
`negative`, `cancel`, `deny` class가 있는 기존 버튼이 클릭될 때의 콜백이에요. 토스트 닫기를 피하려면 false를 반환하세요.
콘텐츠 설정 (Content Settings)
토스트 콘텐츠를 지정하는 설정이에요.
Setting / Description
title
토스트의 제목이에요. 표시하지 않으려면 비워 두세요.
message
표시할 메시지예요.
actions
객체들의 배열이에요. 각 객체는 `text`, `class`, `icon`, `click` 속성으로 액션을 정의해요.
액션은 기본적으로 토스트를 닫아요. 클릭 핸들러에서 false를 반환하면 그걸 방지해요.
`class` 속성에 approve(approve, ok, positive)나 deny(deny, cancel, negative) classname을 사용하면 `click` 핸들러는 무시돼요. 이런 경우 `onApprove`와 `onDeny` 콜백을 대신 사용하세요.
actions: [{
text : 'Wait',
class : 'red',
icon : 'exclamation',
click : function(){}
}]
DOM 설정 (DOM Settings)
DOM 설정은 이 모듈이 DOM과 어떻게 상호작용할지 지정해요.
Setting / Default / Description
namespace
toast
이벤트 네임스페이스예요. 모듈 해제가 요소에 붙은 다른 이벤트에 영향을 주지 않게 해요.
selector
selector : {
container : '.ui.toast-container',
box : '.toast-box',
toast : '.ui.toast',
title : '.header',
message : '.message:not(.ui)',
image : '> img.image, > .image > img',
icon : '> i.icon',
input : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
clickable : 'a, details, .ui.accordion',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel'
}
내부적으로 사용되는 DOM 선택자들이에요.
className
className : {
container : 'ui toast-container',
absolute : 'absolute',
box : 'floating toast-box',
progress : 'ui attached active progress',
toast : 'ui toast',
icon : 'centered icon',
visible : 'visible',
content : 'content',
title : 'ui header',
message : 'message',
actions : 'actions',
extraContent : 'extra content',
button : 'ui button',
buttons : 'ui buttons',
close : 'close icon',
image : 'ui image',
vertical : 'vertical',
horizontal : 'horizontal',
attached : 'attached',
inverted : 'inverted',
compact : 'compact',
pausable : 'pausable',
progressing : 'progressing',
top : 'top',
bottom : 'bottom',
left : 'left',
basic : 'basic',
unclickable : 'unclickable',
}
상태에 스타일을 붙이는 데 사용되는 클래스 이름들이에요.
icons
icons : {
info : 'info',
success : 'checkmark',
warning : 'warning',
error : 'times'
}
내부적으로 사용되는 아이콘 이름들이에요.
text
text : {
close : 'Close'
}
표시 문자열이에요.
디버그 설정 (Debug Settings)
디버그 설정은 콘솔의 디버그 출력을 제어해요.
Setting / Default / Description
name
Toast
디버그 로그에서 사용되는 이름이에요.
silent
false
다른 디버그 설정과 관계없이 오류 메시지를 포함한 모든 콘솔 출력을 잠재워요.
debug
false
콘솔에 표준 디버그 출력을 제공해요.
performance
true
콘솔에 표준 디버그 출력을 제공해요.
verbose
false
콘솔에 보조 디버그 출력을 제공해요.
errors
error: {
method : 'The method you called is not defined.',
noElement : 'This module requires ui transitions.',
verticalCard : 'Vertical but not attached actions are not supported for card layout'
}