Struct BrowserFrame

pub struct BrowserFrame { /* private fields */ }

Available on crate feature yew only.

BrowserFrame Component

A Yew 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 yew::prelude::*;
use browser_rs::yew::BrowserFrame;

#[function_component(App)]
pub fn app() -> Html {
    let on_close = Callback::from(|_| log::info!("Browser closed"));

    html! {
        <BrowserFrame
            url={"https://opensass.org".to_string()}
            on_close={on_close}
        >
            <p>{ "Your embedded content here." }</p>
        </BrowserFrame>
    }
}

With Custom Buttons

use yew::prelude::*;
use browser_rs::yew::BrowserFrame;

#[function_component(App)]
pub fn app() -> Html {
    let custom_button = html! {
        <button>{ "Custom Button" }</button>
    };

    html! {
        <BrowserFrame
            url={"https://opensass.org".to_string()}
            custom_buttons={vec![custom_button]}
        >
            <p>{ "Custom button in the header!" }</p>
        </BrowserFrame>
    }
}

Styling and Class Customization

use yew::prelude::*;
use browser_rs::yew::BrowserFrame;

#[function_component(App)]
pub fn app() -> Html {
    html! {
        <BrowserFrame
            url={"https://opensass.org".to_string()}
            class={"rounded-xl shadow-xl"}
            input_class={"bg-gray-200 text-gray-900"}
            container_class={"flex-1 mx-4"}
        >
            <p>{ "Styled browser frame!" }</p>
        </BrowserFrame>
    }
}

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.

Trait Implementations

impl BaseComponent for BrowserFrame

where Self: 'static,

type Message = ()

The Component’s Message.

type Properties = BrowserFrameProps

The Component’s Properties.

fn create(ctx: &Context<Self>) -> Self

Creates a component.

fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool

Updates component’s internal state.

fn changed( &mut self, _ctx: &Context<Self>, _old_props: &Self::Properties, ) -> bool

React to changes of component properties.

fn view(&self, ctx: &Context<Self>) -> HtmlResult

Returns a component layout to be rendered.

fn rendered(&mut self, _ctx: &Context<Self>, _first_render: bool)

Notified after a layout is rendered.

fn destroy(&mut self, _ctx: &Context<Self>)

Notified before a component is destroyed.

fn prepare_state(&self) -> Option<String>

Prepares the server-side state.

impl Debug for BrowserFrame

fn fmt(&self, f: &mut Formatter<'_>) -> Result

Formats the value using the given formatter.

impl FunctionProvider for BrowserFrame

type Properties = BrowserFrameProps

Properties for the Function Component.

fn run(ctx: &mut HookContext, props: &Self::Properties) -> HtmlResult

Render the component. This function returns the Html to be rendered for the component.