Merge pull request #2380 from zauberzeug/dismiss

Ability to dismiss notifications

nicegui/elements/notification.js

@@ -5,6 +5,11 @@ export default {
   updated() {
     this.notification(this.options);
   },
+  methods: {
+    dismiss() {
+      this.notification();
+    },
+  },
   props: {
     options: Object,
   },

nicegui/elements/notification.py

@@ -43,6 +43,7 @@ class Notification(Element, component='notification.js'):
 
         Displays a notification on the screen.
         In contrast to `ui.notify`, this element allows to update the notification message and other properties once the notification is displayed.
+        The notification can be removed with `dismiss()`.
 
         :param message: content of the notification
         :param position: position on the screen ("top-left", "top-right", "bottom-left", "bottom-right", "top", "bottom", "left", "right" or "center", default: "bottom")
@@ -163,3 +164,7 @@ class Notification(Element, component='notification.js'):
     def close_button(self, value: Union[bool, str]) -> None:
         self._props['options']['closeBtn'] = value
         self.update()
+
+    def dismiss(self) -> None:
+        """Dismiss the notification."""
+        self.run_method('dismiss')

tests/test_notification.py

@@ -21,3 +21,17 @@ def test_close_button(screen: Screen):
     screen.wait(1.5)
     screen.should_not_contain('Hi!')
     assert len(b.client.layout.default_slot.children) == 1
+
+
+def test_dismiss(screen: Screen):
+    n = ui.notification('Hi!', timeout=None)
+    b = ui.button('Dismiss', on_click=n.dismiss)
+
+    screen.open('/')
+    screen.should_contain('Hi!')
+    assert len(b.client.layout.default_slot.children) == 2
+    screen.wait(1)
+    screen.click('Dismiss')
+    screen.wait(1.5)
+    screen.should_not_contain('Hi!')
+    assert len(b.client.layout.default_slot.children) == 1

website/documentation/content/notification_documentation.py

@@ -8,13 +8,15 @@ def main_demo() -> None:
     import asyncio
 
     async def compute():
-        n = ui.notification()
+        n = ui.notification(timeout=None)
         for i in range(10):
             n.message = f'Computing {i/10:.0%}'
             n.spinner = True
             await asyncio.sleep(0.2)
         n.message = 'Done!'
         n.spinner = False
+        await asyncio.sleep(1)
+        n.dismiss()
 
     ui.button('Compute', on_click=compute)