Function BrowserFrame

pub fn BrowserFrame(props: BrowserFrameProps) -> Element

Available on crate feature dio only.

BrowserFrame Component

A Dioxus component that emulates a browser window, complete with customizable controls (close, minimize, maximize), an address bar, and optional custom buttons. It wraps its child components in a browser-like interface and provides various hooks for interaction events such as focus, hover, and clicks.

Features

• Configurable address bar and controls (show/hide, read-only).
• Fully customizable styling and classes for different parts of the frame.
• Emits callbacks for URL changes and control interactions (close, minimize, maximize).
• Supports additional custom buttons and slots for user-defined functionality.
• Keyboard navigation support (Escape to close).

Examples

Basic Usage

use dioxus::prelude::*;
use browser_rs::dioxus::BrowserFrame;

fn app() -> Element {
    let on_close = Callback::new(|_| log::info!("Browser closed"));

    rsx! {
        BrowserFrame {
            url: "https://opensass.org",
            on_close: on_close,
            children: rsx! {
                p { "Your embedded content here." }
            }
        }
    }
}

With Custom Buttons

use dioxus::prelude::*;
use browser_rs::dioxus::BrowserFrame;

fn app() -> Element {
    let custom_button = rsx! {
        button { "Custom Button" }
    };

    rsx! {
        BrowserFrame {
            url: "https://opensass.org",
            custom_buttons: vec![custom_button],
            children: rsx! {
                p { "Custom button in the header!" }
            }
        }
    }
}

Styling and Class Customization

use dioxus::prelude::*;
use browser_rs::dioxus::BrowserFrame;

fn app() -> Element {
    rsx! {
        BrowserFrame {
            url: "https://opensass.org",
            class: "rounded-xl shadow-xl",
            input_class: "bg-gray-200 text-gray-900",
            container_class: "flex-1 mx-4",
            children: rsx! {
                p { "Styled browser frame!" }
            }
        }
    }
}

Behavior

• The BrowserFrame uses a BrowserHeader subcomponent for controls and an address bar, and a BrowserContent subcomponent for rendering child content.
• The on_url_change callback is called when the address bar’s URL changes.
• Control buttons (close, minimize, maximize) emit their respective callbacks when interacted with.
• Keyboard navigation is enabled: Escape key triggers the on_close callback.

Notes

• Supports both light and dark themes through provided classes and styles.
• Default styling can be customized via class, style, and other related props.
• Accessibility attributes (aria-*) are provided.