adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Spinner adds children prop

Browse source
This commit is contained in:
luoxiao 2024-09-11 23:32:26 +08:00 • committed by luoxiaozero
parent b04feef0d1
commit 09ef9f8630
2 changed files with 42 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
thaw/src/spinner/docs/mod.md
View file

@ -23,10 +23,22 @@ view! {
}
```
### Custom label
```rust demo
view! {
<Spinner label="Label"/>
<Spinner>
<b style="color: blue">"Label"</b>
</Spinner>
}
```
### Spinner Props
| Name | Type | Default | Description |
| ----- | -------------------------- | --------------------- | ---------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| label | `MaybeProp<String>` | `Default::default()` | An optional label for the Spinner. |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner. |
| Name | Type | Default | Description |
| -------- | -------------------------- | --------------------- | ---------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | |
| label | `MaybeProp<String>` | `Default::default()` | An optional label for the Spinner. |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner. |
| children | `Option<Children>` | `None` | |

36
thaw/src/spinner/mod.rs
View file

@ -38,14 +38,16 @@ pub fn Spinner(
/// The size of the spinner.
#[prop(optional, into)]
size: MaybeSignal<SpinnerSize>,
#[prop(optional)] children: Option<Children>,
) -> impl IntoView {
mount_style("spinner", include_str!("./spinner.css"));
let id = StoredValue::new(uuid::Uuid::new_v4().to_string());
let spinner_label = label.clone();
let children_flag = children.is_some();
let labelledby = move || {
spinner_label.with(|label| {
if label.is_some() {
if label.is_some() || children_flag {
Some(id.get_value())
} else {
None
@ -66,17 +68,29 @@ pub fn Spinner(
<span class="thaw-spinner__spinner">
<span class="thaw-spinner__spinner-tail"></span>
</span>
{move || {
if let Some(label) = label.get() {
view! {
<label class="thaw-spinner__label" id=id.get_value()>
{label}
</label>
}
.into()
} else {
None
{if let Some(children) = children {
view! {
<label class="thaw-spinner__label" id=id.get_value()>
{children()}
</label>
}
.into_any()
} else {
{
move || {
if let Some(label) = label.get() {
view! {
<label class="thaw-spinner__label" id=id.get_value()>
{label}
</label>
}
.into()
} else {
None
}
}
}
.into_any()
}}
</div>
}