2024-07-02 17:20:58 +08:00
|
|
|
# Toast
|
|
|
|
|
2024-07-03 17:27:29 +08:00
|
|
|
```rust demo
|
2024-07-11 23:30:35 +08:00
|
|
|
let toaster = ToasterInjection::expect_context();
|
2024-07-03 17:27:29 +08:00
|
|
|
|
|
|
|
let on_click = move |_| {
|
2024-07-11 23:30:35 +08:00
|
|
|
toaster.dispatch_toast(view! {
|
|
|
|
<Toast>
|
|
|
|
<ToastTitle>"Email sent"</ToastTitle>
|
|
|
|
<ToastBody>
|
|
|
|
"This is a toast body"
|
|
|
|
<ToastBodySubtitle slot>
|
|
|
|
"Subtitle"
|
|
|
|
</ToastBodySubtitle>
|
|
|
|
</ToastBody>
|
|
|
|
<ToastFooter>
|
|
|
|
"Footer"
|
|
|
|
// <Link>Action</Link>
|
|
|
|
// <Link>Action</Link>
|
|
|
|
</ToastFooter>
|
|
|
|
</Toast>
|
|
|
|
}.into_any(), Default::default());
|
2024-07-03 17:27:29 +08:00
|
|
|
};
|
|
|
|
|
2024-07-02 17:20:58 +08:00
|
|
|
view! {
|
2024-07-03 17:27:29 +08:00
|
|
|
<Button on_click=on_click>"Make toast"</Button>
|
2024-07-02 17:20:58 +08:00
|
|
|
}
|
2024-07-11 23:30:35 +08:00
|
|
|
```
|
2024-07-02 17:20:58 +08:00
|
|
|
|
2024-07-11 23:30:35 +08:00
|
|
|
### Toast Positions
|
|
|
|
|
|
|
|
```rust demo
|
|
|
|
let toaster = ToasterInjection::expect_context();
|
|
|
|
|
|
|
|
let dispatch_toast = Callback::new(move |position| {
|
|
|
|
toaster.dispatch_toast(view! {
|
|
|
|
<Toast>
|
|
|
|
<ToastTitle>"Email sent"</ToastTitle>
|
|
|
|
<ToastBody>
|
|
|
|
"This is a toast body"
|
|
|
|
<ToastBodySubtitle slot>
|
|
|
|
"Subtitle"
|
|
|
|
</ToastBodySubtitle>
|
|
|
|
</ToastBody>
|
|
|
|
<ToastFooter>
|
|
|
|
"Footer"
|
|
|
|
// <Link>Action</Link>
|
|
|
|
// <Link>Action</Link>
|
|
|
|
</ToastFooter>
|
|
|
|
</Toast>
|
|
|
|
}.into_any(), ToastOptions::default().with_position(position));
|
|
|
|
});
|
|
|
|
|
|
|
|
view! {
|
|
|
|
<Space>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::Bottom)>"Bottom"</Button>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::BottomStart)>"BottomStart"</Button>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::BottomEnd)>"BottomEnd"</Button>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::Top)>"Top"</Button>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::TopStart)>"Topstart"</Button>
|
|
|
|
<Button on_click=move |_| dispatch_toast.call(ToastPosition::TopEnd)>"TopEnd"</Button>
|
|
|
|
</Space>
|
|
|
|
}
|
|
|
|
```
|