459 lines
22 KiB
HTML
459 lines
22 KiB
HTML
{% extends layout_path %}
|
|
|
|
{% load static %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}Toasts - UI elements{% endblock %}
|
|
|
|
{% block vendor_css %}
|
|
{{ block.super }}
|
|
<link rel="stylesheet" href="{% static 'vendor/libs/notyf/notyf.css' %}" />
|
|
<link rel="stylesheet" href="{% static 'vendor/libs/animate-css/animate.css' %}" />
|
|
{% endblock vendor_css %}
|
|
|
|
{% block vendor_js %}
|
|
{{ block.super }}
|
|
<script src="{% static 'vendor/libs/notyf/notyf.js' %}"></script>
|
|
{% endblock vendor_js %}
|
|
|
|
{% block page_js %}
|
|
{{ block.super }}
|
|
<script src="{% static 'js/ui-toasts.js' %}"></script>
|
|
{% endblock page_js %}
|
|
|
|
{% block content %}
|
|
<!-- Toast with Animation -->
|
|
<div class="bs-toast toast toast-ex animate__animated my-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small>11 mins ago</small>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">Hello, world! This is a toast message.</div>
|
|
</div>
|
|
<!--/ Toast with Animation -->
|
|
|
|
<!-- Toast with Placements -->
|
|
<div class="bs-toast toast toast-placement-ex m-2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small>11 mins ago</small>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body">Hello, world! This is a toast message.</div>
|
|
</div>
|
|
<!-- Toast with Placements -->
|
|
|
|
<!-- Bootstrap Toasts with Animation -->
|
|
<div class="card mb-6">
|
|
<h5 class="card-header">Bootstrap Toasts Example with Animation</h5>
|
|
<div class="card-body">
|
|
<div class="row gx-3 gy-2 align-items-center">
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="selectType">Type</label>
|
|
<select id="selectType" class="form-select color-dropdown">
|
|
<option value="bg-primary" selected>Primary</option>
|
|
<option value="bg-secondary">Secondary</option>
|
|
<option value="bg-success">Success</option>
|
|
<option value="bg-danger">Danger</option>
|
|
<option value="bg-warning">Warning</option>
|
|
<option value="bg-info">Info</option>
|
|
<option value="bg-dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="selectAnimation">Animation</label>
|
|
<select id="selectAnimation" class="form-select animation-dropdown">
|
|
<optgroup label="Attention Seekers">
|
|
<option value="animate__fade">fade</option>
|
|
<option value="animate__bounce">bounce</option>
|
|
<option value="animate__flash">flash</option>
|
|
<option value="animate__pulse">pulse</option>
|
|
<option value="animate__rubberBand">rubberBand</option>
|
|
<option value="animate__shakeX">shake</option>
|
|
<option value="animate__swing">swing</option>
|
|
<option value="animate__tada" selected>tada</option>
|
|
<option value="animate__wobble">wobble</option>
|
|
<option value="animate__jello">jello</option>
|
|
<option value="animate__heartBeat">heartBeat</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Bouncing Entrances">
|
|
<option value="animate__bounceIn">bounceIn</option>
|
|
<option value="animate__bounceInDown">bounceInDown</option>
|
|
<option value="animate__bounceInLeft">bounceInLeft</option>
|
|
<option value="animate__bounceInRight">bounceInRight</option>
|
|
<option value="animate__bounceInUp">bounceInUp</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Fading Entrances">
|
|
<option value="animate__fadeIn">fadeIn</option>
|
|
<option value="animate__fadeInDown">fadeInDown</option>
|
|
<option value="animate__fadeInDownBig">fadeInDownBig</option>
|
|
<option value="animate__fadeInLeft">fadeInLeft</option>
|
|
<option value="animate__fadeInLeftBig">fadeInLeftBig</option>
|
|
<option value="animate__fadeInRight">fadeInRight</option>
|
|
<option value="animate__fadeInRightBig">fadeInRightBig</option>
|
|
<option value="animate__fadeInUp">fadeInUp</option>
|
|
<option value="animate__fadeInUpBig">fadeInUpBig</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Flippers">
|
|
<option value="animate__flip">flip</option>
|
|
<option value="animate__flipInX">flipInX</option>
|
|
<option value="animate__flipInY">flipInY</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Lightspeed">
|
|
<option value="animate__lightSpeedInRight">lightSpeedIn</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Rotating Entrances">
|
|
<option value="animate__rotateIn">rotateIn</option>
|
|
<option value="animate__rotateInDownLeft">rotateInDownLeft</option>
|
|
<option value="animate__rotateInDownRight">rotateInDownRight</option>
|
|
<option value="animate__rotateInUpLeft">rotateInUpLeft</option>
|
|
<option value="animate__rotateInUpRight">rotateInUpRight</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Sliding Entrances">
|
|
<option value="animate__slideInUp">slideInUp</option>
|
|
<option value="animate__slideInDown">slideInDown</option>
|
|
<option value="animate__slideInLeft">slideInLeft</option>
|
|
<option value="animate__slideInRight">slideInRight</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Zoom Entrances">
|
|
<option value="animate__zoomIn">zoomIn</option>
|
|
<option value="animate__zoomInDown">zoomInDown</option>
|
|
<option value="animate__zoomInLeft">zoomInLeft</option>
|
|
<option value="animate__zoomInRight">zoomInRight</option>
|
|
<option value="animate__zoomInUp">zoomInUp</option>
|
|
</optgroup>
|
|
|
|
<optgroup label="Specials">
|
|
<option value="animate__jackInTheBox">jackInTheBox</option>
|
|
<option value="animate__rollIn">rollIn</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="showToastPlacement"> </label>
|
|
<button id="showToastAnimation" class="btn btn-primary d-block">Show Toast</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ Bootstrap Toasts with Animation -->
|
|
|
|
<!-- Bootstrap Toasts with Placement -->
|
|
<div class="card mb-6">
|
|
<h5 class="card-header">Bootstrap Toasts Example With Placement</h5>
|
|
<div class="card-body">
|
|
<div class="row gx-3 gy-2 align-items-center">
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="selectTypeOpt">Type</label>
|
|
<select id="selectTypeOpt" class="form-select color-dropdown">
|
|
<option value="bg-primary" selected>Primary</option>
|
|
<option value="bg-secondary">Secondary</option>
|
|
<option value="bg-success">Success</option>
|
|
<option value="bg-danger">Danger</option>
|
|
<option value="bg-warning">Warning</option>
|
|
<option value="bg-info">Info</option>
|
|
<option value="bg-dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="selectPlacement">Placement</label>
|
|
<select class="form-select placement-dropdown" id="selectPlacement">
|
|
<option value="top-0 start-0">Top left</option>
|
|
<option value="top-0 start-50 translate-middle-x">Top center</option>
|
|
<option value="top-0 end-0">Top right</option>
|
|
<option value="top-50 start-0 translate-middle-y">Middle left</option>
|
|
<option value="top-50 start-50 translate-middle">Middle center</option>
|
|
<option value="top-50 end-0 translate-middle-y">Middle right</option>
|
|
<option value="bottom-0 start-0">Bottom left</option>
|
|
<option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
|
|
<option value="bottom-0 end-0">Bottom right</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<label class="form-label" for="showToastPlacement"> </label>
|
|
<button id="showToastPlacement" class="btn btn-primary d-block">Show Toast</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/ Bootstrap Toasts with Placement -->
|
|
|
|
<!-- Bootstrap Toasts Styles -->
|
|
<div class="card mb-6">
|
|
<h5 class="card-header">Bootstrap Toasts Styles</h5>
|
|
<div class="row g-0">
|
|
<div class="col-md-6 p-6">
|
|
<div class="small fw-medium mb-4">Default</div>
|
|
<div class="toast-container position-relative">
|
|
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<small class="text-body-secondary">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>
|
|
<div class="col-md-6 ui-bg-overlay-container p-6">
|
|
<div class="ui-bg-overlay bg-dark rounded-end-bottom"></div>
|
|
<div class="text-white small fw-medium mb-4">Translucent</div>
|
|
|
|
<div class="toast-container position-relative">
|
|
<div class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-primary"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-secondary"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-success"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-danger"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-warning"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-info"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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 class="bs-toast toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<i class="icon-base ti tabler-bell icon-xs me-2 text-dark"></i>
|
|
<div class="me-auto fw-medium">Bootstrap</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<!--/ Bootstrap Toasts Styles -->
|
|
|
|
<!-- Notyf Demo -->
|
|
<div class="card">
|
|
<h5 class="card-header">Notyf Notifications</h5>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<!-- Message Input -->
|
|
<div class="col-lg-6 col-xl-3">
|
|
<div class="mb-4">
|
|
<label class="form-label" for="message">Message</label>
|
|
<textarea class="form-control" id="message" rows="3" placeholder="Enter a message..."></textarea>
|
|
</div>
|
|
<!-- Options -->
|
|
<div class="mb-4">
|
|
<div class="form-check">
|
|
<input id="dismissible" class="form-check-input" type="checkbox" />
|
|
<label class="form-check-label" for="dismissible">Dismissible</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="ripple" class="form-check-input" type="checkbox" checked />
|
|
<label class="form-check-label" for="ripple">Ripple Effect</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Type Selection -->
|
|
<div class="col-lg-6 col-xl-3">
|
|
<div class="mb-4" id="notificationTypeGroup">
|
|
<label class="form-label">Notification Type</label>
|
|
<div class="form-check">
|
|
<input type="radio" id="successRadio" name="notificationType" class="form-check-input" value="success" checked />
|
|
<label class="form-check-label" for="successRadio">Success</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" id="errorRadio" name="notificationType" class="form-check-input" value="error" />
|
|
<label class="form-check-label" for="errorRadio">Error</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" id="infoRadio" name="notificationType" class="form-check-input" value="info" />
|
|
<label class="form-check-label" for="infoRadio">Info</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input type="radio" id="warningRadio" name="notificationType" class="form-check-input" value="warning" />
|
|
<label class="form-check-label" for="warningRadio">Warning</label>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="form-label" for="duration">Duration (ms)</label>
|
|
<input id="duration" type="number" class="form-control" placeholder="Enter duration in milliseconds" value="3000" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Duration Input -->
|
|
<div class="col">
|
|
<label class="form-label">Position Type</label>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input id="positionleft" class="form-check-input" type="radio" name="positionx" value="left" />
|
|
<label class="form-check-label" for="positionleft">left Position</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="positioncenter" class="form-check-input" type="radio" name="positionx" value="center" />
|
|
<label class="form-check-label" for="positioncenter">center Position</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="positionright" class="form-check-input" type="radio" name="positionx" value="right" checked />
|
|
<label class="form-check-label" for="positionright">right Position</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="form-check">
|
|
<input id="positionTop" class="form-check-input" type="radio" name="positiony" value="top" checked />
|
|
<label class="form-check-label" for="positionTop">Top Position</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input id="positionBottom" class="form-check-input" type="radio" name="positiony" value="bottom" />
|
|
<label class="form-check-label" for="positionBottom">Bottom Position</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div class="d-flex gap-3 flex-wrap">
|
|
<button class="btn btn-primary" id="showNotification">Show Notification</button>
|
|
<button class="btn btn-danger" id="clearNotifications">Clear Notifications</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--/ Notyf Demo -->
|
|
{% endblock %}
|