Toast container (toast_container)

You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.

🔗 External documentation.

            id: toast_container
label: 'Toast container'
description: 'You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.'
group: Toast
homepage: 'https://getbootstrap.com/docs/5.3/components/toasts/#stacking'
slots:
    items:
        id: items
        label: 'Toast items'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': toast_container
            items:
                -
                    '@component': toast
                    '@attributes':
                        class:
                            - show
                    header:
                        -
                            '@element': img
                            '@styles':
                                - rounded
                                - me-2
                            src: 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIHJvdW5kZWQgbWUtMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzAwN2FmZiI+PC9yZWN0Pjwvc3ZnPg=='
                        -
                            '@element': strong
                            '@content': Bootstrap
                            '@styles':
                                - me-auto
                        -
                            '@element': small
                            '@content': 'just now'
                            '@styles':
                                - text-muted
                    content:
                        - 'See? Just like this.'
                -
                    '@component': toast
                    '@attributes':
                        class:
                            - show
                    header:
                        -
                            '@element': img
                            '@styles':
                                - rounded
                                - me-2
                            src: 'data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iYmQtcGxhY2Vob2xkZXItaW1nIHJvdW5kZWQgbWUtMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGFyaWEtaGlkZGVuPSJ0cnVlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBzbGljZSIgZm9jdXNhYmxlPSJmYWxzZSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iIzAwN2FmZiI+PC9yZWN0Pjwvc3ZnPg=='
                        -
                            '@element': strong
                            '@content': Bootstrap
                            '@styles':
                                - me-auto
                        -
                            '@element': small
                            '@content': '2 seconds ago'
                            '@styles':
                                - text-muted
                    content:
                        - 'Heads up, toasts will stack automatically'
                -
                    '@component': toast
                    '@attributes':
                        class:
                            - show
                    content:
                        - 'Hello, world! This is a toast message.'
                    flex_wrapper: true
                -
                    '@component': toast
                    '@attributes':
                        class:
                            - show
                    content:
                        - 'Hello, world! This is a toast message.'
                        -
                            '@element': div
                            '@styles':
                                - mt-2
                                - pt-2
                                - border-top
                        -
                            '@component': button
                            '@variant': primary__sm
                            label: 'Take action'
                        -
                            '@component': button
                            '@variant': secondary__sm
                            '@attributes':
                                data-bs-dismiss: toast
                            label: Close
                    hide_close_button: true
                -
                    '@component': toast
                    '@attributes':
                        class:
                            - show
                    '@styles':
                        - align-items-center
                        - text-bg-primary
                        - border-0
                    content:
                        - 'Hello, world! This is a toast message.'
                    flex_wrapper: true
                    close_button_variant: white