feat: Button adds button_type prop

This commit is contained in:
luoxiao 2024-08-22 00:08:00 +08:00 committed by luoxiaozero
parent f7b91eeb46
commit 4652706fa4
2 changed files with 34 additions and 12 deletions

View file

@ -76,6 +76,9 @@ pub fn Button(
/// A button supports different sizes.
#[prop(optional, into)]
size: MaybeSignal<ButtonSize>,
/// The default behavior of the button.
#[prop(optional, into)]
button_type: MaybeProp<ButtonType>,
/// Whether the button is displayed as block.
#[prop(optional, into)]
block: MaybeSignal<bool>,
@ -120,7 +123,7 @@ pub fn Button(
move || format!("thaw-button--{}", shape.get().as_str()),
class
]
type=move || button_type.get().map(|t| t.as_str())
disabled=move || disabled.get().then_some("")
aria-disabled=move || disabled_focusable.get().then_some("true")
on:click=on_click
@ -141,3 +144,20 @@ pub fn Button(
</button>
}
}
#[derive(Debug, Clone)]
pub enum ButtonType {
Submit,
Reset,
Button,
}
impl ButtonType {
pub fn as_str(&self) -> &'static str {
match self {
Self::Submit => "submit",
Self::Reset => "reset",
Self::Button => "button",
}
}
}

View file

@ -50,19 +50,21 @@ view! {
<ComboboxOption value="dog" text="Dog" />
</Combobox>
</Field>
<button
type="submit"
on:click={
let field_context = FieldContextInjection::expect_context();
move |e| {
if !field_context.validate() {
e.prevent_default();
<div style="margin-top: 8px">
<Button
button_type=ButtonType::Submit
on_click={
let field_context = FieldContextInjection::expect_context();
move |e: ev::MouseEvent| {
if !field_context.validate() {
e.prevent_default();
}
}
}
}
>
"Submit"
</button>
>
"Submit"
</Button>
</div>
</FieldContextProvider>
</form>
}