🎵 Yew 折叠组件

📜 简介

Yew 折叠组件是 Yew 框架的一个简单且灵活的折叠组件。它允许您轻松创建可折叠的内容区域。

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

折叠组件为您提供了几个优点，以增强您的网页应用程序。

1. 🌐 定制化：根据应用程序的设计定制折叠组件的外观和行为。

2. 🚀 响应式设计：确保在不同设备和屏幕尺寸上都有最佳的可视化和导航。

3. 💬 易于集成：无缝集成到 Yew 项目中，无需复杂的设置和配置。

⚙️ 安装

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

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

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

   $ cargo add yew-accordion
   

3. 开始使用折叠组件来增强应用程序的内容组织。

🛠️ 使用

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

1. 将折叠组件导入到您的 Yew 项目中

   use yew::prelude::*;
   use yew_accordion::{Accordion, AccordionButton, AccordionItem};
   
   #[function_component(App)]
   pub fn app() -> Html {
       html! {
           <Accordion
               expanded_element={html! {<AccordionButton class={"bg-blue-500 text-white p-2 rounded"}>{ "Hide -" }</AccordionButton>}}
               collapsed_element={html! {<AccordionButton class={"bg-green-500 text-white p-2 rounded"}>{ "Show +" }</AccordionButton>}}
               size="sm"
               aria_controls="example-accordion"
               container_class="my-custom-class bg-gray-800 p-4 rounded border border-gray-700"
               expanded_element_class="my-expanded-class bg-gradient-to-r from-blue-700 to-blue-500 text-white p-2 rounded"
               collapsed_element_class="my-collapsed-class bg-gradient-to-r from-green-700 to-green-500 text-white p-2 rounded"
               content_container_class="my-content-class bg-gray-900 p-4 rounded border-t border-gray-700"
           >
               <ul>
                   <AccordionItem
                       item_class="my-list-item-class border-b p-2 hover:bg-gray-700 transition duration-300 ease-in-out"
                   >{ "Item 1" }</AccordionItem>
                   <AccordionItem
                       item_class="my-list-item-class border-b p-2 hover:bg-gray-700 transition duration-300 ease-in-out"
                   >{ "Item 2" }</AccordionItem>
                   <AccordionItem
                       item_class="my-list-item-class p-2 hover:bg-gray-700 transition duration-300 ease-in-out"
                   >{ "Item 3" }</AccordionItem>
               </ul>
           </Accordion>
       }
   }
   

2. 使用提供的 props 定制折叠组件的外观和行为。

3. 使用 Yew 折叠组件享受改进的内容组织体验。

🔧 Props

📙 示例

如果您想了解如何使用不同的样式或附加功能，您可以查看 示例文件夹 以获取更多信息。

🤝 贡献

我们欢迎社区为增强此组件做出贡献。请随时提出问题、提交拉取请求或提供反馈。让我们共同努力，使 Yew 中的内容组织更加简单和互动！

📜 许可证

Yew 折叠面板遵循 MIT 许可协议，允许您自由使用、修改和分发。有关更多详细信息，请参阅LICENSE文件。