mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-15 14:38:27 +00:00
83 lines
3.4 KiB
Plaintext
83 lines
3.4 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: HTML + Javascript
|
|
id: usage-default
|
|
- 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_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,
|
|
register_on=["alpine:init", "htmx:afterSwap"]
|
|
) }}
|
|
{% endset %}
|
|
|
|
{% set code_script %}
|
|
{% include "components/dialog-script.njk" %}
|
|
{% endset %}
|
|
|
|
{{ code_preview("alert-dialog", code_script | prettyHtml ~ code_html | prettyHtml) }}
|
|
|
|
<h2 id="usage"><a href="#usage">Usage</a></h2>
|
|
|
|
<h3 id="usage-default"><a href="#usage-default">HTML + Javascript</a></h3>
|
|
|
|
<div class="alert my-6">
|
|
{% lucide "circle-alert" %}
|
|
<h2>This component requires Javascript.</h2>
|
|
<section>
|
|
<p>You will need to include the Javascript (Alpine.js) code provided below before the HTML code for this component. As with all interactive components, you will need to add some Alpine.js properties to certain elements (e.g. <code class="text-xs">x-bind</code>, <code class="text-xs">x-data</code>, <code class="text-xs">@click</code>).</p>
|
|
</section>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{% from "components/tabs.njk" import tabs %}
|
|
{% set tabsets = [
|
|
{ tab: "HTML", panel: code_block(code_html | prettyHtml) },
|
|
{ tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml) }
|
|
] %}
|
|
{{ tabs(id="alert-dialog", tabsets=tabsets) }}
|
|
|
|
<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") }} |