DylanVann / Ant Design Draggable Modal
Licence: mit
The Modal from Ant Design, draggable.
Stars: ✭ 105
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ant Design Draggable Modal
Jspanel4
A JavaScript library to create highly configurable floating panels, modals, tooltips, hints/notifiers/alerts or contextmenus for use in backend solutions and other web applications.
Stars: ✭ 217 (+106.67%)
Mutual labels: modal, draggable
plain-modal
The simple library for customizable modal window.
Stars: ✭ 21 (-80%)
Mutual labels: modal, draggable
React Kanban Dnd
📋 Open source kanban board built with React
Stars: ✭ 121 (+15.24%)
Mutual labels: hacktoberfest, draggable
React Drag Drawer
A responsive mobile drawer that is draggable on mobile, and falls back to a modal on desktop
Stars: ✭ 135 (+28.57%)
Mutual labels: modal, draggable
Modal
A powerful and customizable modal implementation for Blazor applications.
Stars: ✭ 406 (+286.67%)
Mutual labels: hacktoberfest, modal
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (+93.33%)
Mutual labels: modal, draggable
React Geo
A set of geo related modules to use in combination with React, Ant Design and OpenLayers.
Stars: ✭ 220 (+109.52%)
Mutual labels: hacktoberfest, ant-design
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (+68.57%)
Mutual labels: modal, draggable
Ant Design Blazor
🌈A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.
Stars: ✭ 3,890 (+3604.76%)
Mutual labels: hacktoberfest, ant-design
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+143.81%)
Mutual labels: hacktoberfest, modal
React Native Simple Dialogs
⚛ Cross-platform React Native dialogs based on the Modal component
Stars: ✭ 218 (+107.62%)
Mutual labels: hacktoberfest, modal
Filterlists
🛡 The independent, comprehensive directory of filter and host lists for advertisements, trackers, malware, and annoyances.
Stars: ✭ 653 (+521.9%)
Mutual labels: hacktoberfest, ant-design
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (-15.24%)
Mutual labels: modal, draggable
Smalltalk
Promise-based Alert, Confirm and Prompt replacement
Stars: ✭ 76 (-27.62%)
Mutual labels: hacktoberfest, modal
Wingpanel
Stylish top panel that holds indicators and spawns an application launcher
Stars: ✭ 104 (-0.95%)
Mutual labels: hacktoberfest
Bonjourbrowser
Service Browser is a utility that discovers all services registered in a network
Stars: ✭ 104 (-0.95%)
Mutual labels: hacktoberfest
Hacktoberfest Census
A census of those participating in Hacktoberfest (and an easy PR!)
Stars: ✭ 104 (-0.95%)
Mutual labels: hacktoberfest
Request.js
Send parameterized requests to GitHub’s APIs with sensible defaults in browsers and Node
Stars: ✭ 104 (-0.95%)
Mutual labels: hacktoberfest
Powershell
Development repository for the powershell cookbook
Stars: ✭ 104 (-0.95%)
Mutual labels: hacktoberfest
Ant Design Draggable Modal
Example
🌎✨ Features
- [x] Drag with title bar.
- [x] Resize with handle.
- [x] Keep in bounds.
- [x] During drag.
- [x] During resize.
- [x] During resize window.
- [x] Multiple modals with managed
zIndex
. - [x] Open from center.
- [ ] Better API for using as a controlled component.
- [ ] Open from quadrants.
- [ ] Better escape key management.
- [ ] Resize with option key.
📦 Install
yarn add ant-design-draggable-modal
NOTE: You must use [email protected]
and [email protected]
or higher.
🔨 Usage
import React, { useState, useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal, DraggableModalProvider } from 'ant-design-draggable-modal'
import 'antd/dist/antd.css'
import 'ant-design-draggable-modal/dist/index.css'
const ModalWithButton = () => {
const [visible, setVisible] = useState(false)
const onOk = useCallback(() => setVisible(true), [])
const onCancel = useCallback(() => setVisible(false), [])
return (
<>
<Button onClick={onOk}>Open</Button>
<DraggableModal visible={visible} onOk={onOk} onCancel={onCancel}>
Body text.
</DraggableModal>
</>
)
}
// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (
<DraggableModalProvider>
<ModalWithButton />
<ModalWithButton />
<ModalWithButton />
</DraggableModalProvider>
)
⚠️ User Experience Warning
You should probably try to design your app not to need to use this, apps should usually not be window managers.
License
MIT © DylanVann
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].