mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-14 14:08:18 +00:00
84 lines
3.3 KiB
Plaintext
84 lines
3.3 KiB
Plaintext
---
|
|
layout: layouts/component.njk
|
|
title: Alert Dialog
|
|
description: A modal dialog that interrupts the user with important content and expects a response.
|
|
toc:
|
|
- label: Usage
|
|
id: usage
|
|
children:
|
|
- label: Jinja or Nunjucks
|
|
id: usage-jinja
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
{% from "components/dialog.njk" import dialog %}
|
|
|
|
{% set code %}{% set footer %}
|
|
<button class="btn-outline" @click="open = false">Cancel</button>
|
|
<button class="btn-primary" @click="open = false">Continue</button>
|
|
{% endset %}
|
|
{{ dialog(
|
|
id="alert-dialog",
|
|
title="Are you absolutely sure?",
|
|
description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
|
|
trigger="Open alert dialog",
|
|
trigger_attrs={"class": "btn-outline"},
|
|
footer=footer,
|
|
close_button=false,
|
|
close_on_overlay_click=false,
|
|
register_on=["alpine:init", "htmx:afterSwap"]
|
|
) }}{% endset %}
|
|
{{ code_preview("alert-dialog", code | prettyHtml) }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<p class="prose my-6">The Alert Dialog component uses the same Alpine.js code as the <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> component with one small difference: we set <code>initialCloseOnOverlayClick</code> to <code>false</code> to prevent the dialog from closing when the overlay is clicked.</p>
|
|
|
|
<h4 class="badge-secondary">HTML</h4>
|
|
|
|
<section class="my-6">
|
|
{% set code_html %}{% set footer %}
|
|
<button class="btn-outline" @click="open = false">Cancel</button>
|
|
<button class="btn-primary" @click="open = false">Continue</button>
|
|
{% endset %}
|
|
{{ dialog(
|
|
id="alert-dialog",
|
|
title="Are you absolutely sure?",
|
|
description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
|
|
trigger="Open alert dialog",
|
|
trigger_attrs={"class": "btn-outline"},
|
|
footer=footer,
|
|
close_button=false,
|
|
close_on_overlay_click=false
|
|
) }}{% endset %}
|
|
{{ code_block(code_html | prettyHtml) }}
|
|
</section>
|
|
|
|
<h4 class="badge-secondary">Javascript (Alpine.js)</h4>
|
|
|
|
<section class="my-6">
|
|
{% set code_script %}{% include "components/dialog-script.njk" %}{% endset %}
|
|
{{ code_block(code_script | prettyHtml) }}
|
|
</section>
|
|
|
|
<h3 id="usage-jinja"><a href="#usage-jinja">Jinja or Nunjucks</a></h3>
|
|
|
|
<p class="my-6 prose">If you use Jinja (or Nunjucks), you can use the <code>dialog()</code> macro directly, making sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks). <a href="/installation#jinja-and-nunjucks">Read more about using Basecoat with Jinja and Nunjucks</a>.</p>
|
|
|
|
{% set raw_code %}{% raw %}{% set footer %}
|
|
<button class="btn-outline" @click="open = false">Cancel</button>
|
|
<button class="btn-primary" @click="open = false">Continue</button>
|
|
{% endset %}
|
|
{{ dialog(
|
|
id="demo-alert-dialog",
|
|
title="Are you absolutely sure?",
|
|
description="This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
|
|
trigger="Open Alert Dialog",
|
|
trigger_attrs={"class": "btn-outline"},
|
|
footer=footer,
|
|
close_button=False,
|
|
close_on_overlay_click=False
|
|
) }}{% endraw %}
|
|
{% endset%}
|
|
{{ code_block(raw_code, "jinja") }} |