freyr/
lib.rs

1//! # Freyr UI Components Library for Dioxus.
2//!
3//! This crate provides a set of customizable UI components for use in Dioxus projects.
4//! It allows developers to easily integrate and style components such as navbars, carousels and buttons,
5//! with flexible configuration options for color schemes and layouts. Just make it your own!
6//!
7//! ## Why the name Freyr?
8//!
9//! Freyr is the norse god of fertility and prosperity and is known for his beauty. Your Dioxus web app should also look good.
10//!
11//! > ### **Warning:**
12//! > **_New components will be added, and some features that already exist may change._**
13//! > **Freyr was created out of fun to help me reuse the components I had already used in other project, while I was learning _Rust_ and Dioxus. So I also hope it's going to help you too.**
14//!
15//! ### **Features**
16//! - [x] Buttons
17//! - [x] Tabs
18//! - [x] Navbar
19//! - [x] Accordion
20//! - [x] Carousel
21//! - [x] Dropdown
22//! - [x] Dialog
23//! - [x] Spinner
24//! - [x] Card
25//!
26//! All those components have more features than you think. For more information about them please chack them [here](https://docs.rs/freyr/latest/freyr/#functions).
27//! ## Key Features
28//! - Full customization of colors, sizes, and layouts using configuration structs and enums.
29//! - Easy integration into Dioxus web projects.
30//!
31//! ## Example Usage
32//!
33//! ```rust
34//! #![allow(non_snake_case)]
35//! use dioxus::prelude::*;
36//! use freyr::prelude::*;
37//!
38//! #[derive(Clone, Routable, Debug, PartialEq)]
39//! enum Route {
40//!     #[layout(Navigation)]
41//!     #[route("/")]
42//!     Home {},
43//! }
44//!
45//!
46//! #[component]
47//! fn Navigation() -> Element {
48//!     let navbar_config = NavbarConfig {
49//!         background_color: ColorScheme::Dark,
50//!         nav_header: Some(String::from("Freyr")),
51//!         orientation: Some(Orientation::Center),
52//!         header_color: HeaderColor::Light,
53//!         nav_items: vec!["Home".to_string(), "About".to_string(), "Contact".to_string()],
54//!         nav_links: vec!["/".to_string(), "/about".to_string(), "/contact".to_string()],
55//!         nav_item_color: NavItemsColor::Custom("#990000"),
56//!         icon_color: IconColor::Custom("#99cc00"), // Sets the color for both the hamburger SVG and the cross SVG.
57//!     };
58//!
59//!     rsx! {
60//!         Navbar { navbar_config }
61//!         Outlet::<Route> {}
62//!     }
63//! }
64//!
65//! #[component]
66//! fn Home() -> Element {
67//!     rsx! {
68//!         div {
69//!             BasicButton { color: ButtonColor::Freyr, label: String::from("Go Home"), link: ButtonUrl { url: "/".to_string() } }
70//!             BasicButton { color: ButtonColor::Primary, label: String::from("Go to About"), link: ButtonUrl { url: "/about".to_string() } }
71//!             // Here the routing is made optional
72//!             BasicButton { color: ButtonColor::Freyr, label: String::from("Hello") }
73//!
74//!         }
75//!     }
76//! }
77//!
78//! #[component]
79//! fn Dropdown() -> Element {
80//!     let dropdown_items = vec![
81//!        DropdownItem { label: String::from("Freyr"), url: String::from("/") },
82//!        DropdownItem { label: "See freyr's components".to_string(), url: "/components".to_string() },
83//!        DropdownItem { label: "Learn about dioxus".to_string(), url: "/learn-dioxus".to_string() },
84//!    ];
85//!
86//!    let config_dropdown = DropdownConfig {
87//!        title: String::from("Menu"),
88//!        label: dropdown_items,
89//!        background_color: DropdownColorScheme::Freyr,
90//!        title_color: DropdownTitleColor::Light,
91//!        labels_color: DropdownLabelsColor::Dark,
92//!        hover_color: DropdownHoverColor::Custom("#03346E"),
93//!    };
94//!     rsx! {
95//!         div {
96//!             DropdownMenu { config_dropdown }
97//!         }
98//!     }
99//! }
100//! ```
101//!
102//! For more documentation about the actual components, please go to the [functions](https://docs.rs/freyr/latest/freyr/#functions).
103mod accordion;
104mod assets;
105mod basic_button;
106mod carousel;
107mod dialog;
108mod dropdown;
109mod enums;
110mod nav_bar;
111mod navbar_with_logo;
112pub mod prelude;
113mod scripts;
114mod spinner;
115mod tabs;
116mod card;
117
118pub use crate::accordion::*;
119pub use crate::basic_button::*;
120pub use crate::carousel::*;
121pub use crate::dialog::*;
122pub use crate::dropdown::*;
123pub use crate::enums::accordion_enums::*;
124pub use crate::enums::basic_button_enums::*;
125pub use crate::enums::carousel_simple_enums::*;
126pub use crate::enums::dialog_enums::*;
127pub use crate::enums::dropdown_enums::*;
128pub use crate::enums::navbar_enums::*;
129pub use crate::enums::tabs_enums::*;
130pub use crate::nav_bar::*;
131pub use crate::spinner::*;
132pub use crate::navbar_with_logo::*;
133pub use crate::tabs::*;
134pub use crate::card::*;