Merge pull request #19 from thaw-ui/docs/demo

Docs/demo
This commit is contained in:
luoxiaozero 2023-11-15 23:10:55 +08:00 committed by GitHub
commit 7316fb978a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 685 additions and 60 deletions

View file

@ -83,6 +83,7 @@ fn TheRouter() -> impl IntoView {
<Route path="/loading-bar" view=LoadingBarPage/>
<Route path="/breadcrumb" view=BreadcrumbPage/>
<Route path="/layout" view=LayoutPage/>
<Route path="/progress" view=ProgressPage/>
</Route>
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>

View file

@ -193,7 +193,7 @@ pub fn ButtonPage() -> impl IntoView {
}
#[component]
pub fn LoadingButton() -> impl IntoView {
fn LoadingButton() -> impl IntoView {
let loading = create_rw_signal(false);
let on_click = move |_| {
loading.set(true);

View file

@ -205,6 +205,10 @@ pub(crate) fn gen_menu_data() -> Vec<MenuGroupOption> {
value: "modal".into(),
label: "Modal".into(),
},
MenuItemOption {
value: "progress".into(),
label: "Progress".into(),
},
MenuItemOption {
value: "skeleton".into(),
label: "Skeleton".into(),

View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn InputPage() -> impl IntoView {
@ -43,6 +43,72 @@ pub fn InputPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Input Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<String>"</td>
<td>r#""""#</td>
<td>"Set the input value"</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<InputVariant>"</td>
<td>"InputVariant::Text"</td>
<td>"Button's variant."</td>
</tr>
<tr>
<td>"placeholder"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Placeholder of input."</td>
</tr>
<tr>
<td>"allow_value"</td>
<td>"Option<Callback<String, bool>>"</td>
<td>"None"</td>
<td>"Check the incoming value, if it returns false, input will not be accepted."</td>
</tr>
<tr>
<td>"on_focus"</td>
<td>"Option<Callback<ev::FocusEvent>>"</td>
<td>"None"</td>
<td>"Callback triggered when the input is focussed on."</td>
</tr>
<tr>
<td>"on_blur"</td>
<td>"Option<Callback<ev::FocusEvent>>"</td>
<td>"None"</td>
<td>"Callback triggered when the input is blurred."</td>
</tr>
</tbody>
</Table>
<h3>"Input Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"InputSuffix"</td>
<td>"None"</td>
<td>"Input content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn InputNumberPage() -> impl IntoView {
@ -36,6 +36,41 @@ pub fn InputNumberPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"InputNumber Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"RwSignal<T>"</td>
<td>"T::default()"</td>
<td>"Set the input value."</td>
</tr>
<tr>
<td>"placeholder"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Placeholder of input number."</td>
</tr>
<tr>
<td>"step"</td>
<td>"MaybeSignal<T>"</td>
<td></td>
<td>"The number which the current value is increased or decreased on key or button press."</td>
</tr>
</tbody>
</Table>
<h3>"T impl"</h3>
<p>
"T: Add<Output = T> + Sub<Output = T> + Default + Clone + FromStr + ToString + 'static"
</p>
</div>
}
}

View file

@ -57,6 +57,105 @@ pub fn LayoutPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Layout Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Layout's content."</td>
</tr>
</tbody>
</Table>
<h3>"Layout Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Layout's style."</td>
</tr>
<tr>
<td>"position"</td>
<td>"LayoutPosition"</td>
<td>"LayoutPosition::Static"</td>
<td>"static position will make it css position set to static. absolute position will make it css position set to absolute and left, right, top, bottom to 0. absolute position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect."</td>
</tr>
<tr>
<td>"has_sider"</td>
<td>"MaybeSignal<bool>"</td>
<td>"false"</td>
<td>"Whether the component has sider inside. If so it must be true."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Layout's content."</td>
</tr>
</tbody>
</Table>
<h3>"LayoutHeader, LayoutSider Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"style"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"LayoutHeader's style."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"LayoutHeader's content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -57,6 +57,33 @@ pub fn LoadingBarPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"LoadingBar Injection Methods"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"start"</td>
<th>"fn(&self)"</th>
<td>"Callback function for loading bar to start loading."</td>
</tr>
<tr>
<td>"finish"</td>
<th>"fn(&self)"</th>
<td>"The callback function when the loading bar finishes loading."</td>
</tr>
<tr>
<td>"error"</td>
<th>"fn(&self)"</th>
<td>"Callback function for loading bar error."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn MenuPage() -> impl IntoView {
@ -32,6 +32,81 @@ pub fn MenuPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Menu Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"value"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The selected item key of the menu."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Menu's content."</td>
</tr>
</tbody>
</Table>
<h3>"MenuGroup Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"label"</td>
<td>"String"</td>
<td></td>
<td>"The label of the menu group."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"MenuGroup's content."</td>
</tr>
</tbody>
</Table>
<h3>"MenuItem Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"label"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The label of the menu item."</td>
</tr>
<tr>
<td>"key"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"The indentifier of the menu item."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn MessagePage() -> impl IntoView {
@ -72,6 +72,23 @@ pub fn MessagePage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"MessageProvider Injection Methods"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"create"</td>
<td>"fn(&self, content: String, variant: MessageVariant, options: MessageOptions)"</td>
<td>"The label of the menu item."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -23,6 +23,7 @@ mod message;
mod mobile;
mod modal;
mod nav_bar;
mod progress;
mod radio;
mod select;
mod skeleton;
@ -61,6 +62,7 @@ pub use message::*;
pub use mobile::*;
pub use modal::*;
pub use nav_bar::*;
pub use progress::*;
pub use radio::*;
pub use select::*;
pub use skeleton::*;

View file

@ -1,7 +1,7 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use thaw::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ModalPage() -> impl IntoView {
@ -34,6 +34,55 @@ pub fn ModalPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"Modal Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"show"</td>
<td>"MaybeSignal<bool>"</td>
<td></td>
<td>"Whether to show modal."</td>
</tr>
<tr>
<td>"title"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"Modal title."</td>
</tr>
<tr>
<td>"children"</td>
<td>"Children"</td>
<td></td>
<td>"Modal's content."</td>
</tr>
</tbody>
</Table>
<h3>"Modal Slots"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"ModalFooter"</td>
<td>"None"</td>
<td>"Footer content."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -3,8 +3,9 @@ use crate::{
pages::MobilePage,
};
use leptos::*;
use thaw::mobile::NavBar;
use prisms::highlight_str;
use thaw::mobile::NavBar;
use thaw::Table;
#[component]
pub fn NavBarPage() -> impl IntoView {
@ -43,6 +44,55 @@ pub fn NavBarPage() -> impl IntoView {
""
</DemoCode>
</Demo>
<h3>"NavBar Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"title"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"NavBar title."</td>
</tr>
<tr>
<td>"left_arrow"</td>
<td>"MaybeSignal<bool>"</td>
<td></td>
<td>"Whether to show left arrow."</td>
</tr>
<tr>
<td>"left_text"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"NavBar left text."</td>
</tr>
<tr>
<td>"on_click_left"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"NavBar left click."</td>
</tr>
<tr>
<td>"right_text"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"NavBar right text."</td>
</tr>
<tr>
<td>"on_click_right"</td>
<td>"MaybeSignal<String>"</td>
<td>r#""""#</td>
<td>"NavBar right click."</td>
</tr>
</tbody>
</Table>
</div>
<div>
<MobilePage path="/thaw?path=/mobile/nav-bar"/>

View file

@ -0,0 +1,100 @@
use crate::components::{Demo, DemoCode};
use leptos::*;
use prisms::highlight_str;
use thaw::*;
#[component]
pub fn ProgressPage() -> impl IntoView {
let percentage = create_rw_signal(0.0f32);
view! {
<div style="width: 896px; margin: 0 auto;">
<h1>"Progress"</h1>
<Demo>
<Space vertical=true>
<Progress percentage show_indicator=false/>
<Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/>
<Progress percentage variant=ProgressVariant::Warning/>
<Progress percentage variant=ProgressVariant::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%"
</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>
"+10%"
</Button>
</Space>
</Space>
<DemoCode
slot
html=highlight_str!(
r#"
let percentage = create_rw_signal(0.0f32);
view! {
<Space vertical=true>
<Progress percentage show_indicator=false/>
<Progress percentage />
<Progress percentage indicator_placement=ProgressIndicatorPlacement::Inside/>
<Progress percentage variant=ProgressVariant::Success/>
<Progress percentage variant=ProgressVariant::Warning/>
<Progress percentage variant=ProgressVariant::Error/>
<Space>
<Button on_click=move |_| percentage.update(|v| *v -= 10.0)>
"-10%"
</Button>
<Button on_click=move |_| percentage.update(|v| *v += 10.0)>
"+10%"
</Button>
</Space>
</Space>
}
"#,
"rust"
)
>
""
</DemoCode>
</Demo>
<h3>"Progress Props"</h3>
<Table single_column=true>
<thead>
<tr>
<th>"Name"</th>
<th>"Type"</th>
<th>"Default"</th>
<th>"Description"</th>
</tr>
</thead>
<tbody>
<tr>
<td>"percentage"</td>
<td>"MaybeSignal<f32>"</td>
<td>"0"</td>
<td>"Percentage value."</td>
</tr>
<tr>
<td>"variant"</td>
<td>"MaybeSignal<ProgressVariant>"</td>
<td>"ProgressVariant::Primary"</td>
<td>"Progress variant."</td>
</tr>
<tr>
<td>"show_indicator"</td>
<td>"MaybeSignal<bool>"</td>
<td>"true"</td>
<td>"Whether to display indicators."</td>
</tr>
<tr>
<td>"indicator_placement"</td>
<td>"MaybeSignal<ProgressIndicatorPlacement>"</td>
<td>"ProgressIndicatorPlacement::Outside"</td>
<td>"Indicator placement."</td>
</tr>
</tbody>
</Table>
</div>
}
}

View file

@ -1,32 +1,117 @@
use crate::utils::{mount_style, StoredMaybeSignal};
mod theme;
use crate::{use_theme, utils::mount_style, Theme};
use leptos::*;
pub use theme::ProgressTheme;
#[derive(Default, Clone, PartialEq)]
pub enum ProgressIndicatorPlacement {
#[default]
Outside,
Inside,
}
impl Copy for ProgressIndicatorPlacement {}
impl ProgressIndicatorPlacement {
pub fn as_str(&self) -> &'static str {
match self {
ProgressIndicatorPlacement::Outside => "outside",
ProgressIndicatorPlacement::Inside => "inside",
}
}
}
#[derive(Default, Clone)]
pub enum ProgressVariant {
#[default]
Primary,
Success,
Warning,
Error,
}
impl ProgressVariant {
fn theme_background_color(&self, theme: &Theme) -> String {
match self {
Self::Primary => theme.common.color_primary.clone(),
Self::Success => theme.common.color_success.clone(),
Self::Warning => theme.common.color_warning.clone(),
Self::Error => theme.common.color_error.clone(),
}
}
}
#[component]
pub fn Progress(
#[prop(optional, into)] left_tip: MaybeSignal<String>,
#[prop(optional, into)] right_tip: MaybeSignal<String>,
percentage: ReadSignal<f64>,
#[prop(into, optional)] percentage: MaybeSignal<f32>,
#[prop(into, optional)] variant: MaybeSignal<ProgressVariant>,
#[prop(into, default = MaybeSignal::Static(true))] show_indicator: MaybeSignal<bool>,
#[prop(into, optional)] indicator_placement: MaybeSignal<ProgressIndicatorPlacement>,
) -> impl IntoView {
mount_style("progress", include_str!("./progress.css"));
let style = move || format!("width: {}%", percentage.get());
let left_tip: StoredMaybeSignal<_> = left_tip.into();
let right_tip: StoredMaybeSignal<_> = right_tip.into();
let theme = use_theme(Theme::light);
let css_vars = create_memo(move |_| {
let mut css_vars = String::new();
theme.with(|theme| {
css_vars.push_str(&format!(
"--thaw-background-color: {};",
theme.progress.background_color
));
css_vars.push_str(&format!(
"--thaw-inner-background-color: {};",
variant.get().theme_background_color(theme)
));
});
css_vars
});
let style = move || {
let percentage = percentage.get();
let percentage = if percentage < 0.0 {
0.0
} else if percentage > 100.0 {
100.0
} else {
percentage
};
format!("width: {}%;", percentage)
};
let class = move || {
let mut class = String::from("thaw-progress__progress");
class.push_str(&format!(
" thaw-progress__progress--indicator-{}",
indicator_placement.get().as_str()
));
class
};
view! {
<div class="thaw-progress">
<span class="thaw-progress__tip-left">
<Show when=move || left_tip.with(|v| !v.is_empty())>{move || left_tip.get()}</Show>
</span>
<span class="thaw-progress__progress">
<span class="thaw-progress__progress-inner" style=style>
<span class="thaw-progress__progress-circle"></span>
</span>
</span>
<span class="thaw-progress__tip-right">
<Show when=move || {
right_tip.with(|v| !v.is_empty())
}>{move || right_tip.get()}</Show>
</span>
<div class="thaw-progress" style=move || css_vars.get() >
<div class=class>
<div class="thaw-progress__progress-inner" style=style>
<Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Inside>
<div class="thaw-progress__indicator--inside">
{
move || {
format!("{}%", percentage.get())
}
}
</div>
</Show>
</div>
</div>
<Show when=move || show_indicator.get() && indicator_placement.get() == ProgressIndicatorPlacement::Outside>
<div class="thaw-progress__indicator--outside">
{
move || {
format!("{}%", percentage.get())
}
}
</div>
</Show>
</div>
}
}

View file

@ -3,45 +3,37 @@
display: flex;
justify-content: center;
align-items: center;
height: 24px;
padding: 0 8px;
}
.thaw-progress__tip-right,
.thaw-progress__tip-left {
display: inline-block;
margin: 0 10px;
width: 48px;
text-align: center;
font-size: 12px;
color: #777;
}
.thaw-progress__progress {
flex: 1;
height: 3px;
background: #f2f2f2;
border-radius: 2px;
/* cursor: pointer; */
position: relative;
height: 8px;
line-height: 8px;
background: var(--thaw-background-color);
border-radius: 4px;
}
.thaw-progress__progress--indicator-inside {
height: 16px;
line-height: 16px;
font-size: 12px;
border-radius: 8px;
}
.thaw-progress__progress-inner {
position: relative;
top: -14px;
display: inline-block;
background: red;
position: absolute;
background: var(--thaw-inner-background-color);
height: 100%;
border-radius: inherit;
transition: width 0.1s;
}
.thaw-progress__progress-circle {
display: inline-block;
position: absolute;
right: -3px;
top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 3px 2px #4443;
.thaw-progress__indicator--outside {
padding: 0 8px;
}
.thaw-progress__indicator--inside {
text-align: right;
margin: 0 12px;
}

20
src/progress/theme.rs Normal file
View file

@ -0,0 +1,20 @@
use crate::theme::ThemeMethod;
#[derive(Clone)]
pub struct ProgressTheme {
pub background_color: String,
}
impl ThemeMethod for ProgressTheme {
fn light() -> Self {
Self {
background_color: "#ebebeb".into(),
}
}
fn dark() -> Self {
Self {
background_color: "#ffffff1f".into(),
}
}
}

View file

@ -4,8 +4,8 @@ use self::common::CommonTheme;
use crate::{
mobile::{NavBarTheme, TabbarTheme},
AlertTheme, AutoCompleteTheme, AvatarTheme, BreadcrumbTheme, ButtonTheme, ColorPickerTheme,
InputTheme, MenuTheme, MessageTheme, SelectTheme, SkeletionTheme, SliderTheme, SwitchTheme,
TableTheme, TagTheme, UploadTheme,
InputTheme, MenuTheme, MessageTheme, ProgressTheme, SelectTheme, SkeletionTheme, SliderTheme,
SwitchTheme, TableTheme, TagTheme, UploadTheme,
};
use leptos::*;
@ -36,6 +36,7 @@ pub struct Theme {
pub auto_complete: AutoCompleteTheme,
pub color_picker: ColorPickerTheme,
pub breadcrumb: BreadcrumbTheme,
pub progress: ProgressTheme,
}
impl Theme {
@ -61,6 +62,7 @@ impl Theme {
auto_complete: AutoCompleteTheme::light(),
color_picker: ColorPickerTheme::light(),
breadcrumb: BreadcrumbTheme::light(),
progress: ProgressTheme::light(),
}
}
pub fn dark() -> Self {
@ -85,6 +87,7 @@ impl Theme {
auto_complete: AutoCompleteTheme::dark(),
color_picker: ColorPickerTheme::dark(),
breadcrumb: BreadcrumbTheme::dark(),
progress: ProgressTheme::dark(),
}
}
}