⚠️ Yew Alert

📜 简介

Yew Alert 是 Yew 框架的一个简单而灵活的警报组件，旨在提供可定制的响应式警报，以增强用户交互。

🤔 为什么这个组件有用？

警报组件为您的网络应用程序提供了一些好处

1. ⚙️ 可定制性：根据您的应用程序的设计和需求定制警报的外观和行为。

2. 🚀 响应式设计：确保在各种设备和屏幕尺寸上显示和交互的最佳效果。

3. 💬 简单集成：轻松将警报集成到 Yew 项目中，无需复杂的设置和配置。

⚙️ 安装

将 Yew Alert 集成到您的 Yew 项目中非常简单。请按照以下步骤操作

1. 确保您已经在项目中设置了 Yew。如果没有，请参阅 Yew 文档 了解安装说明。

2. 使用您首选的包管理器安装库

   $ cargo add yew-alert
   

3. 开始使用警报组件来增强您应用程序的用户反馈。

🛠️ 使用方法

将 Yew Alert 集成到您的应用程序中非常简单。请按照以下步骤操作

1. 将警报组件导入到您的 Yew 项目中

   use yew::prelude::*;
   use yew_alert::Alert;
   

2. 定义警报属性并在您的 Yew 组件中使用警报组件

   #[function_component(App)]
   pub fn app() -> Html {
       let show_alert = use_state(|| true);
       html! {
           <Alert
               message={"This is an alert message"}
               show_alert={show_alert}
               timeout={2500}
               title={"Alert Title"}
               alert_class={"w-96 h-48 text-white"}
               icon_class={"flex justify-center"}
               confirm_button_text={"Okay"}
               cancel_button_text={"Cancel"}
               confirm_button_class={"bg-green-500 text-white rounded"}
               cancel_button_class={"bg-red-500 text-white rounded"}
               show_confirm_button={true}
               show_cancel_button={true}
               show_close_button={true}
               on_confirm={Callback::noop()}
               on_cancel={Callback::noop()}
               position={"top-right"}
               container_class={"flex items-center text-center justify-center bg-gray-800 text-white border border-gray-600"}
               title_class={"dark:text-white"}
               message_class={"dark:text-gray-300"}
               icon_type={"success"}
               icon_color={""}
               icon_width={"50"}
           />
       }
   }
   

3. 使用提供的 props 定制警报的外观和行为。

4. 使用 Yew Alert 增强用户反馈。

🔧 Props

主要 Props

样式和布局 Props

按钮 Props

定位和布局属性

图标属性

📙 示例

在示例文件夹中探索不同的样式和功能。

🤝 贡献

我们欢迎社区贡献以增强此组件。请随意打开问题、提交拉取请求或提供反馈。让我们共同努力，使Yew的用户交互更加动态和用户友好！

📜 许可证

Yew Alert在MIT许可证下发布，允许您自由使用、修改和分发。有关详细信息，请参阅LICENSE文件。