🌐 Yew I18n

📜 简介

Yew I18n 是一个 Yew 组件，为您的 Web 应用程序提供国际化（i18n）支持。它允许您无缝管理翻译并在不同语言之间切换，从而提高全球用户的体验。

🤔 为什么这个组件很有用？

此库为您在 Yew 项目中实现 i18n 提供了几个好处

1. 🌍 多语言支持：轻松管理应用程序中各种语言的翻译。

2. 🚀 无缝集成：将 i18n 无缝集成到您的 Yew 组件中，提供一致的语言体验。

3. 💬 动态语言切换：根据用户偏好动态切换支持的语言。

⚙️ 安装

将 Yew I18n 集成到您的 Yew 项目中是一个简单的过程。请按照以下步骤操作

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

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

   $ cargo add yew-i18n
   

3. 开始使用库来管理翻译并增强应用程序的多语言功能。

🛠️ 使用

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

1. 设置 i18n 配置和提供者

   use crate::components::my_component::MyComponent;
   use yew_i18n::I18nProvider;
   use std::collections::HashMap;
   use yew::prelude::*;
   
   #[function_component(App)]
   pub fn app() -> Html {
       let supported_languages = vec!["en", "fr"];
       let mut translations = HashMap::new();
   
       translations.insert(
       	   // en to en
           "en".to_string(),
           serde_json::json!({
               "24 Apr, 2023": "24 Apr, 2023",
               "02 May, 2023": "02 May, 2023",
               "11 May, 2023": "11 May, 2023",
               "Trending Posts": "Trending Posts",
               "Rust: The Next Big Thing in Data Science": "Rust: The Next Big Thing in Data Science",
               "Data Science": "Data Science",
           }),
       );
   
       translations.insert(
       	   // en to fr
           "fr".to_string(),
           serde_json::json!({
               "24 Apr, 2023": "24 Avr, 2023",
               "02 May, 2023": "02 Mai, 2023",
               "11 May, 2023": "11 Mai, 2023",
               "Trending Posts": "Articles Tendances",
               "Rust: The Next Big Thing in Data Science": "Rust : La Prochaine Grande Avancée en Science des Données",
               "Data Science": "Science des Données",
           }),
       );
   
       html! {
        	<I18nProvider supported_languages={supported_languages} translations={translations} >
        	    <MyComponent />
        	</I18nProvider>
       }
   }
   

2. 使用 use_translation 钩子访问组件中的 i18n 上下文

   // ./src/components/my_component.rs
   use yew::prelude::*;
   use yew_i18n::use_translation;
   
   #[function_component(MyComponent)]
   pub fn my_component() -> Html {
       let i18n = use_translation();
   
       i18n.set_translation_language(&"fr");
   
       // Your component, states, etc.
   
       html! {
       	   <div>
               { i18n.t("Trending Posts") }
       	   </div>
       }
   }
   

3. 根据用户偏好自定义语言和翻译。

🔧 属性

📙 示例

如果你对如何与 Tailwind CSS 一起使用它感兴趣，可以查看 示例文件夹 获取更多信息。

🤝 贡献

我们欢迎社区对 Yew I18n 组件的贡献，以增强其功能。请随意提出问题、提交拉取请求或提供反馈。让我们一起合作，让 Yew 的多语言支持更加强大！

📜 许可证

Yew I18n 使用 MIT 许可证授权，允许你自由地使用、修改和分发它。有关详细信息，请参阅 LICENSE 文件。