🔝 Yew Scroll
⚠️ Warning: This crate has been moved to
scroll-rs
. Please usescroll-rs
instead ofyew-scroll
.
📜 Introduction
This component is designed to provide a convenient and customizable solution for implementing a "scroll to top" button in your Yew applications. Enhance user experience by allowing them to easily navigate to the top of the page with a single click.
🤔 Why is this Component Useful?
This component comes with several benefits that make it an essential addition to your Yew projects:
-
🔄 Scroll Navigation: Simplify user navigation by adding a convenient button to scroll smoothly to the top of the page.
-
🎨 Customization: Tailor the appearance of the "scroll to top" button using custom CSS classes, and provide a personalized SVG icon.
-
📏 Customizable Offset: Define a custom vertical offset (Y position) to trigger the visibility of the button, ensuring a seamless user experience.
⚙️ Installation
Integrating this component into your Yew project is a straightforward process. Follow these simple steps:
-
Make sure you have Yew set up in your project. If not, refer to the Yew documentation for installation instructions.
-
Install the component package using your preferred package manager:
-
Import the component into your Yew application and start using it to improve user navigation.
🛠️ Usage
Incorporating this component into your application is easy. Follow these steps:
-
Import the component and its required dependencies:
use yew-;
-
Set up the props for the
ScrollToTop
component:// Custom SVG content for the scroll-to-top button (an arrow). // Custom SVG content for the scroll-to-top button (an arrow).
-
Customize the appearance and behavior of the "scroll to top" button based on your project requirements.
🔧 Props
Name | Type | Description | Example | Default Value |
---|---|---|---|---|
css |
&'static str |
Custom CSS classes for styling the button. | "custom-scroll-button", "highlight-button". | "fixed bottom-4 right-4 bg-blue-500 text-white p-3 rounded-full cursor-pointer hover:bg-blue-600 transition duration-300 ease-in-out" |
top_offset |
f64 |
The vertical offset value (Y position) to trigger button visibility. | 200.0, 300.0 | 500.0 |
svg_content |
Html |
Custom SVG content for the button. | custom_svg() |
default_svg() |
🤝 Contribution
We encourage contributions from the community to enhance this Yew component. Feel free to open issues, submit pull requests, or provide feedback. Let's collaborate and make this component even more powerful!
📜 License
The Scroll To Top Yew component is licensed under the MIT
License, allowing you to use, modify, and distribute it freely. Refer to the LICENSE
file for more details.