🔝 Yew Scroll

📜 简介

此组件旨在为您的 Yew 应用程序提供一种方便且可定制的解决方案，以实现“回到顶部”按钮。通过允许用户单点击轻松导航到页面顶部来增强用户体验。

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

此组件具有多个优点，使其成为您 Yew 项目的必备组件。

1. 🔄 滚动导航：通过添加一个方便的按钮，简化用户导航，使页面平滑滚动到顶部。

2. 🎨 定制化：使用自定义 CSS 类定制“回到顶部”按钮的外观，并提供一个定制的 SVG 图标。

3. 📏 可定制偏移量：定义一个自定义的垂直偏移量（Y 位置）以触发按钮的可见性，确保无缝的用户体验。

⚙️ 安装

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

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

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

   $ cargo add yew-scroll
   

3. 将组件导入到您的 Yew 应用程序中，并开始使用它来改进用户导航。

🛠️ 使用

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

1. 导入组件及其所需的依赖项

   use yew-scroll::{ScrollToTop, ScrollToTopProps};
   

2. 设置 ScrollToTop 组件的属性

   // Custom SVG content for the scroll-to-top button (an arrow).
   fn custom_svg() -> Html {
       html! {
           <svg
               class="w-6 h-6"
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
           >
               <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
                   stroke-width="2"
                   d="M5 10l7-7m0 0l7 7m-7-7v18"
               />
           </svg>
       }
   }
   
   // Custom SVG content for the scroll-to-top button (an arrow).
   #[function_component(MyComponent)]
   pub fn my_component() -> Html {
   
       // Set props for the `ScrollToTop` component
       let custom_props = ScrollToTopProps {
           css: "custom-css",         // Add any custom CSS classes
           top_offset: 0.0,           // Set the desired top offset value to show the button
           svg_content: custom_svg(), // Provide custom SVG content
       };
   
       // Render the `ScrollToTop` component with the specified props
       html! {
           <>
               // Other content in your component
               <p>{"Scroll down to see the button"}</p>
   
               // Use the scroll_to_top component
               <ScrollToTop ..custom_props />
   
               // Default Usage
               <ScrollToTop />
           </>
       }
   }
   

3. 根据项目要求自定义“回到顶部”按钮的外观和行为。

🔧 属性

🤝 贡献

我们鼓励社区为增强此 Yew 组件做出贡献。请随意打开问题、提交拉取请求或提供反馈。让我们共同努力，使此组件更加强大！

📜 许可证

Scroll To Top Yew 组件受 MIT 许可证的约束，允许您免费使用、修改和分发它。有关详细信息，请参阅 LICENSE 文件。