ديفكوم- Bootstrap 5 Toasts التفاصيل

المقالات

Bootstrap 5 Toasts

-

يعمل toast مثل alert box حيث يظهر فقط لبضع ثوانٍ عند حدوث شيء ما (أي عندما ينقر المستخدم على زر ، أو يرسل نموذجًا ، وما إلى ذلك). يعني مثلا ممكن بعد نجاح عملية معينه تظهر هذا المربع للدلاله على ان تم الاضافة بنجاح.

تمام نطبق مثال حتى نفهم الموضوع:

المثال التالي بنعرض فيه هذا Toasts بهدف نفهم شو هو.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <div class="toast show">
            <div class="toast-header">
                <strong class="me-auto">Bootstrap</strong>
                <small>11 mins ago</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                <p>Hello, world! This is a toast message.</p>
            </div>
        </div>
    </div>
</body>
</html>

النتيجة:

المثال السابق صورة ثابته. لكن الهدف من Toasts هو عرضها بعد تنفيذ عمليه معينه.

في المثال التالي بنعمل اظهار لهذا الرسالة بالنقر فوق button.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-primary" id="toastbtn">Show Toast</button>
        <div class="toast position-fixed bottom-0 end-0">
            <div class="toast-header">
                <strong class="me-auto">Toast Header</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                <p>Some text inside the toast body</p>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(.toast))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
</html>

النتيجة:

النتيجة عند النقر فوق button بيظهر toast في اسفل الشاشة من اليمين.

الكود المسؤول عن اظهار toast في اسفل الشاشة

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">

الكود المسؤول عن عرض هذا toast عند النقر فوق button هو كود Javascript

الكود:

document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(.toast))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }

اول هذا الكود عملنا بحث عن Id الخاص ب button وهو الان في هذه الحاله toastbtn وبعدها استخدمنا الامر onclick الي بيعني ان عند النقر عليه بتم تنفيذ الكود. بعد هيك طبقنا الامر show على toast لاظهاره.

وضع اكثر من toast فوق بعض Stacking

يمكنك وضع اكثر من toast فوق بعض عن طريق عمل wrapping لها في toast container، وبتكون النتيجة اضافة بعض التباعد بشكل عمودي vertically.

نطبق المثال التالي ونفهم شو يعني:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-primary" id="toastbtn">Show Toast</button>
        <div class="toast-container">
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <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">
                    <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>
    <script>
        document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(.toast))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
</html>

النتيجة:

تغير وتخصيص Custom content

يمكن التحكم ب toast وتغير الشكل عن طريق إزالة او اضافة مكونات اليها.

في المثال التالي عملنا تعديل بسيط وهو إزالة toast-header الافتراضي>

نطبق الكود التالي حتى نفهم الموضوع.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-danger" id="toastbtn">Show Toast</button>
        <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    Welcome to Devkum! This is a toast message sample.
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(.toast))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
</html>

النتيجة:

نتعلم كيف ممكن نضيف controls and components الى toast

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-danger" id="toastbtn">Show Toast</button>
        <div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">
                    Welcome to Devkum! This is a toast message.
                    <div class="mt-2 pt-2 border-top">
                        <button type="button" class="btn btn-success btn-sm">Save</button>
                        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast">Close</button>
                    </div>
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(@@#.toast@@#))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
</html>

النتيجة:

تطيق الألوان Color schemes

يمكن تغيير لون الخلفيه ل toast باستخدام classes المعرفة مسبقا مثل

.bg-primary ,.bg-secondary , .bg-success ,.bg-danger ,.bg-warning, .bg-info , .text-light, .bg-dark, .bg-muted .bg-white
.text-primary ,.text-secondary , .text-success ,.text-danger ,.text-warning, .text-info , .text-light, .text-dark, .text-muted .text-white

نطبق المثال التالي حتى نفهم الموضوع:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <button type="button" class="btn btn-danger" id="toastbtn">Show Toast</button>
        <div class="toast align-items-center bg-warning" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body text-dark">
                    Welcome to Devkum! This is a toast message.
                    <div class="mt-2 pt-2 border-top">
                        <button type="button" class="btn btn-success btn-sm">Save</button>
                        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast">Close</button>
                    </div>
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        document.getElementById("toastbtn").onclick = function () {
            var toastElList = [].slice.call(document.querySelectorAll(@@#.toast@@#))
            var toastList = toastElList.map(function (toastEl) {
                return new bootstrap.Toast(toastEl)
            })
            toastList.forEach(toast => toast.show())
        }
    </script>
</body>
</html>

النتيجة:

طبقنا لون خلفية باستخدام bg-warning ولون النص باستخدام text-dark

المقال السابق

المقال التالي

مقدمه في Bootstrap 5

اترك تعليقك

الاسم الكامل

البريد الإلكتروني

اضافة تعليق

حفظ