💡 Input Yew

🎬 演示

输入类型	演示
文本
密码
多行文本框
电话号码

📜 前言

这个自定义的可重用输入功能组件是专门为 Rust Yew 框架构建的解决方案。它可以无缝集成到您的 Yew 应用程序中，结合强大的功能与全面的可访问性特性。本组件着重于可重用性和可定制性，使您能够轻松创建动态输入字段，以适应各种用户输入形式。

🤔 为什么这个组件有用？

Yew 自定义可重用输入组件是一个强大的工具，旨在使您作为 Yew 开发者的生活更加轻松和愉快。让我们看看为什么这个组件是您网页开发工具箱中的必备品。

1. 🔄 可重用性：无需重复代码！此组件构建用于高度可重用，您可以在应用程序中轻松地使用它，无需任何麻烦。

2. 🎨 可定制性：您现在可以调整输入组件的外观和行为，以满足您的具体需求和美学。

3. ✔️ 验证：您可以轻松添加自定义验证函数。

4. 🎫 事件处理：组件公开了 oninput 事件处理器，使得根据您的交互实现动态行为变得超级简单。

5. ♿ 可访问性：本组件考虑到可访问性，确保它对所有人（无论能力如何）都友好且易于感知。

6. ❌ 错误处理：当用户输入无效数据时，组件会优雅地显示清晰的错误消息，指导他们进行有效数据输入，并增强整体用户体验。

⚙️ 安装

您可以通过以下简单步骤快速将 Yew 自定义可重用输入组件集成到您的 Yew 项目中

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

2. 然后，使用您首选的包管理器安装输入组件包

   $ cargo add input_yew
   

3. 最后，将组件导入到您的 Yew 应用程序中，并开始使用它来增强您的表单和用户交互。

🛠️ 使用

使用此自定义可重用输入组件非常简单！只需按照以下步骤操作

1. 将组件导入到您的 Yew 应用程序

   // Add these lines at the beginning of your file, make sure you have `regex` installed for input validation. 
   use yew::prelude::*;
   use regex::Regex;
   use input_yew::CustomInput;
   

2. 在需要输入字段的任何地方使用 CustomInput 组件

   fn validate_email(email: String) -> bool {
       let pattern = Regex::new(r"^[^ ]+@[^ ]+\.[a-z]{2,3}$").unwrap();
       pattern.is_match(&email)
   }
   
   
   #[function_component(LoginForm)]
   pub fn login_form() -> Html {
       let input_email_ref = use_node_ref();
       let input_email_handle = use_state(String::default);
       let email_valid_handle = use_state(|| true);
       let onsubmit = Callback::from(move |event: SubmitEvent| {};
       html! {
             <form action="#" aria-label="Sign In Form" onsubmit={onsubmit}>
                 <CustomInput
                   input_type={"text"}
                   input_handle={input_email_handle}
                   name={"email"}
                   input_ref={input_email_ref}
                   input_placeholder={"Email"}
                   icon_class={"fas fa-user"}
                   icon={"fas fa-user"}
                   error_message={"Enter a valid email address"}
                   form_input_field_class={"form-one-field"}
                   form_input_error_class={"error-txt"}
                   required={true}
                   input_valid_handle={email_valid_handle}
                   validate_function={validate_email}
                 />
             </form>
       }
   }
   

3. 根据项目需求调整输入组件的外观和行为。

🔧 Props

输入属性

样式属性

状态和回调属性

图标属性

可访问性和SEO属性

📙 示例

我们构建的许多示例都使用它来创建更复杂的表单，如联系我们表单、多步表单和登录表单。如果您对此感兴趣，可以查看 示例文件夹 获取更多信息。

🤝 贡献

我们欢迎社区贡献，使这个输入组件变得更好！请随时提出问题，提交拉取请求或提供反馈。让我们合作，一起创造一些惊人的东西！

📜 许可证

此Yew组件采用Apache 2.0许可证授权，您有权自由使用、修改和分发。请查阅LICENSE文件以获取更多详情。

📝 结论

恭喜！您现在已经拥有了自定义可复用输入组件，它将为您的Yew应用带来灵活性、易用性和稳健性。祝您编码愉快，愿您的项目因这个强大的工具而繁荣！🎉