Liste triable
Liste réordonnée par glisser-déposer et tableau kanban utilisant l'API native HTML Drag and Drop avec Stimulus. Aucune dépendance externe requise. Prend en charge les poignées de glissement, les indicateurs visuels de dépôt et le glissement entre listes pour les colonnes kanban.
Liste
Liste verticale réordonnable avec poignées de glissement et animation de glissement.
_sortable_list.html.erb
███
████████ ████ █████████ █ ████ █████ █████████
██████
███ ██████ ███████████████████████████ ██████ █
█ ███ ████ ██████ ██████ ██████ ████████████ █████████ ████████████ ██
█ ███ ████ ██████ ███████ █████ ██
█ ███ ████ ██████ ██████ ██████ ████████████ ████████ ████████████ █
█ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_list_component.html.erb
████
██████████ █████████████████ ███
███████████████████████████████
████████████████████████████████████ ██████ ███
██ ██ █████ █████████████████████████████████████ █████ █████ ███ ██
█
██ █████████████████████ ██ ██████ ██████ ██
████
███████████ ████████████ █████ ████ ████ ████████ █████████████████ █████████████████ █████████████
████████████████
sortable_list_list_component.rb
█ ██████████████████████ ████
█████ █████████████████████████ █ ███████████████████
████████████ ███████ ███████████████
███ ██████████████████ █████ ██████ ████ ████████████████
███████ █ ██████
██████ █ █████
██████████████ █ █████████████████████ ██ ██
███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Kanban
Tableau multi-colonnes avec glissement entre et au sein des colonnes.
_sortable_list.html.erb
███
████████ ████ █████████ █ ██████ █████ █████████
██████
███ ██████ ██████████████████████████████████ ████████ █
█
███ ███████
██████ ███ ████
██████ █
█ ███ ████ ██████ ███████ █████████ ████████████ ███████ ███████ ███████████ ██
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
sortable_list_kanban_component.rb
█ ██████████████████████ ████
█████ ███████████████████████████ █ ███████████████████
███ ███████████████████ ███ ███████████████ ████ ████████████████
████████ █ ███████
███████████████ █ ██████████████
██████████████ █ █████████████████████ ██ ██
███
███ █████████████
sortable_list_kanban_component.html.erb
████
██████████ █████████████ ███
███████████████████████████████
███████████████████████████████████████
█
██ ████████████ ██ ████████ ██
████
████████████████████ ████ ███████████ ████████████████████ ██████████ ██████ ████████████████ ██████████████████████
███████████
███████████████████ ███████████ ███
sortable_list_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ ████████ ███████████
██████ ██████ █ █
██████ ███████
███████ █ █████ ████████ ████████ █████ █
█
█████████ █
Journal des modifications
- v1.0.0: Initial release with list and kanban styles
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant