From d15f759a8181a63696e1a1a3ce7d364d22d63f5a Mon Sep 17 00:00:00 2001 From: Matt Hunzinger Date: Sat, 21 Oct 2023 01:25:11 -0400 Subject: [PATCH] Add more params to text field --- src/navigation_rail.rs | 8 +++++++- src/text_field.rs | 11 +++++++++-- src/theme.rs | 4 ++++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/navigation_rail.rs b/src/navigation_rail.rs index aa62ab7..9a77faa 100644 --- a/src/navigation_rail.rs +++ b/src/navigation_rail.rs @@ -21,7 +21,13 @@ pub fn NavigationRail<'a>(cx: Scope<'a>, children: Element<'a>) -> Element<'a> { } #[component] -pub fn NavigationRailItem<'a>(cx: Scope<'a>, icon: Element<'a>, label: Element<'a>, is_selected: bool, onselect: EventHandler<'a, MouseEvent>) -> Element<'a> { +pub fn NavigationRailItem<'a>( + cx: Scope<'a>, + icon: Element<'a>, + label: Element<'a>, + is_selected: bool, + onselect: EventHandler<'a, MouseEvent>, +) -> Element<'a> { let theme = use_theme(cx); render!( diff --git a/src/text_field.rs b/src/text_field.rs index 354efa6..00ba95e 100644 --- a/src/text_field.rs +++ b/src/text_field.rs @@ -1,3 +1,4 @@ +use crate::use_theme; use dioxus::prelude::*; use dioxus_spring::{use_animated, use_spring}; use dioxus_use_mounted::use_mounted; @@ -9,8 +10,11 @@ pub fn TextField<'a>( label: &'a str, value: &'a str, onchange: EventHandler<'a, FormEvent>, + background: Option<&'a str>, + font_size: Option, ) -> Element<'a> { let is_populated = use_state(cx, || !value.is_empty()); + let theme = use_theme(cx); let spring = use_spring( cx, @@ -35,11 +39,14 @@ pub fn TextField<'a>( ) }); + let background = background.unwrap_or(&theme.background_color); + let font_size = font_size.unwrap_or(theme.label_medium); + render!( div { position: "relative", width: "200px", - background: "#eeeeee", + background: "{background}", font_family: "sans-serif", border_bottom: "2px solid #999", label { onmounted: move |event| mounted.onmounted(event), "{label}" } @@ -50,7 +57,7 @@ pub fn TextField<'a>( value: *value, padding: "10px 20px", padding_top: "30px", - font_size: "16px", + font_size: "{font_size}px", height: "34px", border: "none", outline: "none", diff --git a/src/theme.rs b/src/theme.rs index c40a379..8072413 100644 --- a/src/theme.rs +++ b/src/theme.rs @@ -3,16 +3,20 @@ use std::{borrow::Cow, rc::Rc}; pub struct Theme { pub primary_color: Cow<'static, str>, + pub background_color: Cow<'static, str>, pub secondary_container_color: Cow<'static, str>, pub border_radius: Cow<'static, str>, + pub label_medium: f32, } impl Default for Theme { fn default() -> Self { Self { primary_color: Cow::Borrowed("#416529"), + background_color: Cow::Borrowed("#eeeeee"), secondary_container_color: Cow::Borrowed("#E8DEF8"), border_radius: Cow::Borrowed("25px"), + label_medium: 16., } } }