Leptoaster

Leptoaster是Leptos的极简toast库。它提供了一个简单的接口来向用户显示toast消息。

演示

请查看演示此处。

入门

假设您已经安装了Leptos，安装Leptoaster

cargo add leptoaster

安装后，在应用程序的根组件中提供toaster并添加Toaster组件。

use leptos::*;
use leptoaster::*;

#[component]
fn App() -> IntoView {
    provide_toaster();

    view! {
        <Toaster />
        // your other components
    }
}

Toaster组件接受一个可选的bool属性，stacked，用于定义toast是否堆叠。

use leptos::*;
use leptoaster::*;

#[component]
fn App() -> IntoView {
    provide_toaster();

    view! {
        <Toaster stacked={true} />
        // your other components
    }
}

要在任何组件中创建toast消息，只需使用expect_toaster()。

use lepto::*;
use leptoaster::*;

#[component]
fn MyComponent() -> IntoView {
    let toaster = expect_toaster();

    toaster.success("A toast message should appear!");
}

就这样！您现在可以在UI中显示toast消息了！

toaster公开了多种不同类型的toast

• 信息
• 成功
• 警告
• 错误

要自定义更多，请使用toast函数和ToastBuilder

toaster.toast(
    ToastBuilder::new("My toast message goes here.")
        .with_level(ToastLevel::Success) // set the toast level (default is `ToastLevel::Info`)
        .with_dismissable(false) // allow or disallow the toast from being dismissable (default is `true`)
        .with_expiry(Some(3_000)) // expiry in milliseconds (default is `2500`)
        .with_progress(false) // enable or disable the progress bar (default is `true`)
        .with_position(ToastPosition::TopRight) // set the toast position (default is 'ToastPosition::BottomLeft`)
);

toaster还允许您清除屏幕上当前可见的所有toast，包括非过期toast

#[component]
fn MyComponent() -> IntoView {
    let toaster = expect_toaster();

    toaster.clear();
}

样式

要自定义样式，重写以下CSS变量中的任何一个

--leptoaster-width
--leptoaster-max-width
--leptoaster-z-index

--leptoaster-font-family
--leptoaster-font-size
--leptoaster-line-height
--leptoaster-font-weight

--leptoaster-progress-height

--leptoaster-info-background-color
--leptoaster-info-border-color
--leptoaster-info-text-color

--leptoaster-success-background-color
--leptoaster-success-border-color
--leptoaster-success-text-color

--leptoaster-warn-background-color
--leptoaster-warn-border-color
--leptoaster-warn-text-color

--leptoaster-error-background-color
--leptoaster-error-border-color
--leptoaster-error-text-color