::eBazar:: Ui Toasts

نان تست ها اعلان های سبک وزنی هستند که برای تقلید از اعلان های فشاری که توسط سیستم عامل های موبایل و دسکتاپ رایج شده اند طراحی شده اند. آنها با فلکس باکس ساخته شده اند، بنابراین به راحتی قابل تراز و قرار دادن هستند.

بررسی اجمالی

نکاتی که هنگام استفاده از پلاگین نان تست باید بدانید:

نان تست ها به دلایل عملکردی انتخاب می شوند، بنابراین شما باید خودتان آنها را مقداردهی اولیه کنید.
لطفا توجه داشته باشید که شما مسئول قرار دادن نان تست ها هستید.
اگر مشخص نکنید، نان تست ها به طور خودکار پنهان می شوند autohide: false.

افکت انیمیشن این مؤلفه به این بستگی دارد prefers-reduced-motion پرس و جو رسانه ای را ببینید بخش حرکت کاهش یافته اسناد دسترسی ما.

نمونه ها

پایه

برای تشویق نان تست های قابل توسعه و قابل پیش بینی، ما یک هدر و بدنه را توصیه می کنیم. استفاده از سربرگ نان تست display: flex، به لطف ابزارهای حاشیه و فلکس باکس ما، امکان تراز آسان محتوا را فراهم می کند.

نان تست ها به همان اندازه که شما نیاز دارید انعطاف پذیر هستند و نشانه گذاری مورد نیاز بسیار کمی دارند. حداقل، ما به یک عنصر نیاز داریم که حاوی محتوای «برشته‌شده» شما باشد و قویاً دکمه رد کردن را تشویق می‌کنیم.

پیش نمایش
HTML

سلام دنیا! این یک پیام نان تست است.

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="../assets/images/xs/avatar1.svg" class="avatar sm rounded me-2" alt="" />                                                
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>

نیمه شفاف

نان تست ها نیز کمی شفاف هستند، بنابراین روی هر چیزی که ممکن است ظاهر شوند مخلوط می شوند. برای مرورگرهایی که از backdrop-filter ویژگی CSS، ما همچنین سعی خواهیم کرد عناصر زیر یک نان تست را محو کنیم.

پیش نمایش
HTML

سلام دنیا! این یک پیام نان تست است.

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="../assets/images/xs/avatar2.svg" class="avatar sm rounded me-2" alt="" />
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-muted">11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>

انباشته شدن

وقتی چندین نان تست دارید، به طور پیش‌فرض آن‌ها را به صورت خوانا به صورت عمودی روی هم قرار می‌دهیم.

پیش نمایش
HTML

دیدن؟ درست مثل این.

مراقب باشید، نان تست ها به طور خودکار روی هم چیده می شوند

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="../assets/images/xs/avatar2.svg" class="avatar sm rounded me-2" alt="" />
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-muted">just now</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            See? Just like this.
        </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
            <img src="../assets/images/xs/avatar2.svg" class="avatar sm rounded me-2" alt="" />
            <strong class="me-auto">Bootstrap</strong>
            <small class="text-muted">2 seconds ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Heads up, toasts will stack automatically
        </div>
    </div>

محتوای دلخواه

نان تست های خود را با حذف اجزای فرعی و دستکاری با آنها سفارشی کنید خدمات رفاهی، یا اضافه کردن نشانه گذاری خود. در اینجا با حذف پیش‌فرض، نان تست ساده‌تری ایجاد کرده‌ایم .toast-header، اضافه کردن یک نماد مخفی سفارشی از آیکون های بوت استرپ، و با استفاده از برخی ابزارهای فلکس باکس برای تنظیم چیدمان.

پیش نمایش
HTML

سلام دنیا! این یک پیام نان تست است.

با تکیه بر مثال بالا، می توانید طرح های رنگی مختلف نان تست را با ما ایجاد کنید ابزارهای رنگی. در اینجا ما اضافه کرده ایم .bg-primary و .text-white به .toast، و سپس اضافه شد .text-white به دکمه بستن ما برای یک لبه واضح، حاشیه پیش فرض با را حذف می کنیم .border-0.

سلام دنیا! این یک پیام نان تست است.

همچنین، می‌توانید کنترل‌ها و اجزای اضافی را به نان تست اضافه کنید.

سلام دنیا! این یک پیام نان تست است.

    <div class="toast d-flex align-items-center" 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 ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>

    <div class="toast d-flex align-items-center text-white bg-primary border-0" 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 btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-body">
            Hello, world! This is a toast message.
            <div class="mt-2 pt-2 border-top">
                <button type="button" class="btn btn-primary btn-sm">Take action</button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
            </div>
        </div>
    </div>

تعیین سطح

در صورت نیاز، نان تست را با CSS سفارشی قرار دهید. بالا سمت راست اغلب برای اعلان ها استفاده می شود، همانطور که در وسط بالا نیز استفاده می شود. اگر می خواهید هر بار فقط یک نان تست را نشان دهید، سبک های موقعیت یابی را درست روی آن قرار دهید .toast.

پیش نمایش
HTML

سلام دنیا! این یک پیام نان تست است.

برای سیستم‌هایی که اعلان‌های بیشتری تولید می‌کنند، از یک عنصر بسته‌بندی استفاده کنید تا بتوانند به راحتی روی هم قرار بگیرند.

دیدن؟ درست مثل این.

مراقب باشید، نان تست ها به طور خودکار روی هم چیده می شوند

همچنین می توانید با ابزارهای فلکس باکس برای تراز کردن نان تست ها به صورت افقی و/یا عمودی جذاب باشید.

سلام دنیا! این یک پیام نان تست است.

    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
        <div class="toast fade show" style="position: absolute; top: 0; right: 0;">
            <div class="toast-header">
                <img src="../assets/images/xs/avatar10.svg" class="avatar sm rounded me-2" alt="" />
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>


    <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
        <!-- Position it -->
        <div style="position: absolute; top: 0; right: 0;">

            <!-- Then put toasts within -->
            <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <img src="../assets/images/xs/avatar10.svg" class="avatar sm rounded me-2" alt="" />
                    <strong class="me-auto">Bootstrap</strong>
                    <small class="text-muted">just now</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    See? Just like this.
                </div>
            </div>
        
            <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <img src="../assets/images/xs/avatar10.svg" class="avatar sm rounded me-2" alt="" />
                    <strong class="me-auto">Bootstrap</strong>
                    <small class="text-muted">2 seconds ago</small>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    Heads up, toasts will stack automatically
                </div>
            </div>
        </div>
    </div>

    <!-- Flexbox container for aligning the toasts -->
    <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

        <!-- Then put toasts within -->
        <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <img src="../assets/images/xs/avatar10.svg" class="avatar sm rounded me-2" alt="" />
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>

دسترسی

نان تست ها وقفه های کوچکی برای بازدیدکنندگان یا کاربران شما هستند، بنابراین برای کمک به کسانی که دارای صفحه خوان و فناوری های کمکی مشابه هستند، باید نان تست های خود را در یک صفحه بپیچید. aria-live region. تغییرات در مناطق زنده (مانند تزریق/به‌روزرسانی مؤلفه نان تست) به‌طور خودکار توسط صفحه‌خوان‌ها بدون نیاز به جابجایی تمرکز کاربر یا ایجاد اختلال در کاربر اعلام می‌شود. علاوه بر این، شامل شود aria-atomic="true" برای اطمینان از اینکه کل نان تست همیشه به‌عنوان یک واحد (اتمی) اعلام می‌شود، به‌جای اعلام آنچه تغییر کرده است (که اگر فقط بخشی از محتوای نان تست را به‌روزرسانی کنید، یا اگر همان محتوای نان تست را در نقطه‌ای بعد نمایش دهید، می‌تواند منجر به مشکلات شود. به موقع). اگر اطلاعات مورد نیاز برای فرآیند مهم است، به عنوان مثال. برای لیستی از خطاها در یک فرم، سپس از جزء هشدار به جای نان تست.

توجه داشته باشید که منطقه زنده باید در نشانه گذاری وجود داشته باشد قبل نان تست تولید یا به روز شده است. اگر همزمان هر دو را به صورت پویا تولید کنید و به صفحه تزریق کنید، عموماً توسط فناوری‌های کمکی اعلام نمی‌شوند..

شما همچنین باید آن را تطبیق دهید role و aria-live سطح بسته به محتوا اگر پیام مهمی مانند خطا است، استفاده کنید role="alert" aria-live="assertive"، در غیر این صورت استفاده کنید role="status" aria-live="polite" ویژگی های.

با تغییر محتوایی که نمایش می دهید، حتما آن را به روز کنید delay تایم اوت برای اطمینان از اینکه مردم زمان کافی برای خواندن نان تست دارند.

    <div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
        <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
    </div>

هنگام استفاده از autohide: false، باید یک دکمه بستن اضافه کنید تا به کاربران اجازه دهید نان تست را رد کنند.

پیش نمایش
HTML

سلام دنیا! این یک پیام نان تست است.

    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast fade show" data-autohide="false">
        <div class="toast-header">
            <svg class="bd-placeholder-img rounded me-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#007aff"></rect></svg>
        
            <strong class="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            Hello, world! This is a toast message.
        </div>
    </div>

ر

استفاده

نان تست ها را از طریق جاوا اسکریپت راه اندازی کنید:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
    var toastList = toastElList.map(function (toastEl) {
        return new bootstrap.Toast(toastEl, option)
    })

گزینه ها

گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. برای ویژگی های داده، نام گزینه را به آن اضافه کنید data-، همانطور که درdata-animation="".

نام	نوع	پیش فرض	توضیحات
`animation`	بولی	`true`	یک انتقال محو شدن CSS به نان تست اعمال کنید
`autohide`	بولی	`true`	مخفی کردن خودکار نان تست
`delay`	عدد	`5000`	مخفی کردن خودکار نان تست

روش ها

روش ها و انتقال های ناهمزمان

همه متدهای API هستند نامتقارن و شروع یک انتقال. آنها به محض شروع انتقال به تماس گیرنده باز می گردند اما قبل از اینکه تمام شود. علاوه بر این، یک روش فراخوانی بر روی a جزء انتقال نادیده گرفته خواهد شد.

برای اطلاعات بیشتر به مستندات جاوا اسکریپت ما مراجعه کنید.

نمایش

نان تست یک عنصر را آشکار می کند. قبل از اینکه نان تست واقعاً نشان داده شود به تماس گیرنده برمی گردد (یعنی قبل ازshown.bs.toast رویداد رخ می دهد). باید این روش را به صورت دستی فراخوانی کنید، در عوض نان تست شما نشان داده نمی شود.

toast.show()

پنهان کردن

نان تست یک عنصر را پنهان می کند. قبل از اینکه نان تست واقعاً پنهان شود به تماس گیرنده برمی گردد (یعنی قبل از hidden.bs.toast رویداد رخ می دهد). اگر ساختید باید این روش را به صورت دستی فراخوانی کنید autohide تا false.

toast.hide()

انتقال

نان تست یک عنصر را پنهان می کند. نان تست شما در DOM باقی می ماند اما دیگر نشان داده نمی شود.

toast.dispose()

رویدادها

نوع رویداد	توضیحات
`show.bs.toast`	این رویداد بلافاصله زمانی که `show` روش نمونه نامیده می شود.
`shown.bs.toast`	این رویداد بلافاصله زمانی که.
`hide.bs.toast`	این رویداد بلافاصله زمانی که `hide` روش نمونه نامیده می شود.
`hidden.bs.toast`	این رویداد بلافاصله زمانی که.

var myToastEl = document.getElementById('myToast')
    myToastEl.addEventListener('hidden.bs.toast', function () {
        // do something...
    })

تنظیمات رنگ قالب

برای تنظیمات پویا کلیک کنید

رنگ اصلی
رنگ ثانویه
رنگ نمودار 1
رنگ نمودار 2
رنگ نمودار 3
رنگ نمودار 4
رنگ نمودار 5

تنظیمات فونت

فونت گوگل پاپینس
فونت گوگل اوپن سانس
فونت گوگل مونت
فونت گوگل موتکا

چیدمان کنتراست

فعال کردن حالت تاریک!
فعال کردن کنتراست بالا
فعال کردن حالت چپ چین!