mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-22 22:09:22 -05:00
feat: Spinner adds children prop
This commit is contained in:
parent
b04feef0d1
commit
09ef9f8630
2 changed files with 42 additions and 16 deletions
|
@ -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` | |
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue