Ophir LOJKINE
7457370b8d
* Support hash-triggered toasts * Address toast review feedback * Render toast positioning in template * Avoid reopening initialized toasts * Fix white toast foreground color * Configure toasts declaratively * Simplify toast template styling * Address toast accessibility reviews
32 lines
1.9 KiB
Handlebars
32 lines
1.9 KiB
Handlebars
<div data-pre-init="toast-container" class="toast-container position-fixed p-3 mh-100 overflow-auto
|
|
{{~#if (eq position 'top-start')}} top-0 start-0" data-sqlpage-toast-position="top-start"
|
|
{{~else if (eq position 'top-center')}} top-0 start-50 translate-middle-x" data-sqlpage-toast-position="top-center"
|
|
{{~else if (eq position 'bottom-start')}} bottom-0 start-0" data-sqlpage-toast-position="bottom-start"
|
|
{{~else if (eq position 'bottom-center')}} bottom-0 start-50 translate-middle-x" data-sqlpage-toast-position="bottom-center"
|
|
{{~else if (eq position 'bottom-end')}} bottom-0 end-0" data-sqlpage-toast-position="bottom-end"
|
|
{{~else}} top-0 end-0" data-sqlpage-toast-position="top-end"{{/if}}>
|
|
<div
|
|
{{~#if id}} id="{{id}}"{{/if}}
|
|
{{~#if trigger}} data-toast-trigger="{{trigger}}"{{/if}} class="toast
|
|
{{~#if color}} toast-colored bg-{{color}} text-{{#if (eq color 'white')}}light{{else}}{{color}}{{/if}}-fg{{/if}}
|
|
{{~#if class}} {{class}}{{/if~}}
|
|
" role="status" aria-live="polite" aria-atomic="true" data-pre-init="toast" data-bs-delay="{{default duration 5000}}" data-bs-autohide="{{#if (eq duration 0)}}false{{else}}true{{/if}}">
|
|
<div class="toast-body d-flex align-items-start gap-2">
|
|
{{~#if icon~}}
|
|
<span class="flex-shrink-0" aria-hidden="true">{{~icon_img icon~}}</span>
|
|
{{~/if~}}
|
|
<div class="flex-fill overflow-auto">
|
|
{{~#if title~}}<div class="fw-bold mb-1">{{title}}</div>{{~/if~}}
|
|
{{~#if description_md~}}
|
|
<div class="toast-description toast-description-markdown">{{{markdown description_md}}}</div>
|
|
{{~else~}}
|
|
{{~#if description~}}<div class="toast-description">{{description}}</div>{{~/if~}}
|
|
{{~/if~}}
|
|
</div>
|
|
{{~#if (default dismissible true)~}}
|
|
<button type="button" class="btn-close flex-shrink-0" data-bs-dismiss="toast" aria-label="Close notification"></button>
|
|
{{~/if~}}
|
|
</div>
|
|
</div>
|
|
</div>
|