Dialog Tailwind
Rust UI component that displays a modal dialog that the user can interact with.
dialog
use leptos::prelude::*;
use crate::components::ui::button::{Button, ButtonVariant};
use crate::components::ui::dialog_tailwind::{
Dialog, DialogClose, DialogFooter, DialogTitle, DialogTrigger,
};
use crate::components::ui::form::{Form, FormField};
use crate::components::ui::input::Input;
#[component]
pub fn DemoDialogTailwind() -> impl IntoView {
view! {
<div class="p-5">
<DialogTrigger>"Open modal"</DialogTrigger>
<Dialog>
<div class="flex flex-col gap-4">
<DialogTitle>"Reset your password"</DialogTitle>
<Form>
<FormField>
<label>"Email"</label>
<Input />
</FormField>
<DialogFooter>
<DialogClose variant=ButtonVariant::Outline>"Close"</DialogClose>
<Button>"Reset Password"</Button>
</DialogFooter>
</Form>
</div>
</Dialog>
</div>
}
}
Installation
You can run either of the following commands:
# cargo install ui-cli --forceui add demo_dialog_tailwindui add dialog_tailwindUpdate the imports to match your project setup.
Copy and paste the following code into your project:
components/ui/dialog_tailwind.rs
use leptos::prelude::*;
use leptos_ui::clx;
use crate::components::ui::button::{Button, ButtonVariant};
mod components {
use super::*;
clx! {DialogTitle, h3, "font-bold text-2xl"}
clx! {DialogFooter, div, "flex justify-end gap-2"}
clx! {RootCloseButton, button, "absolute top-4 right-4"}
clx! {RootDialog, dialog,
"p-4 rounded-md w-full max-w-[600px]",
"bg-card text-primary",
"backdrop:bg-gray-400 backdrop:bg-black/50",
// * Animations
"open:animate-scale-in open:backdrop:animate-fade-in",
}
}
pub use components::*;
#[component]
pub fn DialogTrigger(
#[prop(into, optional)] class: Signal<String>,
#[prop(into, optional)] variant: Signal<ButtonVariant>,
children: Children,
) -> impl IntoView {
view! {
<Button onclick="modal.showModal()" class=class variant=variant>
{children()}
</Button>
}
}
#[component]
pub fn Dialog(#[prop(into, optional)] class: Signal<String>, children: Children) -> impl IntoView {
view! {
<RootDialog class=class onclose="modalForm.reset()" id="modal" tabindex="-1">
<RootCloseButton onclick="modal.close()">"X"</RootCloseButton>
{children()}
</RootDialog>
}
}
#[component]
pub fn DialogClose(
#[prop(into, optional)] class: Signal<String>,
#[prop(into, optional)] variant: Signal<ButtonVariant>,
children: Children,
) -> impl IntoView {
view! {
<Button onclick="modal.close()" class=class variant=variant>
{children()}
</Button>
}
}
Update the imports to match your project setup.
Usage
// Coming soon 🦀