Skip to content

Commit 3bdcb8b

Browse files
wiseaidevwiseaidev
authored
Merge pull request #3 from opensass/dioxus
feat: use inline style && add dioxus support
2 parents 6163a01 + 18fa393 commit 3bdcb8b

File tree

19 files changed

+5159
-76
lines changed

19 files changed

+5159
-76
lines changed

‎Cargo.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ leptos = { version = "0.8.0", optional = true }
2121
web-sys = { version = "0.3.77", features = [
2222
"Document",
2323
"Window",
24+
"Element"
2425
]}
2526
gloo-timers = "0.3.0"
2627
strum = "0.27.1"

‎DIOXUS.md

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# 🧬 Browser RS Dioxus Usage
2+
3+
Adding Browser RS to your project is simple:
4+
5+
1. Make sure your project is set up with **Dioxus**. Refer to the [Dioxus Getting Started Guide](https://dioxuslabs.com/learn/0.6/getting_started) for setup instructions.
6+
7+
1. Add the **browser-rs** library to your dependencies by including it in your `Cargo.toml` file:
8+
9+
```sh
10+
cargo add browser-rs --features=dio
11+
```
12+
13+
1. Import the `BrowserFrame` component into your Dioxus application to simulate a browser window with rich customization.
14+
15+
## 🛠️ Usage
16+
17+
Follow these steps to integrate the `BrowserFrame` into your Dioxus application:
18+
19+
### Step 1: Import the Required Components
20+
21+
Import the `BrowserFrame` component and any required Dioxus types:
22+
23+
```rust
24+
use dioxus::prelude::*;
25+
use browser_rs::dioxus::BrowserFrame;
26+
```
27+
28+
### Step 2: Basic Implementation
29+
30+
Use the `BrowserFrame` in your app to render content inside a simulated browser window:
31+
32+
```rust
33+
use dioxus::prelude::*;
34+
use browser_rs::dioxus::BrowserFrame;
35+
36+
37+
fn app() -> Element {
38+
let on_close = Callback::new(|_| log::info!("Browser closed"));
39+
40+
rsx! {
41+
BrowserFrame {
42+
url: "https://opensass.org",
43+
on_close: on_close,
44+
children: rsx! {
45+
p { "Your embedded content here." }
46+
}
47+
}
48+
}
49+
}
50+
```
51+
52+
### Step 3: Customize the BrowserFrame
53+
54+
You can customize the appearance and behavior of the browser frame using various props:
55+
56+
```rust
57+
use dioxus::prelude::*;
58+
use browser_rs::dioxus::BrowserFrame;
59+
60+
61+
fn app() -> Element {
62+
let custom_button = rsx! {
63+
button { "Custom Button" }
64+
};
65+
66+
rsx! {
67+
BrowserFrame {
68+
url: "https://opensass.org",
69+
class: "rounded-xl shadow-xl",
70+
input_class: "bg-gray-200 text-gray-900",
71+
container_class: "flex-1 mx-4",
72+
custom_buttons: vec![custom_button],
73+
on_close: Callback::new(|_| log::info!("Closed")),
74+
children: rsx! {
75+
p { "Customized browser frame!" }
76+
}
77+
}
78+
}
79+
}
80+
```
81+
82+
### Step 4: Handling Events and Interactions
83+
84+
Use event handlers to manage user interactions, such as closing or minimizing the browser window:
85+
86+
```rust
87+
use dioxus::prelude::*;
88+
use browser_rs::dioxus::BrowserFrame;
89+
90+
91+
fn app() -> Element {
92+
rsx! {
93+
BrowserFrame {
94+
url: "https://opensass.org",
95+
on_close: Callback::new(|_| log::info!("Closed")),
96+
on_minimize: Callback::new(|_| log::info!("Minimized")),
97+
on_maximize: Callback::new(|_| log::info!("Maximized")),
98+
children: rsx! {
99+
p { "Interactive browser frame." }
100+
}
101+
}
102+
}
103+
}
104+
```
105+
106+
## 🔧 Props
107+
108+
### `BrowserFrameProps` Props
109+
110+
#### Main Props
111+
112+
| Property | Type | Description | Default |
113+
| ------------------ | --------------------------------- | ------------------------------------------------------------ | ------------------------------ |
114+
| `children` | `Element` | Child elements rendered inside the browser frame. | `{}` |
115+
| `url` | `String` | The URL displayed in the address bar and used in the iframe. | `""` |
116+
| `placeholder` | `&'static str` | Placeholder text shown in the address bar. | `""` |
117+
| `on_url_change` | `Option<EventHandler<FormEvent>>` | Event handler for when the address bar URL changes. | `None` |
118+
| `on_close` | `EventHandler<()>` | Event handler for when the close button is clicked. | No-op |
119+
| `on_minimize` | `EventHandler<()>` | Event handler for when the minimize button is clicked. | No-op |
120+
| `on_maximize` | `EventHandler<()>` | Event handler for when the maximize button is clicked. | No-op |
121+
| `show_controls` | `bool` | Whether to show control buttons (close, minimize, maximize). | `true` |
122+
| `show_address_bar` | `bool` | Whether to show the address bar. | `true` |
123+
| `read_only` | `bool` | Whether the address bar is read-only. | `false` |
124+
| `size` | `Size` | Size of the browser frame container. | `Size::default()` |
125+
| `variant` | `Variant` | Display variant for the frame (e.g., Tabs, Plain). | `Variant::default()` |
126+
| `custom_buttons` | `Vec<Element>` | Custom buttons displayed in the top bar. | `[]` |
127+
| `class` | `&'static str` | CSS class for the outermost container. | `"rounded-lg..."` |
128+
| `frame_class` | `&'static str` | CSS class for the browser frame. | `""` |
129+
| `style` | `&'static str` | Inline styles for the outer container. | `""` |
130+
| `id` | `&'static str` | HTML id attribute for the browser container. | `""` |
131+
| `aria_label` | `&'static str` | ARIA label for accessibility. | `"Browser window"` |
132+
| `aria_describedby` | `&'static str` | ARIA description for additional accessibility context. | `""` |
133+
| `container_class` | `&'static str` | Additional CSS class for the address bar container. | `""` |
134+
| `input_class` | `&'static str` | CSS class for the address bar input element. | `"text-black dark:text-white"` |
135+
136+
#### Behavioral & Style Props
137+
138+
| Property | Type | Description | Default |
139+
| ---------------------------- | -------------- | ----------------------------------------------------------------- | ---------------------------- |
140+
| `refresh_button_style` | `&'static str` | Inline style for the refresh button. | `"position: absolute; ...;"` |
141+
| `refresh_button_aria_label` | `&'static str` | ARIA label for the refresh button. | `"Refresh"` |
142+
| `icon_button_style` | `&'static str` | Shared inline style for icon buttons (close, minimize, maximize). | `"padding: 4px; ...;"` |
143+
| `address_wrapper_base_style` | `&'static str` | Inline style for the wrapper around the address bar. | `"flex: 1; ...;"` |
144+
| `header_base_style` | `&'static str` | Inline style for the header container (controls and address bar). | `"display: flex; ...;"` |
145+
146+
#### Control Button Props
147+
148+
Each control button (close, minimize, maximize) has customizable events and styles:
149+
150+
| Property | Type | Description | Default |
151+
| --------------------- | -------------------------- | -------------------------------------------------------- | ------- |
152+
| `on_close_mouse_over` | `EventHandler<()>` | Mouse over event for close button. | No-op |
153+
| `on_close_mouse_out` | `EventHandler<()>` | Mouse out event for close button. | No-op |
154+
| `on_close_focus` | `EventHandler<FocusEvent>` | Focus event for close button. | No-op |
155+
| `on_close_blur` | `EventHandler<FocusEvent>` | Blur event for close button. | No-op |
156+
| `close_class` | `&'static str` | CSS class for the close button. | `""` |
157+
| ... | ... | _Similar props exist for minimize and maximize buttons._ | |
158+
159+
#### Additional Custom Button Props
160+
161+
Props are also available for share, tabs, and more buttons:
162+
163+
| Property | Type | Description | Default |
164+
| -------------------- | ------------------ | ------------------------------------------------ | ------- |
165+
| `share_button_style` | `&'static str` | Inline style for the share button. | `""` |
166+
| `share_onclick` | `EventHandler<()>` | Click event for the share button. | No-op |
167+
| ... | ... | _Similar props exist for tabs and more buttons._ | |
168+
169+
## 💡 Notes
170+
171+
1. **Accessible**: All elements support ARIA labels, roles, and keyboard navigation (`Escape` triggers close).
172+
173+
1. **Dark Mode Ready**: Default styles are compatible with Tailwind's dark theme classes.
174+
175+
1. **Customizable Controls**: All button elements (close, minimize, maximize, refresh, tabs, share, more) support individual style, label, and event customization.
176+
177+
1. **Component Structure**: Internally splits into header and content subcomponents (`BrowserHeader`, `BrowserContent`) for modular control.
178+
179+
1. **Use Anywhere**: Can be used to wrap iframes, widgets, editors, or any arbitrary HTML/RSX content.

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
| Framework | Live Demo |
2222
| --- | --- |
2323
| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://browser-rs.netlify.app) |
24-
| Dioxus | TODO |
24+
| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://browser-dio.netlify.app) |
2525
| Leptos | TODO |
2626

2727
## 📜 Intro
@@ -45,7 +45,7 @@
4545
<!-- absolute url for docs.rs cause YEW.md is not included in crate -->
4646
Refer to [our guide](https://github.com/opensass/browser-rs/blob/main/YEW.md) to integrate this component into your Yew app.
4747

48-
## 🧬 Dioxus Usage (TODO)
48+
## 🧬 Dioxus Usage
4949

5050
<!-- absolute url for docs.rs cause DIOXUS.md is not included in crate -->
5151
Refer to [our guide](https://github.com/opensass/browser-rs/blob/main/DIOXUS.md) to integrate this component into your Dioxus app.

0 commit comments

Comments
 (0)