-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: migrate to dioxus 0.6 && update docs
- Loading branch information
Showing
11 changed files
with
742 additions
and
408 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| # 🧬 Input RS Dioxus Usage | ||
|
|
||
| Adding Input 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 Input component to your dependencies by including it in your `Cargo.toml` file. | ||
|
|
||
| ```sh | ||
| cargo add input-rs --features=dio | ||
| ``` | ||
|
|
||
| 1. Import the `Input` components into your Dioxus component and start using it in your app. | ||
|
|
||
| ## 🛠️ Usage | ||
|
|
||
| Incorporating the Input component into your application is easy. Follow these steps: | ||
|
|
||
| 1. Import `Input` into your component: | ||
|
|
||
| ```rust | ||
| use dioxus::prelude::*; | ||
| use input_rs::dioxus::Input; | ||
| ``` | ||
|
|
||
| 1. Use the `Input` component in your application: | ||
|
|
||
| ```rust | ||
| use dioxus::prelude::*; | ||
| use input_rs::dioxus::Input; | ||
|
|
||
| #[component] | ||
| pub fn App() -> Element { | ||
| let input_value = use_signal(|| String::new()); | ||
| let is_valid = use_signal(|| true); | ||
|
|
||
| fn validate_input(value: String) -> bool { | ||
| !value.trim().is_empty() | ||
| } | ||
|
|
||
| rsx! { | ||
| div { | ||
| class: "app-container", | ||
| h1 { "Custom Input Example" } | ||
| Input { | ||
| r#type: "text", | ||
| label: "Enter your name:", | ||
| id: "name-input", | ||
| handle: input_value.clone(), | ||
| valid_handle: is_valid.clone(), | ||
| validate_function: validate_input, | ||
| placeholder: "Type here...", | ||
| class: "custom-input", | ||
| label_class: "input-label", | ||
| field_class: "input-field", | ||
| error_message: "This field cannot be empty", | ||
| error_class: "input-error", | ||
| } | ||
| if !is_valid() { | ||
| p { class: "error-message", "Please correct the input." } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## 🔧 Props | ||
|
|
||
| ### Main Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------------- | -------------------- | ------------------------------------------------------------------------------------ | -------- | | ||
| | `r#type` | `&'static str` | Type of the input (e.g., `text`, `password`, `email`, etc.). | `"text"` | | ||
| | `label` | `&'static str` | Label text for the input field. | `""` | | ||
| | `id` | `&'static str` | Unique ID for the input element. | `""` | | ||
| | `placeholder` | `&'static str` | Placeholder text for the input. | `""` | | ||
| | `handle` | `Signal<String>` | Signal handle for the input value. | None | | ||
| | `valid_handle` | `Signal<bool>` | Signal handle for the validity of the input value. | None | | ||
| | `validate_function` | `fn(String) -> bool` | Validation function for the input value. Returns `true` if valid, `false` otherwise. | None | | ||
| | `required` | `bool` | Indicates whether the input is required. | `false` | | ||
| | `error_message` | `&'static str` | Error message to display if the input is invalid. | `""` | | ||
|
|
||
| ### Styling Props | ||
|
|
||
| ```sh | ||
| +-----------------------------+ <-- `class` | ||
| | | | ||
| | +-----------------------+ | <-- `label_class` | ||
| | | Label | | | ||
| | +-----------------------+ | | ||
| | | | ||
| | +-----------------------+ | <-- `field_class` | ||
| | | +-------+ +--------+ | | | ||
| | | | Input | | Icon | | | <-- `input_class` and `icon_class` | ||
| | | +-------+ +--------+ | | | ||
| | +-----------------------+ | | ||
| | | | ||
| | +-----------------------+ | <-- `error_class` (if invalid) | ||
| | | Error Message | | | ||
| | +-----------------------+ | | ||
| +-----------------------------+ | ||
| ``` | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------- | -------------- | ------------------------------------------ | ------- | | ||
| | `class` | `&'static str` | CSS class for the input container. | `""` | | ||
| | `label_class` | `&'static str` | CSS class for the label element. | `""` | | ||
| | `input_class` | `&'static str` | CSS class applied to the input element. | `""` | | ||
| | `field_class` | `&'static str` | CSS class for the input field container. | `""` | | ||
| | `error_class` | `&'static str` | CSS class for the error message container. | `""` | | ||
|
|
||
| ### Accessibility Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------------ | -------------- | ----------------------------------------------- | -------- | | ||
| | `aria_label` | `&'static str` | Label for accessibility. | `""` | | ||
| | `aria_required` | `&'static str` | Accessibility hint for required status. | `"true"` | | ||
| | `aria_invalid` | `&'static str` | Accessibility hint for invalid input. | `"true"` | | ||
| | `aria_describedby` | `&'static str` | Links the input to a description (e.g., error). | `""` | | ||
|
|
||
| ## 💡 Notes | ||
|
|
||
| - The `Input` component can be used for various input types like text, password, etc. | ||
| - You can bind the component to state hooks for two-way data binding. | ||
| - Utilize `validate_function` to validate user input and display error messages. | ||
| - The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons. | ||
| - Customize the appearance with CSS classes for better integration into your app's design. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
| # 🌱 Leptos Input RS Usage | ||
|
|
||
| Adding Input RS to your Leptos project is simple: | ||
|
|
||
| 1. Make sure your project is set up with Leptos. Refer to their [Getting Started Guide](https://book.leptos.dev/getting_started/index.html) for setup instructions. | ||
|
|
||
| 1. Add `input-rs` to your dependencies: | ||
|
|
||
| ```sh | ||
| cargo add input-rs --features=lep | ||
| ``` | ||
|
|
||
| 1. Import the `Input` component into your Leptos component and start using it in your app. | ||
|
|
||
| ## 🛠️ Usage | ||
|
|
||
| Incorporating the `Input` component into your Leptos application is easy. Follow these steps: | ||
|
|
||
| 1. Import the `Input` component into your Leptos project: | ||
|
|
||
| ```rust | ||
| use leptos::{prelude::*, *}; | ||
| use input_rs::leptos::Input; | ||
| use regex::Regex; | ||
| ``` | ||
|
|
||
| 1. Use the `Input` component within your Leptos application: | ||
|
|
||
| ```rust | ||
| use leptos::{prelude::*, *}; | ||
| use input_rs::leptos::Input; | ||
| use regex::Regex; | ||
|
|
||
|
|
||
| fn validate_input(value: String) -> bool { | ||
| !value.trim().is_empty() | ||
| } | ||
|
|
||
| #[component] | ||
| pub fn app() -> impl IntoView { | ||
| let error_handle = signal(String::default()); | ||
| let error = error_handle.0.get(); | ||
|
|
||
| let email_valid_handle = signal(true); | ||
| let email_valid = email_valid_handle.0.get(); | ||
|
|
||
| let password_valid_handle = signal(true); | ||
| let password_valid = password_valid_handle.0.get(); | ||
|
|
||
| let email_handle = signal(String::default()); | ||
| let email = email_handle.0.get(); | ||
|
|
||
| let password_handle = signal(String::default()); | ||
| let password = password_handle.0.get(); | ||
|
|
||
| let onsubmit = move |ev: leptos::ev::SubmitEvent| { | ||
| ev.prevent_default(); | ||
|
|
||
| let email_ref = email.clone(); | ||
| let password_ref = password.clone(); | ||
| let error_handle = error_handle.clone(); | ||
|
|
||
| // Custom logic for your endpoint goes here | ||
| }; | ||
|
|
||
| view! { | ||
| <div class="form-one-content" role="main" aria-label="Sign In Form"> | ||
| <div class="text"> | ||
| <h2>{"Sign In"}</h2> | ||
| { move || if !error.is_empty() { | ||
| Some(view! {<div class="error">error</div>}) | ||
| } | ||
| else {None} | ||
| } | ||
| </div> | ||
| <form on:submit={onsubmit}> | ||
| <Input | ||
| r#type="text" | ||
| handle={email_handle} | ||
| name="email" | ||
| label="Email" | ||
| placeholder="Email" | ||
| input_class="form-one-field" | ||
| field_class="form-one-field" | ||
| error_class="error-txt" | ||
| required=true | ||
| valid_handle={email_valid_handle} | ||
| validate_function={validate_input} | ||
| error_message="Enter a valid email address" | ||
| /> | ||
| <Input | ||
| r#type="password" | ||
| handle={password_handle} | ||
| name="password" | ||
| label="Password" | ||
| placeholder="Password" | ||
| input_class="form-one-field" | ||
| field_class="form-one-field" | ||
| error_class="error-txt" | ||
| required=true | ||
| valid_handle={password_valid_handle} | ||
| validate_function={validate_input} | ||
| error_message="Password can't be blank!" | ||
| eye_active="fa fa-eye" | ||
| eye_disabled="fa fa-eye-slash" | ||
| /> | ||
| <div class="form-one-forgot-pass"> | ||
| <a href="#">{"Forgot Password?"}</a> | ||
| </div> | ||
| <button type="submit">{"Sign in"}</button> | ||
| <div class="sign-up"> | ||
| {"Not a member?"} | ||
| <a href="#">{"Sign up now"}</a> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## 🔧 Props | ||
|
|
||
| ### `Input` Props | ||
|
|
||
| #### Main Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------------- | ------------------------------------------- | ---------------------------------------------------------- | -------- | | ||
| | `r#type` | `&'static str` | The type of the input element (e.g., `text`, `password`). | `"text"` | | ||
| | `handle` | `(ReadSignal<String>, WriteSignal<String>)` | State handle for managing the value of the input. | `""` | | ||
| | `valid_handle` | `(ReadSignal<bool>, WriteSignal<bool>)` | State handle for managing the validity state of the input. | `""` | | ||
| | `validate_function` | `fn(String) -> bool` | Callback function to validate the input value. | `""` | | ||
| | `error_message` | `&'static str` | Error message displayed when the input is invalid. | `""` | | ||
|
|
||
| #### Accessibility and SEO Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------------ | -------------- | --------------------------------------------------------------- | -------- | | ||
| | `id` | `&'static str` | The ID attribute of the input element. | `""` | | ||
| | `aria_label` | `&'static str` | The aria-label for screen readers. | `""` | | ||
| | `aria_required` | `&'static str` | Indicates whether the input is required. | `"true"` | | ||
| | `aria_invalid` | `&'static str` | Indicates whether the input value is invalid. | `"true"` | | ||
| | `aria_describedby` | `&'static str` | Describes the input element's error message for screen readers. | `""` | | ||
|
|
||
| #### Styling Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------- | -------------- | -------------------------------------------------------------------- | ------- | | ||
| | `class` | `&'static str` | The CSS class for the container element of the input. | `""` | | ||
| | `input_class` | `&'static str` | The CSS class for the inner input element. | `""` | | ||
| | `field_class` | `&'static str` | The CSS class for the input field. | `""` | | ||
| | `label_class` | `&'static str` | The CSS class for the label element. | `""` | | ||
| | `error_class` | `&'static str` | The CSS class for the error message container. | `""` | | ||
| | `icon_class` | `&'static str` | The CSS class for the icon element (for password visibility toggle). | `""` | | ||
|
|
||
| #### Behavioral Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | -------------- | -------------- | ----------------------------------------------- | ------------------- | | ||
| | `eye_active` | `&'static str` | The icon used when the password is visible. | `"fa fa-eye"` | | ||
| | `eye_disabled` | `&'static str` | The icon used when the password is not visible. | `"fa fa-eye-slash"` | | ||
|
|
||
| #### Additional Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ------------- | -------------- | ---------------------------------------------------- | ------- | | ||
| | `placeholder` | `&'static str` | The placeholder text displayed in the input element. | `""` | | ||
| | `required` | `bool` | Specifies whether the input is required or not. | `false` | | ||
| | `disabled` | `bool` | Disables the input when true. | `false` | | ||
| | `readonly` | `bool` | Makes the input read-only when true. | `false` | | ||
|
|
||
| #### Input Element Specific Attributes | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ----------- | --------------- | --------------------------------------------------------------- | ------- | | ||
| | `size` | `Option<u32>` | The size of the input element (character width). | `None` | | ||
| | `maxlength` | `Option<usize>` | The maximum number of characters allowed in the input. | `None` | | ||
| | `pattern` | `&'static str` | Regex pattern for input validation. | `".*"` | | ||
| | `minlength` | `Option<usize>` | The minimum length of the input value. | `None` | | ||
| | `multiple` | `bool` | Whether multiple values are allowed (for file or email inputs). | `false` | | ||
|
|
||
| #### Behavioral Props | ||
|
|
||
| | Property | Type | Description | Default | | ||
| | ---------- | ------------------ | ------------------------------------------------ | ------- | | ||
| | `onchange` | `Callback<String>` | Callback triggered when the input value changes. | No-op | | ||
|
|
||
| ## 💡 Notes | ||
|
|
||
| - The `Input` component can be used for various input types like text, password, etc. | ||
| - You can bind the component to state hooks for two-way data binding. | ||
| - Utilize `validate_function` to validate user input and display error messages. | ||
| - The `eye_active` and `eye_disabled` props allow for password visibility toggling with FontAwesome icons. | ||
| - Customize the appearance with CSS classes for better integration into your app's design. |
Oops, something went wrong.