mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
commit
7316fb978a
17 changed files with 685 additions and 60 deletions
|
@ -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/>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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::*;
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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"/>
|
||||
|
|
100
demo/src/pages/progress/mod.rs
Normal file
100
demo/src/pages/progress/mod.rs
Normal 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>
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
20
src/progress/theme.rs
Normal 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(),
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue