滚动岛
A dynamic and interactive component that displays scroll progress with animated visuals and an expandable area for additional content.
注意: This component requires @number-flow/vue as a dependency.
通过 CLI 安装
手动安装
API
| Prop 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
class | string | "" | Additional CSS classes for custom styling. |
title | string | "Progress" | Title displayed in the header of the component. |
height | string | 44 | Height of the component. |
功能特性
- Scroll Progress Tracking: Dynamically displays the scroll progress of the page as a percentage.
- Expandable Layout: Transforms between a circular and a rectangular layout based on user interaction.
- Animated Circular Progress Bar: Displays a visually appealing progress bar with smooth transitions.
- Dynamic Content Slot: Supports additional content in the expandable section.
- Dark Mode Support: Adapts to the dark or light mode of the user's system preferences.
感谢
- Inspired by the work of Ali Samadi & Nitish Khagwal
- NumberFlow by Maxwell Barvian for number formatting and animations.