mirror of
https://github.com/hunvreus/basecoat.git
synced 2026-11-13 21:58:17 +00:00
122 lines
4.5 KiB
Plaintext
122 lines
4.5 KiB
Plaintext
---
|
|
layout: layouts/page.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 and Nunjucks
|
|
id: usage-macro
|
|
---
|
|
|
|
{% from "macros/code_preview.njk" import code_preview %}
|
|
{% from "macros/code_block.njk" import code_block %}
|
|
{% from "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 %}
|
|
<script>
|
|
{% fetchCode "src/js/dialog.js" %}
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
window.basecoat.registerDialog(Alpine);
|
|
});
|
|
</script>
|
|
{% 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>
|
|
</div>
|
|
|
|
<section class="prose">
|
|
<p>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>
|
|
|
|
<p>You can include the Javascript code provided below, load it as an individual file or use the CLI. Some Alpine.js properties are also required on 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 class="flex flex-wrap gap-2 my-6">
|
|
<a class="badge-outline" href="/installation/#install-js">
|
|
Components with Javascript
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="/installation/#install-cli">
|
|
Use the CLI
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/js/dialog.js" target="_blank">
|
|
Individual JS file (dialog.js)
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
</div>
|
|
|
|
{% from "tabs.njk" import tabs %}
|
|
{% set tabsets = [
|
|
{ tab: "HTML", panel: code_block(code_html | prettyHtml, class="") },
|
|
{ tab: "Javascipt (Alpine.js)", panel: code_block(code_script | prettyHtml, class="") }
|
|
] %}
|
|
{{ tabs(id="alert-dialog", tabsets=tabsets) }}
|
|
|
|
<h3 id="usage-macro"><a href="#usage-macro">Jinja and Nunjucks</a></h3>
|
|
|
|
<div class="prose">
|
|
<p>You can use the <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-xs">dialog()</code> Nunjucks or Jinja macro for this component. If you use one of the macros, make sure to set <code>close_on_overlay_click</code> and <code>close_button</code> to <code>False</code> (or <code>false</code> for Nunjucks).</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2 my-6">
|
|
<a class="badge-outline" href="/installation/#install-macros" target="_blank">
|
|
Use Nunjucks or Jinja macros
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/jinja/dialog.html.jinja" target="_blank">
|
|
Jinja macro
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
<a class="badge-outline" href="https://github.com/hunvreus/basecoat/blob/main/src/nunjucks/dialog.njk" target="_blank">
|
|
Nunjucks macro
|
|
{% lucide "arrow-right" %}
|
|
</a>
|
|
</div>
|
|
|
|
{% 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") }} |