https://github.com/xty1992a/resizable
https://github.com/xty1992a/resizable
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/xty1992a/resizable
- Owner: xty1992a
- Created: 2023-09-28T09:32:38.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-08-30T02:02:37.000Z (6 months ago)
- Last Synced: 2024-08-30T10:14:20.317Z (6 months ago)
- Language: TypeScript
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## Install
`pnpm i @redbuck/resizable`
## Usage
[Live Demo](https://codepen.io/xty1992a/pen/KKjxKwq)
```html
import Resizable from '../dist/es/index.js'
const resizer = new Resizable('#box')
resizer.on('effect', console.log)
```
## API
### options
| Method | Description | default |
| ----- |--------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------|
| container | The container element or selector | - |
| itemClassName | Which child element under el will effect | resize-item |
| effectManual | Should resizer instance effect dom manual | false |
| getItemOnStart | When drag start, carry the touched element call this function to get which item should be effect | find ancestors(include self) which one`s classList contain itemClassName |
| getEffectOnStart | When drag start, carry the touched element call this function to get effect in this drag | el => el.dataset.effect.split(',') |
| getPointsOnStart | When drag start, carry the touched element call this function to get initial points in this drag | Resizable.getPoints |
| listenerFactory | You can use this option to provide your own Listener | web-listener |
### events
| Method | Description |
| ----- |----------------------------------------------------------|
| effect | Emitted when drag move , carry the target and it`s shape |