guide v11x

토스트 메시지 v11.21.0.5

쉽고 가벼운 알림 메시지를 통해 방문자에게 알림을 표시할 수 있습니다.

Class

Class	비고
.toast	내용 (옵션 보기)
	옵션	`.toast.show` `.toast.showing` `.toast-horz`
	색상	`.toast-black` `.toast-primary` `.toast-secondary` `.toast-success` `.toast-warning` `.toast-danger` `.toast-dark` `.toast-ndonly` `.toast-nd-only` `.toast.nd-only`
.toast-container	부모 영역 (옵션 보기)
.toast-container	옵션	`.top` `.left` `.center`
.toast-header	상단
.toast-body	본문

Layouts

Basic

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <strong class="me-auto">Toast message</strong>
        <small>11 mins ago</small>
        <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
</div>

Custom content

Hello, world! This is a toast message.

<div class="toast toast-horz toast-primary" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
        Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close" aria-label="Close"></button>
</div>

색상

Custom Functions

`.toast`

--nd-toast-width:                       350px;
--nd-toast-padding-x:                   0.75rem;
--nd-toast-padding-y:                   0.5rem;
--nd-toast-font-size:                   0.875rem;
--nd-toast-color:                       inherit;
--nd-toast-bg:                          rgba(255,255,255,.8);
--nd-toast-border-width:                1px;
--nd-toast-border-color:                rgba(0,0,0,.175);
--nd-toast-border-radius:               0.25rem;
--nd-toast-box-shadow:                  0 .5rem 1rem rgba(0,0,0,.15);

/* header */
--nd-toast-header-color:                #6c757d;
--nd-toast-header-bg:                   rgba(255,255,255,.8);
--nd-toast-header-border-color:         rgba(0,0,0,.175);

`.toast-container`

--nd-toast-position:                    fixed;
--nd-toast-zindex:                      1090;
--nd-toast-offset-x:                    1rem;
--nd-toast-offset-y:                    1rem;
--nd-toast-spacing:                     1.5rem;

`.toast-container.center`

--nd-toast-offset-x:                    0;

Class 기본 레이아웃 색상 선택자 변수