feat: Spinner adds children prop

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

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 ### Spinner Props
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ----- | -------------------------- | --------------------- | ---------------------------------- | | -------- | -------------------------- | --------------------- | ---------------------------------- |
| class | `MaybeProp<String>` | `Default::default()` | | | class | `MaybeProp<String>` | `Default::default()` | |
| label | `MaybeProp<String>` | `Default::default()` | An optional label for the Spinner. | | label | `MaybeProp<String>` | `Default::default()` | An optional label for the Spinner. |
| size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner. | | size | `MaybeSignal<SpinnerSize>` | `SpinnerSize::Medium` | The size of the spinner. |
| children | `Option<Children>` | `None` | |

View file

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