@igor.dvlpr/astro-easynav-button
v1.4.2
Published
🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼
Downloads
71
Maintainers
Readme
📃 Table of contents
🕵🏼 Usage
Install it by executing:
npm i "@igor.dvlpr/astro-easynav-button"
Then import it into your Astro project:
Layout.astro
import EasyNavButton from '@igor.dvlpr/astro-easynav-button'
<footer>
{ /* other markup */ }
<EasyNavButton
background="#09F"
backgroundHover="#006"
/>
{ /* other markup */ }
</footer>
CSP notice
[!WARNING] This Astro component includes its own JavaScript, if you use CSP in your project you need to add its respective integrity hash to the allowed sources list.
Inline script SHA-256 hash: sha256-KWtqqqQFySoITWIucvZhAoWjT2J9jdUA7LfvxyqjJvQ=
🤹🏼 API
This component supports a variety of optional customization and functionality options, listed below:
polyfillScroll: boolean
Since the component uses the scrollend
event for properly adjusting its appearance according to the user scroll action and the given event currently has limited availability (source: caniuse) a polyfill is enabled by default, set this property to false
in order to disable the inclusion of the JavaScript polyfill file.
The default value is true
.
[!TIP] The used polyfill was created and is maintained by me as well, it being located:
[!NOTE] The polyfill file is minified, served via the jsDelivr CDN and has no side-effects in browsers that already support the
scrollend
event natively.
[!WARNING] If you use CSP in your project you need to add the polyfill's integrity hash to the allowed sources list.
background: string
Background color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).
The default value is '#afc7e5'
.
backgroundHover: string
Background color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).
The default value is '#3869c2'
.
color: string
Foreground color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).
The default value is '#333333'
.
colorHover: string
Foreground color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).
The default value is '#ffffff'
.
size: number
Size of the button defined as the number of px.
The default value is 48
.
borderRadius: number
Border radius of the button defined as the number of px.
The default value is 6
.
[!TIP] Set to
0
to disable round corners.
offset: number
Offset of the button from the edge of the window defined as the number of px.
The default value is 10
.
fontSize: number
The font size of the button defined as the number of px.
The default value is 30
.
animationTime: string
The duration of the animation when swapping the up/down arrows applied on the button. Can be any valid CSS time value, in msec, sec, etc.
The default value is '250ms'
.
iconTop: string
A glyph to use as the up arrow icon.
The default value is '\25B2'
(U+25B2, ▲).
iconBottom: string
A glyph to use as the bottom arrow icon.
The default value is '\25BC'
(U+25BC, ▼).
zIndex: number
The z-index value for the button. Adjust it only if you have used z-index in your CSS.
The default value is 999
.
position: 'left' | 'right'
The horizontal position, either left or right edge of the window.
The default value is 'right'
.
show: 'always' | 'whenNeeded'
Defines when to show the button.
'always'
will ignore if scrolling is possible (scrollbar visible),
'whenNeeded'
will check if scrolling is possible (scrollbar visible) and change the button's visibility based on it.
The default value is 'whenNeeded'
.
✨ Examples
index.astro
import EasyNavButton from '@igor.dvlpr/astro-easynav-button'
<Layout title="Welcome to Astro.">
<main>
<EasyNavButton
background="#09F"
backgroundHover="#006"
show="always"
/>
</main>
</Layout>
📝 Changelog
✨ Changelog is available here: CHANGELOG.md.
🪪 License
Licensed under the MIT license which is available here, MIT license.
🧬 Related
@igor.dvlpr/astro-post-excerpt
⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎
📖 Provides recursive readdir() and readdirSync() functions. 📁
🧰 Provides ways of testing whether a given value can be a valid file/directory name. 🏜
🍃 Provides ways of checking whether a path is a legacy Windows device. 💾
🦀 ExtendableString allows you to create strings on steroids that have custom transformations applied to them, unlike common, plain strings.. 🪀
👨🏻💻 Author
Created by Igor Dimitrijević (@igorskyflyer).