Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add dioxus support #1

Merged
merged 1 commit into from
Dec 24, 2024
Merged

feat: add dioxus support #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,429 changes: 1,410 additions & 19 deletions Cargo.lock
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ exclude = ["assets", "examples"]
[dependencies]
web-sys = "0.3.76"
yew = { version = "0.21.0", default-features = false, optional = true }
dioxus = { version = "0.6.1", optional = true }

[features]
yew = ["dep:yew"]
dio = ["dioxus"]

[profile.release]
opt-level = "z"
Expand All @@ -33,6 +35,10 @@ incremental = false
[badges]
maintenance = { status = "actively-developed" }

[package.metadata.docs.rs]
all-features = true
rustdoc-args = ["--cfg", "docsrs"]

[dev-dependencies]
log = "0.4.22"
bump2version = "0.1.4"
165 changes: 165 additions & 0 deletions DIOXUS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
# 🧬 Radio RS Dioxus Usage

Adding Radio RS to your project is simple:

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.

1. Add the Radio component to your dependencies by including it in your `Cargo.toml` file.

```sh
cargo add radiors --features=dio
```

1. Import the `Radio` components into your Dioxus component and start using it in your app.

## 🛠️ Usage

Incorporating the Accordion component into your application is easy. Follow these steps:

1. Import the Radio components into your Dioxus project:

```rust
use dioxus::prelude::*;
use radiors::dioxus::{Radio, Group};
use radiors::{Size, Orientation};
```

1. Use the `Radio` components within your Dioxus application:

```rust
use dioxus::prelude::*;
use radiors::dioxus::{Radio, Group};
use radiors::{Size, Orientation};

#[component]
pub fn app() -> Element {
let mut selected_value = use_signal(|| "Option1".to_string());

rsx! {
Group {
selected: selected_value(),
onchange: move |new_value| {
selected_value.set(new_value);
},
orientation: Orientation::Vertical,
class: "radio-group",
Radio {
label: "Option 1",
value: "Option1",
class: "radio-button"
}
Radio {
label: "Option 2",
value: "Option2",
class: "radio-button"
}
}
}
}
```

## 🔧 Props

### `Group` Props

#### Main Props

| Property | Type | Description | Default |
| ---------- | --------- | ---------------------------------------------------- | ------- |
| `selected` | `String` | The currently selected value of the radio group. | `""` |
| `children` | `Element` | Child `Radio` components to render within the group. | `""` |

#### Styling Props

```sh
+-----------------------------------------------------------+
| [Group Container] | <-- `class` & `style`
| |
| +-----------------------------------------------+ | <-- `orientation`
| | [Child Radio Buttons] | | <-- `children`
| +-----------------------------------------------+ |
| |
+-----------------------------------------------------------+
```

| Property | Type | Description | Default |
| ------------- | -------------- | ------------------------------------------------------------ | ------------------------- |
| `style` | `&'static str` | Inline styles for the radio group container. | `""` |
| `class` | `&'static str` | CSS class for the radio group container. | `""` |
| `orientation` | `Orientation` | Orientation of the radio group (`Horizontal` or `Vertical`). | `Orientation::Horizontal` |

#### Behavioral Props

| Property | Type | Description | Default |
| ---------- | ------------------ | --------------------------------------------------- | ------- |
| `onchange` | `Callback<String>` | Callback triggered when the selected value changes. | No-op |

### `Radio` Props

#### Main Props

| Property | Type | Description | Default |
| ---------- | -------------- | ------------------------------------------------------- | ------- |
| `label` | `&'static str` | Text label displayed alongside the radio button. | `""` |
| `value` | `&'static str` | Unique value for the radio button. | `""` |
| `src` | `&'static str` | Optional image URL to display next to the radio button. | `""` |
| `selected` | `bool` | Indicates whether this radio button is selected. | `false` |
| `disabled` | `bool` | Disables the radio button when `true`. | `false` |

#### Styling Props

```sh
+-----------------------------------------------------------+
| [Radio Container] | <-- `class` & `style`
| |
| +-------------------------------------------------+ | <-- `selected_class` & `selected_style` (when selected)
| | [Radio Button] | | <-- `disabled_class` & `disabled_style` (when disabled)
| | | |
| | +---------------------------------------+ | |
| | | [Hidden Input] | | | <-- `input_class` & `input_style`
| | +---------------------------------------+ | |
| | | |
| | +---------------------------------------+ | |
| | | [Optional Image] | | | <-- `image_class` & `image_style`
| | +---------------------------------------+ | |
| | | |
| | +---------------------------------------+ | |
| | | [Radio Label] | | | <-- `label_class` & `label_style`
| | +---------------------------------------+ | |
| +-------------------------------------------------+ |
| |
+-----------------------------------------------------------+
```

| Property | Type | Description | Default |
| ----------------- | -------------- | ---------------------------------------------------------------- | -------------------- |
| `style` | `&'static str` | Custom inline styles for the radio container. | `""` |
| `class` | `&'static str` | CSS class for the radio container. | `""` |
| `label_style` | `&'static str` | Inline styles for the radio label. | `""` |
| `label_class` | `&'static str` | CSS class for the radio label. | `""` |
| `image_style` | `&'static str` | Inline styles for the image (if `src` is provided). | `""` |
| `image_class` | `&'static str` | CSS class for the image (if `src` is provided). | `""` |
| `size` | `Size` | Size of the radio button (`Small`, `Medium`, `Large`). | `Size::XSmall` |
| `type` | `Type` | Styling type of the radio button (e.g., `Primary`, `Secondary`). | `Type::None` |
| `selected_style` | `&'static str` | Inline styles for the selected state of the radio button. | `""` |
| `selected_class` | `&'static str` | CSS class for the selected state of the radio button. | `""` |
| `disabled_style` | `&'static str` | Inline styles for the disabled state of the radio button. | `""` |
| `disabled_class` | `&'static str` | CSS class for the disabled state of the radio button. | `""` |
| `animation_style` | `&'static str` | Inline styles for animations applied to the radio button. | `""` |
| `animation_class` | `&'static str` | CSS class for animations applied to the radio button. | `""` |
| `input_style` | `&'static str` | Inline styles for the hidden `<input>` element. | `HIDDEN_INPUT_STYLE` |
| `input_class` | `&'static str` | CSS class for the hidden `<input>` element. | `""` |

#### Behavioral Props

| Property | Type | Description | Default |
| --------- | ------------------ | ---------------------------------------------------- | ------- |
| `onclick` | `Callback<String>` | Callback triggered when the radio button is clicked. | No-op |

## 💡 Notes

- Use the `Group` component to manage state for multiple `Radio` components.
- Callback props like `onchange` and `onclick` allow you to handle user interactions effectively.
- Make sure that the `value` for each `Radio` is unique within the `Group` to avoid conflicts.
- Customize the layout with the `orientation` prop (`Horizontal` or `Vertical`).
- Enhance the appearance by applying custom classes and styles or using any CSS framework.
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
| Framework | Live Demo |
| --- | --- |
| Yew | [![Netlify Status](https://api.netlify.com/api/v1/badges/a0efc7e9-f20e-4dd9-93e1-c8f4fde7506f/deploy-status)](https://radio-rs.netlify.app) |
| Dioxus | TODO |
| Dioxus | [![Netlify Status](https://api.netlify.com/api/v1/badges/4dabc732-d6de-4598-a629-980be35c003f/deploy-status)](https://radio-rs-dioxus.netlify.app) |
| Leptos | TODO |

## 📜 Intro
Expand All @@ -43,7 +43,7 @@ The following features make Radio RS a valuable addition to your WASM-based proj

Refer to [our guide](YEW.md) to integrate this component into your Yew app.

## 🧬 Dioxus Usage (TODO)
## 🧬 Dioxus Usage

Refer to [our guide](DIOXUS.md) to integrate this component into your Dioxus app.

Expand Down
2 changes: 2 additions & 0 deletions examples/dioxus/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
target/**/*
dist/**/*
Loading
Loading