Struct ModalProps 

pub struct ModalProps {

    pub show: Signal<bool>,
    pub title: String,
    pub header: Option<Element>,
    pub body: Option<Element>,
    pub footer: Option<Element>,
    pub size: ModalSize,
    pub backdrop_close: bool,
    pub keyboard_close: bool,
    pub show_close: bool,
    pub centered: bool,
    pub scrollable: bool,
    pub fullscreen: ModalFullscreen,
    pub class: String,
    pub content_class: String,
    pub header_class: String,
    pub body_class: String,
    pub footer_class: String,
    pub style: String,
    pub backdrop_class: String,
    pub backdrop_style: String,
    pub on_dismiss: Option<EventHandler<()>>,
    pub children: Element,
    /* private fields */
}

Bootstrap Modal component — signal-driven, no JavaScript.

Replaces Bootstrap’s <div class="modal"> + JavaScript with a signal-controlled component.

Bootstrap HTML → Dioxus

<!-- Bootstrap HTML (requires JavaScript) -->
<div class="modal fade" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Title</h5></div>
      <div class="modal-body"><p>Body</p></div>
      <div class="modal-footer"><button class="btn btn-primary">OK</button></div>
    </div>
  </div>
</div>

// Dioxus equivalent — no JavaScript needed
let mut show = use_signal(|| false);
rsx! {
    Button { onclick: move |_| show.set(true), "Open Modal" }
    Modal {
        show: show,
        title: "Confirm Action",
        size: ModalSize::Lg,
        centered: true,
        body: rsx! { p { "Are you sure?" } },
        footer: rsx! {
            Button { color: Color::Secondary, onclick: move |_| show.set(false), "Cancel" }
            Button { color: Color::Primary, "Confirm" }
        },
    }
}

Props

• show — Signal<bool> controlling visibility
• title — modal title text
• body — modal body content (Element)
• footer — modal footer content (Element)
• size — ModalSize::Sm, Default, Lg, Xl
• fullscreen — ModalFullscreen::Off, Always, SmDown..XxlDown
• centered — vertically center the modal
• scrollable — scrollable modal body
• backdrop_close — close when clicking backdrop (default: true)
• keyboard_close — close on the Escape key (default: true)

Fields

show: Signal<bool>

Signal controlling modal visibility.

title: String

Modal title.

header: Option<Element>

Rich header content, rendered inside .modal-header in place of the plain title. Bootstrap’s header holds whatever markup the caller wants — an icon and a title, a title and a badge — and a String title cannot express that. Card already has this slot, for the same reason.

body: Option<Element>

Modal body content.

footer: Option<Element>

Modal footer content.

size: ModalSize

Modal size.

backdrop_close: bool

Close when clicking the backdrop.

keyboard_close: bool

Close when the Escape key is pressed (Bootstrap’s keyboard option).

show_close: bool

Show the close button in the header.

centered: bool

Center the modal vertically.

scrollable: bool

Allow the modal body to scroll.

fullscreen: ModalFullscreen

Fullscreen mode.

class: String

Additional CSS classes for the modal-dialog.

content_class: String

Additional CSS classes for the modal-content div.

This and the three below exist because .modal-content, .modal-header, .modal-body and .modal-footer are the elements a caller most often needs to reach — a border, a padding override, a scroll height. Without them the only route is hand-written Bootstrap markup, which is what the typed component replaces. Card already carries the equivalent set.

header_class: String

Additional CSS classes for the modal-header div.

body_class: String

Additional CSS classes for the modal-body div.

footer_class: String

Additional CSS classes for the modal-footer div.

style: String

Inline style, appended to the modal element’s own. Declared explicitly rather than left to the attribute spread because this element always sets style itself (display: block, which replaces Bootstrap’s JS-driven show): a caller style arriving through ..attributes would be a second style attribute on one element, and losing the fight would render the modal invisible.

backdrop_class: String

Additional CSS classes for the backdrop element.

backdrop_style: String

Inline style for the backdrop element. Bootstrap fixes the backdrop and the modal at adjacent z-indexes; a page that stacks its own overlays around them needs to be able to say where these two sit.

on_dismiss: Option<EventHandler<()>>

Called whenever the modal closes itself — the close button, a backdrop click, or Escape. show is set to false first, so this is for the work that must accompany closing rather than for the closing itself.

Without it, state a caller clears in its own close handler is skipped by every dismissal path the component owns, and the only way to be sure was to switch all three off. Bootstrap fires hide.bs.modal/hidden.bs.modal for the same reason.

children: Element

Child elements (alternative to body prop for custom layout).

Implementations

impl ModalProps

pub fn builder() -> ModalPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

Create a builder for building ModalProps. On the builder, call .show(...), .title(...)(optional), .header(...)(optional), .body(...)(optional), .footer(...)(optional), .size(...)(optional), .backdrop_close(...)(optional), .keyboard_close(...)(optional), .show_close(...)(optional), .centered(...)(optional), .scrollable(...)(optional), .fullscreen(...)(optional), .class(...)(optional), .content_class(...)(optional), .header_class(...)(optional), .body_class(...)(optional), .footer_class(...)(optional), .style(...)(optional), .backdrop_class(...)(optional), .backdrop_style(...)(optional), .on_dismiss(...)(optional), .attributes(...)(optional), .children(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of ModalProps.

Trait Implementations

impl Clone for ModalProps

fn clone(&self) -> ModalProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl PartialEq for ModalProps

fn eq(&self, other: &ModalProps) -> bool

Equality operator ==.

fn ne(&self, other: &Rhs) -> bool

Inequality operator !=.

impl Properties for ModalProps

where Self: Clone,

type Builder = ModalPropsBuilder<((), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), (), ())>

The type of the builder for this component. Used to create “in-progress” versions of the props.

fn builder() -> Self::Builder

Create a builder for this component.

fn memoize(&mut self, new: &Self) -> bool

Make the old props equal to the new props. Return if the props were equal and should be memoized.

fn into_vcomponent<M>( self, render_fn: impl ComponentFunction<Self, M>, ) -> VComponent

where M: 'static,

Create a component from the props.

impl StructuralPartialEq for ModalProps