#397 add example for trello-like cards and columns

examples/trello_cards/main.py

@@ -0,0 +1,56 @@
+#!/usr/bin/env python3
+from __future__ import annotations
+
+from typing import Optional
+
+from nicegui import ui
+
+
+class Column(ui.column):
+
+    def __init__(self, name: str) -> None:
+        super().__init__()
+        with self.classes('bg-gray-200 w-48 p-4 rounded shadow'):
+            ui.label(name).classes('text-bold')
+        self.on('dragover.prevent', self.highlight)
+        self.on('dragleave', self.unhighlight)
+        self.on('drop', self.move_card)
+
+    def highlight(self) -> None:
+        self.classes(add='bg-gray-400')
+
+    def unhighlight(self) -> None:
+        self.classes(remove='bg-gray-400')
+
+    def move_card(self) -> None:
+        self.unhighlight()
+        Card.dragged.parent_slot.parent.remove(Card.dragged)
+        with self:
+            Card(Card.dragged.text)
+
+
+class Card(ui.card):
+    dragged: Optional[Card] = None
+
+    def __init__(self, text: str) -> None:
+        super().__init__()
+        self.text = text
+        with self.props('draggable').classes('w-full cursor-pointer'):
+            ui.label(self.text)
+        self.on('dragstart', self.handle_dragstart)
+
+    def handle_dragstart(self) -> None:
+        Card.dragged = self
+
+
+with ui.row():
+    with Column('Next'):
+        Card('Clean up the kitchen')
+        Card('Do the laundry')
+        Card('Go to the gym')
+    with Column('Doing'):
+        Card('Make dinner')
+    with Column('Done'):
+        Card('Buy groceries')
+
+ui.run()

main.py

@@ -238,6 +238,7 @@ The command searches for `main.py` in in your current directory and makes the ap
             example_link('Local File Picker', 'demonstrates a dialog for selecting files locally on the server')
             example_link('Search as you type', 'using public API of thecocktaildb.com to search for cocktails')
             example_link('Menu and Tabs', 'uses Quasar to create foldable menu and tabs inside a header bar')
+            example_link('Trello Cards', 'shows Trello-like cards that can be dragged and dropped into columns')
 
     with ui.row().classes('bg-primary w-full min-h-screen mt-16'):
         link_target('why')