templates/ui-toasts.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Toasts'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  15.         
  16.             {{ include('partials/menu.html.twig') }}
  17.         
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  25.         
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'UI Elements', title: 'Toasts'}) }}
  27.         
  28.                         <div class="row">
  29.                             <div class="col-xl-12">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h5 class="card-title">Live Example</h5>
  33.                                         <p class="card-title-desc">Click the button below to show a toast (positioned with our
  34.                                             utilities in the
  35.                                             lower right corner) that has been hidden by default.</p>
  36.                                     </div>
  37.                                     <div class="card-body">        
  38.                                         <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
  40.                                         <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  41.                                             <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  42.                                                 <div class="toast-header">
  43.                                                     <img src="/images/logo-sm.svg" alt="" class="me-2" height="18">
  44.                                                     <strong class="me-auto">Minia</strong>
  45.                                                     <small class="text-muted">11 mins ago</small>
  46.                                                     <button type="button" class="btn-close" data-bs-dismiss="toast"
  47.                                                         aria-label="Close"></button>
  48.                                                 </div>
  49.                                                 <div class="toast-body">
  50.                                                     Hello, world! This is a toast message.
  51.                                                 </div>
  52.                                             </div>
  53.                                         </div>
  54.                                     </div>
  55.                                 </div>
  56.                             </div>
  57.                             <!-- end col -->
  59.                         </div>
  60.                         <!-- end row -->
  62.                         <div class="row">
  63.                             <div class="col-xl-6">
  64.                                 <div class="card">
  65.                                     <div class="card-header">
  66.                                         <h5 class="card-title">Basic Toast</h5>
  67.                                         <p class="card-title-desc">Toasts are as flexible as you need and have very little
  68.                                             required markup.
  69.                                             At a minimum, we require a single element to contain your
  70.                                             “toasted” content and strongly encourage a dismiss button.
  71.                                         </p>
  72.                                     </div>
  73.                                     <div class="card-body">
  74.                                         <div style="min-height: 110px;">
  75.                                             <div class="toast fade show" role="alert" aria-live="assertive"
  76.                                                 data-bs-autohide="false" aria-atomic="true">
  77.                                                 <div class="toast-header">
  78.                                                     <img src="/images/logo-sm.svg" alt="" class="me-2" height="18">
  79.                                                     <strong class="me-auto">Minia</strong>
  80.                                                     <small class="text-muted">11 mins ago</small>
  81.                                                     <button type="button" class="btn-close" data-bs-dismiss="toast"
  82.                                                         aria-label="Close"></button>
  83.                                                 </div>
  84.                                                 <div class="toast-body">
  85.                                                     Hello, world! This is a toast message.
  86.                                                 </div>
  87.                                             </div>
  88.                                         </div>
  89.                                         <!--end toast-->
  90.                                     </div>
  91.                                 </div>
  92.                             </div>
  93.                             <!-- end col -->
  94.         
  95.                             <div class="col-xl-6">
  96.                                 <div class="card">
  97.                                     <div class="card-header">
  98.                                         <h5 class="card-title">Translucent</h5>
  99.                                         <p class="card-title-desc">Toasts are slightly translucent, too, so they blend over
  100.                                             whatever they might appear over. For browsers that
  101.                                             support the <code>backdrop-filter</code> CSS property,
  102.                                             we’ll also attempt to blur the elements under a toast.
  103.                                         </p>
  104.                                     </div>
  105.                                     <div class="card-body">                                                  
  106.                                         <div style="min-height: 110px;">
  107.                                             <div class="toast fade show" role="alert" aria-live="assertive"
  108.                                                 data-bs-autohide="false" aria-atomic="true">
  109.                                                 <div class="toast-header">
  110.                                                     <img src="/images/logo-sm.svg" alt="" class="me-2" height="18">
  111.                                                     <strong class="me-auto">Minia</strong>
  112.                                                     <small class="text-muted">11 mins ago</small>
  113.                                                     <button type="button" class="btn-close" data-bs-dismiss="toast"
  114.                                                         aria-label="Close"></button>
  115.                                                 </div>
  116.                                                 <div class="toast-body">
  117.                                                     Hello, world! This is a toast message.
  118.                                                 </div>
  119.                                             </div>
  120.                                             <!--end toast-->
  121.                                         </div>
  122.                                         <!--end /div-->
  123.                                     </div>
  124.                                 </div>
  125.                             </div>
  126.                             <!-- end col -->
  127.         
  128.                         </div>
  129.                         <!-- end row -->
  130.         
  131.                         <div class="row">
  132.                             <div class="col-xl-6">
  133.                                 <div class="card">
  134.                                     <div class="card-header">
  135.                                         <h5 class="card-title">Stacking</h5>
  136.                                         <p class="card-title-desc">For systems that generate more notifications, consider using
  137.                                             a wrapping element
  138.                                             so they can easily stack.
  139.                                         </p>
  140.                                     </div>
  141.                                     <div class="card-body">
  142.                                         <div style="min-height: 230px;">
  143.                                             <div aria-live="polite" aria-atomic="true" class="position-relative">
  144.                                                 <!-- Position it: -->
  145.                                                 <!-- - `.toast-container` for spacing between toasts -->
  146.                                                 <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  147.                                                 <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  148.                                                 <div class="toast-container position-absolute top-0 end-0 p-2 p-lg-3">
  149.         
  150.                                                     <!-- Then put toasts within -->
  151.                                                     <div class="toast fade show" role="alert" aria-live="assertive"
  152.                                                         data-bs-autohide="false" aria-atomic="true">
  153.                                                         <div class="toast-header">
  154.                                                             <img src="/images/logo-sm.svg" alt="" class="me-2" height="18">
  155.                                                             <strong class="me-auto">Minia</strong>
  156.                                                             <small class="text-muted">just now</small>
  157.                                                             <button type="button" class="btn-close" data-bs-dismiss="toast"
  158.                                                                 aria-label="Close"></button>
  159.                                                         </div>
  160.                                                         <div class="toast-body">
  161.                                                             See? Just like this.
  162.                                                         </div>
  163.                                                     </div>
  164.         
  165.                                                     <div class="toast fade show" role="alert" aria-live="assertive"
  166.                                                         data-bs-autohide="false" aria-atomic="true">
  167.                                                         <div class="toast-header">
  168.                                                             <img src="/images/logo-sm.svg" alt="" class="me-2" height="18">
  169.                                                             <strong class="me-auto">Minia</strong>
  170.                                                             <small class="text-muted">2 sec ago</small>
  171.                                                             <button type="button" class="btn-close" data-bs-dismiss="toast"
  172.                                                                 aria-label="Close"></button>
  173.                                                         </div>
  174.                                                         <div class="toast-body">
  175.                                                             Heads up, toasts will stack automatically
  176.                                                         </div>
  177.                                                     </div>
  178.                                                 </div>
  179.                                             </div>
  180.                                         </div>
  181.                                         <!--end /div-->
  182.                                     </div>
  183.                                 </div>
  184.                             </div>
  185.                             <!-- end col -->
  186.         
  187.                             <div class="col-xl-6">
  188.                                 <div class="card">
  189.                                     <div class="card-header">
  190.                                         <h5 class="card-title">Custom content</h5>
  191.                                         <p class="card-title-desc">Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup.</p>
  192.                                     </div>
  193.                                     <div class="card-body">
  194.                                         <div class="d-flex flex-column gap-3">
  195.                                             <div aria-live="polite" aria-atomic="true" class="position-relative">
  196.                                                 <div class="toast fade show" role="alert" aria-live="assertive"
  197.                                                     aria-atomic="true">
  198.                                                     <div class="toast-body">
  199.                                                         Hello, world! This is a toast message.
  200.                                                         <div class="mt-2 pt-2 border-top">
  201.                                                             <button type="button" class="btn btn-primary btn-sm">Take
  202.                                                                 action</button>
  203.                                                             <button type="button" class="btn btn-secondary btn-sm"
  204.                                                                 data-bs-dismiss="toast">Close</button>
  205.                                                         </div>
  206.                                                     </div>
  207.                                                 </div>
  208.                                             </div>
  210.                                             <div class="toast align-items-center fade show" role="alert" aria-live="assertive" aria-atomic="true">
  211.                                                 <div class="d-flex">
  212.                                                     <div class="toast-body">
  213.                                                         Hello, world! This is a toast message.
  214.                                                     </div>
  215.                                                     <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  216.                                                 </div>
  217.                                             </div>
  219.                                             <div aria-live="polite" aria-atomic="true">
  220.                                                 <div class="toast fade show align-items-center text-white bg-primary border-0"
  221.                                                     role="alert" aria-live="assertive" aria-atomic="true">
  222.                                                     <div class="d-flex">
  223.                                                         <div class="toast-body">
  224.                                                             Hello, world! This is a toast message.
  225.                                                         </div>
  226.                                                         <button type="button" class="btn-close btn-close-white me-2 m-auto"
  227.                                                             data-bs-dismiss="toast" aria-label="Close"></button>
  228.                                                     </div>
  229.                                                 </div>
  230.                                             </div>
  231.                                         </div>
  232.                                         <!--end /div-->
  233.                                     </div>
  234.                                 </div>
  235.                             </div>
  236.                             <!-- end col -->
  237.         
  238.                         </div>
  239.                         <!-- end row -->
  241.                         <div class="row">
  242.                             <div class="col-xl-12">
  243.                                 <div class="card">
  244.                                     <div class="card-header">
  245.                                         <h5 class="card-title">Toasts Example</h5>
  246.                                         <p class="card-title-desc">Click the button below to show a toast</p>
  247.                                     </div>
  248.                                     <div class="card-body">
  249.                                         <div class="d-flex flex-wrap gap-2">
  250.                                             <div class="position-relative">
  251.                                                 <div class="hstack flex-wrap gap-2">
  252.                                                     <button type="button" class="btn btn-primary" id="borderedToast1Btn">Primary toast</button>
  253.                                                     <button type="button" class="btn btn-success" id="borderedToast2Btn">Success toast</button>
  254.                                                     <button type="button" class="btn btn-warning" id="borderedTost3Btn">Warning toast</button>
  255.                                                     <button type="button" class="btn btn-danger" id="borderedToast4Btn">danger toast</button>
  256.                                                 </div>
  257.                                     
  258.                                                 <div style="z-index: 11">
  259.                                                     <div id="borderedToast1" class="toast overflow-hidden mt-3" role="alert" aria-live="assertive"
  260.                                                         aria-atomic="true">
  261.                                                         <div class="align-items-center text-white bg-primary border-0">
  262.                                                             <div class="d-flex">
  263.                                                                 <div class="toast-body">
  264.                                                                     Hello, world! This is a toast message.
  265.                                                                 </div>
  266.                                                                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
  267.                                                                     aria-label="Close"></button>
  268.                                                             </div>
  269.                                                         </div>
  270.                                                     </div>
  271.                                                 </div>
  272.                                     
  273.                                                 <div style="z-index: 11">
  274.                                                     <div id="borderedToast2" class="toast overflow-hidden mt-3" role="alert" aria-live="assertive"
  275.                                                         aria-atomic="true">
  276.                                                         <div class="align-items-center text-white bg-success border-0">
  277.                                                             <div class="d-flex">
  278.                                                                 <div class="toast-body">
  279.                                                                     Hello, world! This is a toast message.
  280.                                                                 </div>
  281.                                                                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
  282.                                                                     aria-label="Close"></button>
  283.                                                             </div>
  284.                                                         </div>
  285.                                                     </div>
  286.                                                 </div>
  287.                                     
  288.                                                 <div style="z-index: 11">
  289.                                                     <div id="borderedTost3" class="toast overflow-hidden mt-3" role="alert" aria-live="assertive"
  290.                                                         aria-atomic="true">
  291.                                                         <div class="align-items-center text-white bg-warning border-0">
  292.                                                             <div class="d-flex">
  293.                                                                 <div class="toast-body">
  294.                                                                     Hello, world! This is a toast message.
  295.                                                                 </div>
  296.                                                                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
  297.                                                                     aria-label="Close"></button>
  298.                                                             </div>
  299.                                                         </div>
  300.                                                     </div>
  301.                                                 </div>
  302.                                     
  303.                                                 <div style="z-index: 11">
  304.                                                     <div id="borderedToast4" class="toast overflow-hidden mt-3" role="alert" aria-live="assertive"
  305.                                                         aria-atomic="true">
  306.                                                         <div class="align-items-center text-white bg-danger border-0">
  307.                                                             <div class="d-flex">
  308.                                                                 <div class="toast-body">
  309.                                                                     Hello, world! This is a toast message.
  310.                                                                 </div>
  311.                                                                 <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
  312.                                                                     aria-label="Close"></button>
  313.                                                             </div>
  314.                                                         </div>
  315.                                                     </div>
  316.                                                 </div>
  317.                                     
  318.                                             </div>
  319.                                     
  320.                                         </div>
  321.                                 </div>
  322.                             </div>
  323.                             <!-- end col -->
  325.                         </div>
  326.                         <!-- end row -->
  328.                         <div class="row">
  329.                             <div class="col-xl-12">
  330.                                 <div class="card">
  331.                                     <div class="card-header">
  332.                                         <h5 class="card-title">Live Example</h5>
  333.                                         <p class="card-title-desc">Click the button below to show a toast (positioned with our
  334.                                             utilities in the
  335.                                             lower right corner) that has been hidden by default.
  336.                                         </p>
  337.                                     </div>
  338.                                     <div class="card-body">
  339.                                         <form>
  340.                                             <div class="mb-3">
  341.                                                 <select class="form-select mt-2" id="selectToastPlacement">
  342.                                                     <option value="" selected>Select a position...</option>
  343.                                                     <option value="top-0 start-0">Top left ( top-0 start-0 )</option>
  344.                                                     <option value="top-0 start-50 translate-middle-x">Top center ( top-0 start-50 translate-middle-x )</option>
  345.                                                     <option value="top-0 end-0">Top right( top-0 end-0 ) </option>
  346.                                                     <option value="top-50 start-0 translate-middle-y">Middle left ( top-50 start-0 translate-middle-y )</option>
  347.                                                     <option value="top-50 start-50 translate-middle">Middle center ( top-50 start-50 translate-middle )</option>
  348.                                                     <option value="top-50 end-0 translate-middle-y">Middle right ( top-50 end-0 translate-middle-y )</option>
  349.                                                     <option value="bottom-0 start-0">Bottom left ( bottom-0 start-0 )</option>
  350.                                                     <option value="bottom-0 start-50 translate-middle-x">Bottom center ( bottom-0 start-50 translate-middle-x )</option>
  351.                                                     <option value="bottom-0 end-0">Bottom right ( bottom-0 end-0 )</option>
  352.                                                 </select>
  353.                                             </div>
  354.                                         </form>
  355.                                         <div aria-live="polite" aria-atomic="true" class="bd-example bg-light position-relative" style="height: 300px;">
  356.                                             <div class="toast-container position-absolute p-3" id="toastPlacement">
  357.                                                 <div class="toast">
  358.                                                     <div class="toast-header">
  359.                                                         <img src="/images/logo-sm.svg" class="rounded me-2"
  360.                                                             alt="..." height="20">
  361.                                                         <strong class="me-auto">Minia</strong>
  362.                                                         <small>11 mins ago</small>
  363.                                                         <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  364.                                                     </div>
  365.                                                     <div class="toast-body">
  366.                                                         Hello, world! This is a toast message.
  367.                                                     </div>
  368.                                                 </div>
  369.                                             </div>
  370.                                         </div>
  371.                                     </div>
  372.                                 </div>
  373.                             </div>
  374.                             <!-- end col -->
  376.                         </div>
  377.                         <!-- end row -->
  380.                     </div> <!-- container-fluid -->
  381.                 </div>
  382.                 <!-- End Page-content -->
  383.         
  384.                 {{ include('partials/footer.html.twig') }}
  386.             </div>
  387.             <!-- end main content-->
  388.         
  389.         </div>
  390.         <!-- END layout-wrapper -->
  392.         {{ include('partials/right-sidebar.html.twig') }}
  394.         {{ include('partials/vendor-scripts.html.twig') }}
  396.         <!-- Bootstrap Toasts Js -->
  397.         <script src="/js/pages/bootstrap-toasts.init.js"></script>
  399.         <script src="/js/app.js"></script>
  401.     </body>
  402. </html>