Kanban-Board
Ein Drag-and-Drop-Kanban-Board für Projektmanagement und Aufgabenverfolgung. Unterstützt mehrere Spalten mit farbcodierten Kopfzeilen, ziehbare Karten mit Labels, Zuständigen und Fälligkeitsdaten. Bietet spaltenübergreifendes Drag-and-Drop, WIP-Limit-Durchsetzung, Kartenzähler-Badges und einklappbare Spalten.
Vorschau & Code
_kanban_board.html.erb
███
██████ █████ █████████
█████████
████████ █████ ██ ██████ ██████ ████ █████
█████████
█████████████████ ███████ ███ █████ ███ ██████ ████ █ ██████████
████████████ ███████ ██ ██████ ██████ ███████████████ █████████ ██████
██████ ██████████ ███ ███████
kanban_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ███████
██████ ██████ █ █ ███████████████ ██████ █
█████████ █
████████████████ █ ████
█
kanban_board_component.html.erb
████ ██████████ █████████████ ███ ███ ████████████████████ ██████████████ ███
██ ████████████ ██ ████████ ██
██ █████████ █ ███████████████ ██ ███████████████ ██
████ ██████████ █████████████████████████ ███
███████████████████ ███████████ ███
████████████████████████████
███ ██████ ██████ ██
████ ██████████ █████████████████████ ████
████ ███████████ ████████████ ███████
kanban_board_component.rb
█ ██████████████████████ ████
█████ ████████████████████ █ ███████████████████
█████████████ █ █
██████ █████████████████████
█████ ████████████████████
██████ █████████████████████
███████ ██████████████████████
████ ███████████████████
███████ █████████████████████
kanban_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ██████████ ███████
██████ ██████ █ █ ███████████████ ██████ █
█████████ █
████████████████ █ ████
█
Änderungsprotokoll
- v1.0.0: Initial release
- Cross-column drag and drop via HTML Drag & Drop API
- WIP limit enforcement with visual warning
- Card count badges per column
- Collapsible columns
- Color-coded column headers
- Card labels, assignees, and due dates
- Dispatches kanban:move and kanban:card-click events
Vollzugang erhalten
Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.
Jetzt Zugang erhalten