window-maker
v0.0.9
Published
This is a very small npm package for creating draggable windows on a webpage.
Downloads
7
Readme
Window maker
This is a very small npm package for creating draggable windows on a webpage.
Right now this is only a svlete package but svelte is a compiler so it can be compiled to vanilla js as well.
Usage
npm install window-maker
import { WindowConstructor } from 'window-maker'
<WindowConstructor> <your content here> </WindowConstructor>
make sure to have a wrapper inside the WindowConstructor with id
window-body
and an element in it with the idwindow-head
the
window-body
is the whole part that moves and thewindow-head
is the draggable partany other content can be in any of those elements
example:
<WindowConstructor> <div id="window-body"> <div id="window-head">this is a the window head</div> <div>this is the window content</div> </div> </WindowConstructor>
Updates
new for 0.0.5:
- I forgor to make the package usable 💀 (should be fixed or at leas I hope so)
new for 0.0.4:
- added
className
prop to the component to apply custom classes to the wrapper element- foxed issues with z-index where the windows below would not be draggable (this is a temporary fix for now but it works ig)
new for 0.0.3:
- won't break if you use more than one component instance on the same page 😎