Edit Component

🧬 Accordion RS Dioxus Usage

Adding Accordion RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the Accordion component to your dependencies by including it in your Cargo.toml file.

   cargo add accordion-rs --features=dio
   

3. Import the Accordion component 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 Accordion component into your Dioxus project:

   use dioxus::prelude::*;
   use accordion_rs::dioxus::Accordion;

2. Define the accordion sections and use the Accordion component in your Dioxus app:

   use accordion_rs::dioxus::{Accordion, Item, List};
   use accordion_rs::{Size, Align};
   use dioxus::prelude::*;
   
   pub fn app() -> Element {
       let expand = use_signal(|| false);
   
       rsx!(
           Accordion {
               expand: expand,
               size: Size::XLarge,
               expanded: rsx!(div { "Accordion Expanded" }),
               collapsed: rsx!(div { "Accordion Collapsed" }),
               class: "bg-gray-900 text-gray-300 border border-gray-700 p-4 rounded-lg",
               expanded_class: "text-white bg-gray-800",
               collapsed_class: "text-gray-400 bg-gray-800",
               List {
                   Item { align: Align::Left, "Item 1 - Left" }
                   Item { align: Align::Right, "Item 2 - Right" }
               }
           }
       )
   }

🔧 Props

Main Props

Styling Props

+-----------------------------------------------------------+
|                  [Accordion Container]                    |  <-- `class` & `style`
|                                                           |
|   +-----------------------------------------------+       |  <-- `collapsed_class` & `collapsed_style`
|   |             [Collapsed Content]               |       |  <-- `collapsed`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `expanded_class` & `expanded_style`
|   |             [Expanded Content]                |       |  <-- `expanded`
|   +-----------------------------------------------+       |
|                                                           |
|   +-----------------------------------------------+       |  <-- `content_class` & `content_style`
|   |              [Accordion Content]              |       |  <-- `children`
|   +-----------------------------------------------+       |
|                                                           |
+-----------------------------------------------------------+

Callback Props

A11Y Props

💡 Notes

• Use the expand prop to control the open/close state of the accordion programmatically.
• The size prop can be customized to adjust the width of the accordion.
• Callback props like will_open and did_close provide hooks to perform actions during the accordion's lifecycle.
• Custom classes and styles allow for extensive customization of the accordion's appearance and behavior.
• ARIA attributes can be enabled/disabled using the aria_enabled prop for better screen reader compatibility.

Usage

CLI Usage

You can import Accordion RS directly into your project to customize and modify it using the opensass cli:

os add accordion-rs dio

Edit Component

🌱 Leptos Accordion RS Usage

Adding Accordion RS to your Leptos project is simple:

1. Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.

2. Add accordion-rs to your dependencies:

   cargo add accordion-rs --features=lep
   

3. Import the Accordion component into your Leptos component and start using it in your app.

🛠️ Usage

Basic Example

The following is an example of using the Accordion in a Leptos project:

use leptos::prelude::*;
use accordion_rs::leptos::{Accordion, List, Item};
use accordion_rs::Align;

#[component]
pub fn App() -> impl IntoView {
    let expanded = signal(false);

    view! {
        <Accordion
            expand={expanded}
            expanded={Box::new(|| view! { <h3>{ "Accordion Expanded" }</h3> }.into_any())}
            collapsed={Box::new(|| view! { <h3>{ "Accordion Collapsed" }</h3> }.into_any())}
        >
            <List>
                <Item align={Align::Left}>{ "Item 1 - Left" }</Item>
                <Item align={Align::Right}>{ "Item 2 - Right" }</Item>
            </List>
        </Accordion>
    }
}

Accordion with Callbacks

You can also attach lifecycle callbacks to handle events during the accordion's state changes.

use leptos::prelude::*;
use leptos::logging::log;
use accordion_rs::leptos::{Accordion, List, Item};

#[component]
pub fn App() -> impl IntoView {
    let expanded = signal(false);

    let will_open = move || log!("Accordion will open.");
    let did_open = move || log!("Accordion has opened.");
    let will_close = move || log!("Accordion will close.");
    let did_close = move || log!("Accordion has closed.");

    view! {
        <Accordion
            expand={expanded}
            expanded={Box::new(|| view! { <p>"Expanded Content"</p> }.into_any())}
            collapsed={Box::new(|| view! { <p>"Collapsed Content"</p> }.into_any())}
            will_open={Callback::from(will_open)}
            did_open={Callback::from(did_open)}
            will_close={Callback::from(will_close)}
            did_close={Callback::from(did_close)}
        >
            <List>
                <Item>{ "Logging Accordion Lifecycle Events" }</Item>
            </List>
        </Accordion>
    }
}

🔧 Props

Main Props

Styling Props

Callback Props

Accessibility Props

💡 Tips

• Use the expand prop signal to control the open/close state of the accordion programmatically.
• The size prop can be customized to adjust the width of the accordion.
• Callback props like will_open and did_close provide hooks to perform actions during the accordion's lifecycle.
• Custom classes and styles allow for extensive customization of the accordion's appearance and behavior.
• ARIA attributes can be enabled/disabled using the aria_enabled prop for better screen reader compatibility.

Usage

CLI Usage

You can import Accordion RS directly into your project to customize and modify it using the opensass cli:

os add accordion-rs lep

Edit Component

🧬 Image RS Dioxus Usage

Adding Image RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the image-rs library to your dependencies by including it in your Cargo.toml file:

   cargo add image-rs --features=dio
   

3. Import the Image component into your Dioxus application.

🛠️ Usage

Incorporating Image RS into your Dioxus application is simple. Here's how:

1. Add the Image component to your Dioxus project:

   use dioxus::prelude::*;
   use image_rs::dioxus::Image;

2. Use the Image component in your app like this:

   use dioxus::prelude::*;
   use image_rs::dioxus::Image;
   use image_rs::{Layout, Loading};
   
   fn App() -> Element {
       rsx! {
           Image {
               src: "/images/photo.jpg",
               alt: "A beautiful view",
               width: "800",
               height: "600",
               layout: Layout::Responsive,
               loading: Loading::Lazy,
           }
       }
   }

🔧 Props

🖼️ Main Props

🎨 Styling Props

+-----------------------------------------------------------+
|                  [Image Container]                        |  <-- `class` & `style`
|                                                           |
|   +-----------------------------------------------+       |  <-- `layout`
|   |              [Loaded Image]                   |       |  <-- `src`
|   +-----------------------------------------------+       |
|                                                           |
+-----------------------------------------------------------+

⚙️ Behavioral Props

🌐 Network & Source Props

⚡ Performance Props

🧠 Accessibility Props (ARIA)

💡 Notes

• Required: src and alt are essential for accessibility and rendering.

• Layout behavior:

  • Responsive, Fill, Intrinsic, and Fixed alter how dimensions are applied.
  • Fill ignores width/height and stretches the image.

• Loading:

  • placeholder and blur_data_url create a smoother user experience.
  • Use on_load / on_error for lifecycle management.

• Lazy loading:

  • Uses IntersectionObserver.
  • lazy_boundary controls how early the image loads.

• Optimization:

  • unoptimized = true disables default optimizations.

• Performance tracking:

  • elementtiming and attributionsrc assist in analytics and attribution.

• Accessibility:

  • Add aria-* attributes to enhance usability with screen readers and assistive devices.

Usage

CLI Usage

You can import Image RS directly into your project to customize and modify it using the opensass cli:

os add image-rs dio

Edit Component

🌱 Leptos Image RS Usage

Adding Image RS to your Leptos project is simple:

1. Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.

2. Add image-rs to your dependencies:

   cargo add image-rs --features=lep
   

3. Import the Image component into your Leptos component and start using it in your app.

🛠️ Usage

Incorporating the Image component into your Leptos application is easy. Here's a basic example:

use leptos::{*, prelude::*};
use image_rs::leptos::Image;
use image_rs::Layout;
use leptos::logging::log;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Image
            src="https://example.com/image.jpg"
            alt="An example image"
            width="600"
            height="400"
            layout=Layout::Responsive
            class="my-image"
            style="border-radius: 8px;"
            placeholder="blur"
            blur_data_url="data:image/png;base64,..."
            fallback_src="https://example.com/fallback.jpg"
            on_load=Callback::new(|_| log!("Image loaded successfully"))
            on_error=Callback::new(|err| log!("Image failed: {err}"))
        />
    }
}

🔧 Props

Image Props

Main Props

Loading & Placeholder Props

Styling Props

Event Callbacks

Advanced Browser Attributes

Accessibility Props

Other Props

💡 Notes

• The Image component is flexible for layout use cases: use Fill to cover parent, or Responsive to maintain aspect ratio.
• Use the placeholder="blur" and blur_data_url to provide a low-res preview while loading.
• Fallback logic automatically switches to fallback_src if the main image fails to load.
• All ARIA attributes and semantic accessibility features are built-in and customizable.
• The component supports lazy loading by default with loading=Loading::Lazy.

Usage

CLI Usage

You can import Image RS directly into your project to customize and modify it using the opensass cli:

os add image-rs lep

Edit Component

🧬 Table RS Dioxus Usage

Adding Table RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the table-rs library to your dependencies by including it in your Cargo.toml file:

   cargo add table-rs --features=dio
   

3. Import the Table component into your Dioxus application.

🛠️ Usage

Incorporating Table RS into your Dioxus app involves just a few steps:

1. Import the Table component and types:

   use dioxus::prelude::*;
   use table_rs::dioxus::table::Table;
   use table_rs::dioxus::types::Column;
   use maplit::hashmap;

2. Use the Table component in your Dioxus app:

   use dioxus::prelude::*;
   use table_rs::dioxus::table::Table;
   use table_rs::dioxus::types::Column;
   use maplit::hashmap;
   
   
   fn App() -> Element {
       let data = vec![
           hashmap! { "name" => "Ferris".to_string(), "email" => "ferris@opensass.org".to_string() },
           hashmap! { "name" => "Ferros".to_string(), "email" => "ferros@opensass.org".to_string() },
           hashmap! { "name" => "Crab".to_string(), "email" => "crab@opensass.org".to_string() },
       ];
   
       let columns = vec![
           Column {
               id: "name",
               header: "Name",
               sortable: true,
               ..Default::default()
           },
           Column {
               id: "email",
               header: "Email",
               sortable: false,
               ..Default::default()
           },
       ];
   
       rsx! {
           Table {
               data: data,
               columns: columns,
           }
       }
   }

🔧 Props

Table Component Props

Column Props

TableClasses

TableTexts

🧱 Style/Layout Structure

+-------------------------------------------------------------+
|                      [container]                            |  <-- class: "table-container"
|                                                             |
|   +-----------------------------------------------------+   |
|   |                    [search_input]                   |   |  <-- class: "search-input"
|   |          (optional search <input> element)          |   |
|   +-----------------------------------------------------+   |
|                                                             |
|   +-----------------------------------------------------+   |
|   |                       [table]                       |   |  <-- class: "table"
|   |   +--------------------[thead]--------------------+ |   |  <-- class: "thead"
|   |   |   Column Headers (e.g., Name, Email)          | |   |
|   |   +-----------------------------------------------+ |   |
|   |   +--------------------[tbody]--------------------+ |   |  <-- class: "tbody"
|   |   |  Data rows (from `data` prop, each row = <tr>)| |   |
|   |   +-----------------------------------------------+ |   |
|   +-----------------------------------------------------+   |
|                                                             |
|   +-----------------------------------------------------+   |
|   |                  [pagination]                       |   |  <-- class: "pagination-controls"
|   |   Page selector / next-prev buttons (if enabled)    |   |
|   +-----------------------------------------------------+   |
+-------------------------------------------------------------+

💡 Notes

• The data must match the id values defined in each Column.
• The search prop enables input-based filtering across all columns.
• Pagination is controlled using the page_size and paginate props.
• Sorting is column-specific via sortable = true and on_sort_column.
• All style classes can be customized via TableClasses.
• All texts are configurable via TableTexts.
• The component handles loading and empty states out-of-the-box.
• You can inject additional per-column styling via Column.style and Column.class.

Usage

CLI Usage

You can import Table RS directly into your project to customize and modify it using the opensass cli:

os add table-rs dio

TODO

Edit Component

🧬 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 for setup instructions.

2. Add the Input component to your dependencies by including it in your Cargo.toml file.

   cargo add input-rs --features=dio
   

3. 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:

   use dioxus::prelude::*;
   use input_rs::dioxus::Input;

2. Use the Input component in your application:

   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

Styling Props

+-----------------------------+  <-- `class`
|                             |
|  +-----------------------+  |  <-- `label_class`
|  |       Label           |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `field_class`
|  | +-------+  +--------+ |  |
|  | | Input |  |  Icon  | |  |  <-- `input_class` and `icon_class`
|  | +-------+  +--------+ |  |
|  +-----------------------+  |
|                             |
|  +-----------------------+  |  <-- `error_class` (if invalid)
|  |       Error Message   |  |
|  +-----------------------+  |
+-----------------------------+

Accessibility Props

💡 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.

Usage

CLI Usage

You can import Input RS directly into your project to customize and modify it using the opensass cli:

os add input-rs dio

Edit Component

🌱 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 for setup instructions.

2. Add input-rs to your dependencies:

   cargo add input-rs --features=lep
   

3. 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:

   use leptos::{prelude::*, *};
   use input_rs::leptos::Input;
   use regex::Regex;

2. Use the Input component within your Leptos application:

   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

Accessibility and SEO Props

Styling Props

Behavioral Props

Additional Props

Input Element Specific Attributes

Behavioral Props

💡 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.

Usage

CLI Usage

You can import Input RS directly into your project to customize and modify it using the opensass cli:

os add input-rs lep

Edit Component

🧬 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 for setup instructions.

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

   cargo add radiors --features=dio
   

3. 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:

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

2. Use the Radio components within your Dioxus application:

   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

Styling Props

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

Behavioral Props

Radio Props

Main Props

Styling Props

+-----------------------------------------------------------+
|                   [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`
|   |   +---------------------------------------+     |     |
|   +-------------------------------------------------+     |
|                                                           |
+-----------------------------------------------------------+

Behavioral Props

💡 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.

Usage

CLI Usage

You can import Radio RS directly into your project to customize and modify it using the opensass cli:

os add radiors dio

Edit Component

🌱 Leptos Radio RS Usage

Adding Radio RS to your Leptos project is simple:

1. Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.

2. Add radiors to your dependencies:

   cargo add radiors --features=lep
   

3. Import the Radio components into your Leptos component and start using it in your app.

🛠️ Usage

Incorporating the Radio components into your Leptos application is easy. Follow these steps:

1. Import the Radio components into your Leptos project:

   use leptos::prelude::*;
   use radiors::leptos::{Radio, Group};
   use radiors::{Size, Orientation};

2. Use the Radio components within your Leptos application:

   use leptos::prelude::*;
   use radiors::leptos::{Radio, Group};
   use radiors::{Size, Orientation};
   
   #[component]
   pub fn app() -> impl IntoView {
       let selected_value = signal("Option1".to_string());
   
       view! {
           <Group
               selected={selected_value.0.get()}
               onchange=Callback::from(move |new_value: String| {
                   selected_value.1.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"
               />
           </Group>
       }
   }

🔧 Props

Group Props

Main Props

Styling Props

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

Behavioral Props

Radio Props

Main Props

Styling Props

+-----------------------------------------------------------+
|                   [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`
|   |   +---------------------------------------+     |     |
|   +-------------------------------------------------+     |
|                                                           |
+-----------------------------------------------------------+

Behavioral Props

💡 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.

Usage

CLI Usage

You can import Radio RS directly into your project to customize and modify it using the opensass cli:

os add radiors lep

TODO

TODO

Edit Component

🧬 Slider RS Dioxus Usage

Adding Slider RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add the Slider RS library to your dependencies by including it in your Cargo.toml file:

   cargo add slider-rs --features=dio
   

3. Import the Slider component into your Dioxus application.

🛠️ Usage

Incorporate the Slider component into your Dioxus application by following these steps:

1. Import the Slider Component

use dioxus::prelude::*;
use slider_rs::dioxus::Slider;
use slider_rs::Orientation;

2. Use the Slider in Your Component

use dioxus::prelude::*;
use slider_rs::dioxus::Slider;
use slider_rs::Orientation;

#[component]
fn App() -> Element {
    let mut value = use_signal(|| 50.0);

    let on_change = {
        Callback::new(move |val: f64| value.set(val))
    };

    rsx! {
        Slider {
            min: 0.0,
            max: 100.0,
            step: 1.0,
            value: Some(value()),
            on_change: on_change,
            orientation: Orientation::Horizontal,
            show_value: true,
            show_steps: true,
        }
    }
}

🔧 Props

Main Props

Behavioral Props

Accessibility Props

Styling & Layout Props

+---------------------------------------------------------------+
|                     [Slider Container]                        |  <-- `container_class` & `container_style`
|                                                               |
|   +------------------------[Label]------------------------+   |  <-- `label_class` & `label_style`
|   |                                                       |   |
|   +-------------------------------------------------------+   |
|                                                               |
|   +----------------[Icons & Inputs Wrapper]---------------+   |  <-- layout wrapper
|   |  [Icon Start]   [Input Thumb 1]   [Input Thumb 2]     |   |  <-- double thumb if enabled
|   |                                                       |   |
|   +-------------------------------------------------------+   |
|                                                               |
|   +------------------------[Ticks]------------------------+   |  <-- visual tick marks (if enabled)
|                                                               |
|   +------------------------[Output]-----------------------+   |  <-- value display (if `show_value`)
|                                                               |
|   +------------------------[Steps]------------------------+   |  <-- step indicators (if `show_steps`)
+---------------------------------------------------------------+

Track & Thumb Customization Props

Icon Props

💡 Notes

• value is for single sliders; range is for double sliders (double: true).
• Props like size, color, cursor_style are used for visual styling presets.
• The component supports full accessibility with ARIA attributes.
• Callbacks (on_change, on_change_range, on_focus, on_blur) help manage state and interactions.
• Styles and classes can be customized extensively via provided props.
• Tooltips, step marks, and icons are optional features to enhance the UI.

Usage

CLI Usage

You can import Slider RS directly into your project to customize and modify it using the opensass cli:

os add slider-rs dio

TODO

Edit Component

🧬 Alert RS Dioxus Usage

Adding Alert RS to your project is simple:

1. Make sure your project is set up with Dioxus. Refer to the Dioxus Getting Started Guide for setup instructions.

2. Add alert-rs to your dependencies:

   cargo add alert-rs --features=dio
   

3. Import Alert into your component and start enhancing your app's alert functionality.

🛠️ Usage

Incorporating the Dioxus Alert into your application is easy. Follow these steps:

1. Import the Alert component into your project:

    use dioxus::prelude::*;
    use alert_rs::dioxus::Alert;
    use alert_rs::{IconType, Position};

2. Define the alert properties and use the Alert component in your Dioxus component:

    use dioxus::prelude::*;
    use alert_rs::dioxus::Alert;
    use alert_rs::{IconType, Position};
   
    #[component]
    pub fn App() -> Element {
        let mut show_alert = use_signal(|| false);
   
        rsx! {
            div {
                button {
                    onclick: move |_| show_alert.set(true),
                    "Show Alert"
                }
                Alert {
                    title: "Alert Title",
                    body: "This is an alert message",
                    show_alert: show_alert,
                    timeout: 2500,
                    icon_class: "flex justify-center",
                    confirm_button_text: "Okay",
                    cancel_button_text: "Cancel",
                    confirm_button_class: "bg-green-500 text-white rounded",
                    cancel_button_class: "bg-red-500 text-white rounded",
                    show_confirm_button: true,
                    show_cancel_button: true,
                    show_close_button: true,
                    on_confirm: move |_| {
                        // Your confirmation logic
                    },
                    on_cancel: move |_| {
                        // Your cancel logic
                    },
                    position: Position::TopRight,
                    icon_type: IconType::Success,
                    alert_class: "flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600",
                    title_class: "text-white",
                    body_class: "text-gray-300",
                    icon_color: "",
                    icon_width: "50",
                }
            }
        }
    }

🔧 Props

Main Props

Callback Props

Alert Appearance & Positioning

Styling Props

+-----------------------------------------------------------+  <-- `alert_class`
|                                                           |
|  +-----------------------------------------------+        |  <-- `close_button_style` (if `show_close_button`)
|  |               [X] Close Button                |        |
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `icon_class` and `icon_style`
|  |                  [Icon]                       |        |  <-- `icon_tag`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `title_class` and `title_style`
|  |                [Alert Title]                  |        |  <-- `props.title`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `separator_style`
|  |             [--- Separator ---]               |        |
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `message_style` and `body_class`
|  |                [Alert Message]                |        |  <-- `props.body`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `confirm_button_class` and `confirm_button_style`
|  |                [Confirm Button]               |        |  <-- `props.confirm_button_text`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `cancel_button_class` and `cancel_button_style`
|  |                [Cancel Button]                |        |  <-- `props.cancel_button_text`
|  +-----------------------------------------------+        |
|                                                           |
+-----------------------------------------------------------+

Inline Styles

💡 Notes

• The native prop can be set to true to use the browser's default alert behavior instead of the custom component.
• The alert is displayed based on the show_alert signal, which should be controlled by the parent component.
• Timeout behavior can be adjusted using the timeout property, and alert visibility can be toggled using the show_alert state.
• You can customize the alert's appearance, including the icon, buttons, position, and styles.

Usage

CLI Usage

You can import Alert RS directly into your project to customize and modify it using the opensass cli:

os add alert-rs dio

Edit Component

🌱 Leptos Alert-RS Usage

Adding Alert-RS to your Leptos project is simple:

1. Make sure your project is set up with Leptos. Refer to their Getting Started Guide for setup instructions.

2. Add alert-rs to your dependencies:

   cargo add alert-rs --features=lep
   

3. Import the Alert component into your Leptos component and start showing alerts in your app.

🛠️ Usage

Incorporating Leptos Alert into your application is easy. Follow these steps:

1. Import the Alert component into your Leptos project:

   use leptos::prelude::*;
   use alert_rs::leptos::Alert;

2. Define the alert properties and use the Alert component in your Leptos component:

   use leptos::prelude::*;
   use alert_rs::leptos::Alert;
   use alert_rs::{IconType, Position};
   
   
   #[component]
   pub fn App() -> impl IntoView {
       let show_alert = signal(true);
       view! {
           <Alert
               title={"Alert Title"}
               body={"This is an alert message"}
               show_alert={show_alert}
               timeout={2500}
               icon_class={"flex justify-center"}
               confirm_button_text={"Okay"}
               cancel_button_text={"Cancel"}
               confirm_button_class={"bg-green-500 text-white rounded"}
               cancel_button_class={"bg-red-500 text-white rounded"}
               show_confirm_button={true}
               show_cancel_button={true}
               show_close_button={true}
               on_confirm={Callback::from(move || {})}
               on_cancel={Callback::from(move || {})}
               position={Position::TopRight}
               icon_type={IconType::Success}
               alert_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
               title_class={"dark:text-white"}
               body_class={"dark:text-gray-300"}
               icon_color={""}
               icon_width={"50"}
           />
       }
   }

🔧 Props

Main Props

Callback Props

Alert Appearance & Positioning

Styling Props

+-----------------------------------------------------------+  <-- `alert_class`
|                                                           |
|  +-----------------------------------------------+        |  <-- `close_button_style` (if `show_close_button`)
|  |               [X] Close Button                |        |
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `icon_class` and `icon_style`
|  |                  [Icon]                       |        |  <-- `icon_tag`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `title_class` and `title_style`
|  |                [Alert Title]                  |        |  <-- `props.title`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `separator_style`
|  |             [--- Separator ---]               |        |
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `message_style` and `body_class`
|  |                [Alert Message]                |        |  <-- `props.body`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `confirm_button_class` and `confirm_button_style`
|  |                [Confirm Button]               |        |  <-- `props.confirm_button_text`
|  +-----------------------------------------------+        |
|                                                           |
|  +-----------------------------------------------+        |  <-- `cancel_button_class` and `cancel_button_style`
|  |                [Cancel Button]                |        |  <-- `props.cancel_button_text`
|  +-----------------------------------------------+        |
|                                                           |
+-----------------------------------------------------------+

Inline Styles

💡 Notes

• The native prop can be set to true to use the browser's default alert behavior instead of the custom component.
• The alert is displayed based on the show_alert state, which should be controlled by the parent component.
• Timeout behavior can be adjusted using the timeout property, and alert visibility can be toggled using the show_alert state.
• You can customize the alert's appearance, including the icon, buttons, position, and styles.

Usage

CLI Usage

You can import Alert RS directly into your project to customize and modify it using the opensass cli:

os add alert-rs lep