Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

use leptos::prelude::*;
use singlestage::{button::*, dialog::*, input::*, label::*};

#[component]
pub fn DialogExample() -> impl IntoView {
    view! {
        <Dialog>
            <DialogTrigger slot>
                <Button variant="outline">"Edit Profile"</Button>
            </DialogTrigger>

            <DialogClose />

            <DialogHeader>
                <DialogTitle>"Edit profile"</DialogTitle>
                <DialogDescription>
                    "Make changes to your profile here. Click save when you're done."
                </DialogDescription>
            </DialogHeader>

            <DialogContent>
                <form class="grid gap-4">
                    <div class="grid gap-3">
                        <Label label_for="demo-dialog-edit-profile-name">"Name"</Label>
                        <Input
                            value="Pedro Duarte"
                            id="demo-dialog-edit-profile-name"
                            autofocus=true
                        />
                    </div>
                    <div class="grid gap-3">
                        <Label label_for="demo-dialog-edit-profile-username">"Username"</Label>
                        <Input value="@peduarte" id="demo-dialog-edit-profile-username" />
                    </div>
                </form>
            </DialogContent>

            <DialogFooter>
                <Button variant="outline">"Cancel"</Button>
                <Button>"Save changes"</Button>
            </DialogFooter>

        </Dialog>
    }
}

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

use leptos::prelude::*;
use singlestage::{button::*, dialog::*};

#[component]
pub fn DialogAlertExample() -> impl IntoView {
    view! {
        <Dialog alert=true>
            <DialogTrigger slot>
                <Button variant="destructive">"Delete account"</Button>
            </DialogTrigger>
            <DialogHeader>
                <DialogTitle>"Are you absolutely sure?"</DialogTitle>
                <DialogDescription>
                    "This action cannot be undone.
                    This will permanently delete your account 
                    and remove your data from our servers."
                </DialogDescription>
            </DialogHeader>
            <DialogFooter>
                <Button variant="outline">"Cancel"</Button>
                <Button variant="destructive">"Yes, delete account"</Button>
            </DialogFooter>
        </Dialog>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::dialog::*;

#[component]
pub fn DialogAnatomy -> impl IntoView {
    view!{
        <Dialog>
            <DialogTrigger slot />
            <DialogHeader>
                <DialogTitle />
                <DialogDescription />
            </DialogHeader>
            <DialogContent/>
            <DialogFooter />
            <DialogClose/>
        </Dialog>
    }
}

API Reference

Dialog

Contains all the parts of an alert dialog.

Custom Attributes
Name	Type	Default	Description
alert	bool	false	Specify whether or not alert styling should be used.

Implements global and dialog attributes.

DialogClose

An optional button that renders in the top-right corner and closes the dialog when clicked.

Implements global and button attributes.

DialogContent

Contains content to be rendered in the main body of the dialog.

Implements global attributes.

DialogDescription

A short description/subheading describing dialog content.

Implements global attributes.

DialogFooter

Displays at the bottom of the dialog, contains calls to action. Submit events such as button clicks in this area automatically trigger closing of the dialog.

Implements global attributes.

DialogHeader

Contains the dialog title and a description to be rendered in the open dialog.

Implements global attributes.

DialogTitle

The title of the dialog.

Implements global attributes.

DialogTrigger

Used to wrap other elements and trigger the dialog on click.

Note: the slot attribute is required.