New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@arisbh/marqueeck
Advanced tools
@arisbh/marqueeck - npm Package Compare versions
Comparing version 0.0.24 to 0.0.25
| { | ||
| "name": "@arisbh/marqueeck", | ||
| "version": "0.0.24", | ||
| "version": "0.0.25", | ||
| "description": "Marqueeck is a custom and customizable marquee component for Sveltekit", | ||
@@ -5,0 +5,0 @@ "author": { |
121
README.md
@@ -39,3 +39,3 @@ # Marqueeck | ||
| ### Passing options | ||
| ## Options | ||
@@ -45,18 +45,25 @@ You can either pass your options directly in the `<Marqueeck/>` component : | ||
| ```svelte | ||
| <Marqueeck options={{ speed: 75, direction: 'left' }}>[Your element]</Marqueeck> | ||
| <Marqueeck | ||
| options={{ | ||
| speed: 75, | ||
| direction: 'left', | ||
| onHover: 'none' | ||
| // ... | ||
| }} | ||
| > | ||
| [Your element] | ||
| </Marqueeck> | ||
| ``` | ||
| or by constructing a MarqueeckOptions object, using the provided `MarqueeckOptions` type : | ||
| or by constructing a `MarqueeckOptions` object, using the provided `MarqueeckOptions` type : | ||
| ```svelte | ||
| <script lang="ts"> | ||
| <script> | ||
| import Marqueeck from '@arisbh/marqueeck'; | ||
| import type { MarqueeckOptions } from '@arisbh/marqueeck'; | ||
| const options: MarqueeckOptions = { | ||
| const options = { | ||
| speed: 75, | ||
| direction: 'left', | ||
| onHover: 'customSpeed', | ||
| hoverSpeed: 15, | ||
| gradualHoverDuration: 750 | ||
| onHover: 'customSpeed' | ||
| // ... | ||
| }; | ||
@@ -68,6 +75,27 @@ </script> | ||
| ### Default options | ||
| > If you don't pass any options to the Marqueeck element, it will use the following options. | ||
| ```js | ||
| const options = { | ||
| speed: 50, // in px/sec | ||
| direction: 'left', // either 'left' or 'right' | ||
| gap: 20, // in px | ||
| paddingX_Wrapper: 20, // in px | ||
| paddingY_Wrapper: 16, // in px | ||
| debug: false, | ||
| onHover: 'customSpeed', // either 'none', 'stop' or 'customSpeed' | ||
| gradualHoverDuration: 1250, // in ms | ||
| hoverSpeed: 10, // in px/sec | ||
| stickyPosition: 'start' // either 'start' or 'end' | ||
| }; | ||
| ``` | ||
| ### Optional sticky element | ||
| You can using the reserved `svelte:fragment` to place a sticky element inside the component. | ||
| You can use the reserved `svelte:fragment` to place a sticky element inside the component. | ||
| Customize its placement with the `stickyPosition` key inside options. | ||
| ```svelte | ||
@@ -80,4 +108,2 @@ <Marqueeck {options}> | ||
| Edit the placement of the sticky element with `stickyPosition` key. | ||
| ### Hover directive | ||
@@ -99,22 +125,5 @@ | ||
| ### Default options | ||
| ```js | ||
| const options = { | ||
| speed: 50, // in px/sec | ||
| direction: 'left', // either 'left' or 'right' | ||
| gap: 20, // in px | ||
| paddingX_Wrapper: 20, // in px | ||
| paddingY_Wrapper: 16, // in px | ||
| debug: false, | ||
| onHover: 'customSpeed', // either 'none', 'stop' or 'customSpeed' | ||
| gradualHoverDuration: 1250, // in ms | ||
| hoverSpeed: 10, // in px/sec | ||
| stickyPosition: 'start' // either 'start' or 'end' | ||
| }; | ||
| ``` | ||
| ## Styling | ||
| Marqueeck comes with minimal style integration, giving you the flexibility to use your preffered classes and styling paradigm. | ||
| > Marqueeck comes with minimal style integration, giving you the flexibility to use your prefered classes and styling paradigm. | ||
@@ -127,3 +136,3 @@ ### Slotted Component | ||
| You can directly pass CSS variables to Marqueeck like so : | ||
| You can directly pass CSS variables for the background and text colors, using any CSS authorized colors (name, hex, hsl, etc...) : | ||
@@ -138,2 +147,50 @@ ```svelte | ||
| Define your own custom class or use utility framework like [Tailwind](https://tailwindcss.com/) or [MasterCSS](https://css.master.co) | ||
| Define your own custom class or use utility framework like [Tailwind](https://tailwindcss.com/) or [MasterCSS](https://css.master.co). | ||
| You can find the default styles below : | ||
| ```css | ||
| .marqueeck-wrapper { | ||
| width: 100%; | ||
| background: var(--bg-color, lightslategrey); | ||
| color: var(--text-color, white); | ||
| display: flex; | ||
| flex-flow: row; | ||
| flex-wrap: nowrap; | ||
| overflow-x: hidden; | ||
| position: relative; | ||
| } | ||
| .marqueeck-content { | ||
| display: inherit; | ||
| flex-flow: inherit; | ||
| flex-wrap: inherit; | ||
| gap: inherit; | ||
| position: inherit; | ||
| } | ||
| span.marqueeck-child { | ||
| display: inline; | ||
| width: max-content; | ||
| } | ||
| .marqueeck-sticky { | ||
| position: absolute; | ||
| background: var(--bg-color, lightslategrey); | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| } | ||
| code.marqueeck-log { | ||
| display: flex; | ||
| flex-flow: column wrap; | ||
| border: 1px solid lightslategrey; | ||
| padding: 4px; | ||
| margin-block: 8px; | ||
| margin-inline: 8px; | ||
| border-radius: 4px; | ||
| width: -moz-fit-content; | ||
| width: fit-content; | ||
| font-size: 13px; | ||
| } | ||
| ``` |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by6.5%
14771
- Number of lines in readme file
- increased by42.86%
190
No dependency changes