https://github.com/malekdammak/curved-line-arrow-angular
I put at your disposal npm package which assures Fancy curved arrows for your Angular project! Great for tutorials and product tours! I'm waiting for your feedback or your contribution
https://github.com/malekdammak/curved-line-arrow-angular
angular angularanimation angulardrawline arrow cool design leader-line-angular
Last synced: about 2 months ago
JSON representation
I put at your disposal npm package which assures Fancy curved arrows for your Angular project! Great for tutorials and product tours! I'm waiting for your feedback or your contribution
- Host: GitHub
- URL: https://github.com/malekdammak/curved-line-arrow-angular
- Owner: MalekDammak
- License: mit
- Created: 2020-05-05T16:46:38.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T17:51:52.000Z (over 3 years ago)
- Last Synced: 2025-04-21T08:46:05.796Z (about 1 year ago)
- Topics: angular, angularanimation, angulardrawline, arrow, cool, design, leader-line-angular
- Language: TypeScript
- Homepage:
- Size: 1.83 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Fancy curved arrows for your Angular project! Great for tutorials and product tours!
Demo : https://vc6p1.csb.app/
Sandbox : https://codesandbox.io/s/vc6p1
## Installation
`npm i cool-line-arrow`
## Usage
```jsx
import {CurvedLineArrowModule} from 'cool-line-arrow';
// Selector
```
## Example
```jsx
```
## Inputs
|Name|Type|Description|Default|
|--- |--- |--- |--- |
|fromSelector|DOM selector|DOM element from which your arrow will start.|body|
|fromOffsetX|number|Amount of pixels to offset the arrow from the DOM element on the X axis.|0|
|fromOffsetY|number|Amount of pixels to offset the arrow from the DOM element on the Y axis.|0|
|toSelector|DOM selector|DOM element to which your arrow will go to.|(same as fromSelector)|
|toOffsetX|number|Amount of pixels to offset the arrow from the DOM element on the X axis.|0|
|toOffsetY|number|Amount of pixels to offset the arrow from the DOM element on the Y axis.|0|
|middleX|number|Middle point X position.|0|
|middleY|number|Middle point Y position.|40|
|width|number|Width of the arrow and arrowhead.|8|
|color|color|Color of the arrow and arrowhead.|"black"|
|hideIfFoundSelector|DOM selector|Optional. if the arrow can find this selector, it will hide itself. Useful for product tours when you only want to show an arrow whenever a user hasn't performed an action yet such as opening a menu.||
|debugLine|boolean|Show debug dots and lines for fromOffset, toOffset and middle vectors.|false|
|dynamicUpdate|boolean|Automatically adjust the arrow whenever the from/to DOM elements update. Useful for dynamic content such as sliding menus or content that is within a scrolling container.|false|
|zIndex|number|Adjust the z-index for this arrow.|0|
## Copyright
Made with ❤️ by [Melek Damak](https://www.linkedin.com/in/damak-melek-2a9819147/)
Mail : melekdamak@gmail.com
## Inspired from
[Styled Page](https://react-curved-arrow.nickjanssen.com), a tool that lets you visually build React apps & components!
# License
MIT