Crate freyr

Expand description

§Freyr UI Components Library for Dioxus.

This crate provides a set of customizable UI components for use in Dioxus projects. It allows developers to easily integrate and style components such as navbars, carousels and buttons, with flexible configuration options for color schemes and layouts. Just make it your own!

§Why the name Freyr?

Freyr is the norse god of fertility and prosperity and is known for his beauty. Your Dioxus web app should also look good.

§Warning:

This component is in the early stage of development. Right now there are only five components available: the navbar, the dropdown, the two carousel and the buttons. New components will be added, and some features that already exist may change. 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.

§Features

Buttons
Tabs
Navbar
Accordion
Carousel
Dropdown
Dialog
Spinner

All those components have more features than you think. For more information about them please chack them here.

§Key Features

Full customization of colors, sizes, and layouts using configuration structs and enums.
Easy integration into Dioxus web projects.

§Example Usage

#![allow(non_snake_case)]
use dioxus::prelude::*;
use freyr::prelude::*;

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[layout(Navigation)]
    #[route("/")]
    Home {},
}


#[component]
fn Navigation() -> Element {
    let navbar_config = NavbarConfig {
        background_color: ColorScheme::Dark,
        nav_header: Some(String::from("Freyr")),
        orientation: Some(Orientation::Center),
        header_color: HeaderColor::Light,
        nav_items: vec!["Home".to_string(), "About".to_string(), "Contact".to_string()],
        nav_links: vec!["/".to_string(), "/about".to_string(), "/contact".to_string()],
        nav_item_color: NavItemsColor::Custom("#990000"),
        icon_color: IconColor::Custom("#99cc00"), // Sets the color for both the hamburger SVG and the cross SVG.
    };

    rsx! {
        Navbar { navbar_config }
        Outlet::<Route> {}
    }
}

#[component]
fn Home() -> Element {
    rsx! {
        div {
            BasicButton { color: ButtonColor::Freyr, label: String::from("Go Home"), link: ButtonUrl { url: "/".to_string() } }
            BasicButton { color: ButtonColor::Primary, label: String::from("Go to About"), link: ButtonUrl { url: "/about".to_string() } }
            // Here the routing is made optional
            BasicButton { color: ButtonColor::Freyr, label: String::from("Hello") }

        }
    }
}

#[component]
fn Dropdown() -> Element {
    let dropdown_items = vec![
       DropdownItem { label: String::from("Freyr"), url: String::from("/") },
       DropdownItem { label: "See freyr's components".to_string(), url: "/components".to_string() },
       DropdownItem { label: "Learn about dioxus".to_string(), url: "/learn-dioxus".to_string() },
   ];

   let config_dropdown = DropdownConfig {
       title: String::from("Menu"),
       label: dropdown_items,
       background_color: DropdownColorScheme::Freyr,
       title_color: DropdownTitleColor::Light,
       labels_color: DropdownLabelsColor::Dark,
       hover_color: DropdownHoverColor::Custom("#03346E"),
   };
    rsx! {
        div {
            DropdownMenu { config_dropdown }
        }
    }
}

For more documentation about the actual components, please go to the functions.

Re-exports§

pub use BasicButton_completions::Component::BasicButton;
pub use CarouselSimple_completions::Component::CarouselSimple;
pub use CarouselWithTimer_completions::Component::CarouselWithTimer;
pub use CarouselWithNumbers_completions::Component::CarouselWithNumbers;
pub use DropdownMenu_completions::Component::DropdownMenu;
pub use DropdownMenuButton_completions::Component::DropdownMenuButton;
pub use Navbar_completions::Component::Navbar;
pub use NavbarDropdown_completions::Component::NavbarDropdown;
pub use NavbarDropdownButtons_completions::Component::NavbarDropdownButtons;
pub use NavbarWithLogo_completions::Component::NavbarWithLogo;

Modules§

prelude

Structs§

AccordionCustomProps
AccordionLeftProps: The “title”, “icon_color”, and “children” properties are mandatory, but all the other ones are optional propreties.
AccordionProps: Props are: title, accordion_text, optional_text, icon_color, class, title_class, accordion_wrapper, accordion_content
BasicButtonProps: Properties for the BasicButton component.
ButtonProps
ButtonUrl
CarouselItem
CarouselSimpleProps: Properties for the CarouselSimple component.
CarouselWithNumbersProps: Properties for the CarouselWithNumbers component.
CarouselWithTimerProps: Properties for the CarouselWithTimer component.
DialogProps
DialogWithoutButtonProps
DropdownButtonConfig
DropdownConfig: DropdownConfig holds the configuration for the dropdown menu, including the list of dropdown items, background color, and text color.
DropdownConfigNavBar: Represents a dropdown configuration with its label and items.
DropdownItem: DropdownItem represents an individual item in the dropdown menu, containing a label and a URL for navigation.
DropdownMenuButtonProps: Properties for the DropdownMenuButton component.
DropdownMenuProps: Properties for the DropdownMenu component.
NavbarConfig: Configuration struct for the Navbar component.
NavbarDropdownButtonsProps: Properties for the NavbarDropdownButtons component.
NavbarDropdownConfig: Configuration struct for the NavbarDropdown component.
NavbarDropdownProps: Properties for the NavbarDropdown component.
NavbarProps: Properties for the Navbar component.
NavbarWithLogoConfig: Configuration struct for the NavbarWithLogo component.
NavbarWithLogoProps: Properties for the NavbarWithLogo component.
TabsProps
TabsSecondaryProps

Enums§

AccordionColor
AccordionIconColor: Defines different color options for navigation items.
ButtonColor: Enum that defines which color you want to use for the button.
ColorScheme: Configuration options for the Navbar component, including color schemes and menu settings. Represents different background color schemes for the navbar.
DropdownColorScheme: Represents different background color schemes for the dropdown.
DropdownHoverColor: Defines different color options for dropdown background hover color.
DropdownLabelsColor: Defines different color options for dropdown labels.
DropdownTitleColor: Defines different color options for the title of the dropdown.
HeaderColor
IconColor: Specifies color options for the menu icons (hamburger and cross).
NavItemsColor: Defines different color options for navigation items.
Orientation
TabsColor

Functions§

Accordion: Standard accordion usage example:
AccordionCustom: Accordion Custom content example:
AccordionLeft: Accordion where the icon and title are placed on the left:
BasicButton: Defines which kind of button you want to use: Freyr, Primary, Success, Danger, Black or Transparent. You may also add a route.
CarouselSimple: A simple carousel component for Dioxus.
CarouselWithNumbers: To be used like the CarouselSimple component.
CarouselWithTimer: Use it like the CarouselSimple component, just add the timer_seconds prop like that: timer_seconds: 5
Dialog: Usage example of the dialog component:
DialogWithoutButton: This dialog is similar to the Dialog component but does not get a starting button to display it. Instead, you have to create your own button or whatever you want to activate it.
DropdownMenu: DropdownMenu is a customizable dropdown menu component. You can pass a DropdownConfig to customize the list of items, background color, and text color.
DropdownMenuButton: Usage example of a dropdown that passes onclick events to its items like a dummy counter:
EventButton: Usage of the button with an event attached to it:
Navbar: You can configure background color, navigation items, and icon colors.
NavbarDropdown: Navbar with a Dropdown menu implementation example:
NavbarDropdownButtons: Example use of the navbar with a dropdown menu that allows you to pass onclick events. This example introduces the use of dioxus-i18n for internationalization.
NavbarWithLogo: This navbar works the same as the normal navbar component, but instead of taking a logo as String it takes an image.
Spinner: Usage example:
TabsPrimary: Tabs usage example:
TabsSecondary: Code implementation:

Crate freyrCopy item path