#108: adding badge element, button inherits from group

api_docs_and_examples.py

@@ -139,6 +139,10 @@ def create_full() -> None:
     with example(ui.button):
         ui.button('Click me!', on_click=lambda: ui.notify(f'You clicked me!'))
 
+    with example(ui.badge):
+        with ui.button('Click me!', on_click=lambda: badge.set_text(int(badge.text) + 1)):
+            badge = ui.badge('0', color='secondary')
+
     with example(ui.toggle):
         toggle1 = ui.toggle([1, 2, 3], value=1)
         toggle2 = ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(toggle1, 'value')
@@ -424,6 +428,7 @@ Simply call the `tooltip(text:str)` method on UI elements to provide a tooltip.
     with example(ui.notify):
         ui.button('Say hi!', on_click=lambda: ui.notify('Hi!', close_button='OK'))
 
+
     with example(ui.dialog):
         with ui.dialog() as dialog, ui.card():
             ui.label('Hello world!')

nicegui/elements/badge.py

@@ -0,0 +1,41 @@
+import justpy as jp
+
+from .element import Element
+from ..binding import BindableProperty, BindTextMixin
+
+
+class _QBadge(jp.QBadge):
+    """QBadge
+    Need to override QBadge in order to provide an additional property 'text'.
+    setattr() approach won't work due to QDiv.__setattr__ :-(
+    """
+
+    @property
+    def text(self) -> str:
+        return self.label
+
+    @text.setter
+    def text(self, value: str):
+        self.label = value
+
+
+class Badge(Element, BindTextMixin):
+    text = BindableProperty()
+
+    def __init__(self, text: str = '', color: str = 'blue', text_color: str = 'white', outline: bool = False) -> None:
+        """Badge
+
+        A badge element wrapping Quasar's
+        `QBadge <https://v1.quasar.dev/vue-components/badge>`_ component.
+
+        :param text: the initial value of the text field
+        """
+        view = _QBadge(color=color, text_color=text_color, delete_flag=False, temp=True, align='middle',
+                       outline=outline, text=text)
+        super().__init__(view)
+
+        self.text = text
+        self.bind_text_to(self.view, 'text')
+
+    def set_text(self, text: str):
+        self.text = text

nicegui/elements/button.py

@@ -2,12 +2,12 @@ from typing import Callable, Optional
 
 import justpy as jp
 
+from .group import Group
 from ..binding import BindableProperty, BindTextMixin
 from ..events import ClickEventArguments, handle_event
-from .element import Element
 
 
-class Button(Element, BindTextMixin):
+class Button(Group, BindTextMixin):
     text = BindableProperty()
 
     def __init__(self, text: str = '', *, on_click: Optional[Callable] = None):

nicegui/ui.py

@@ -13,6 +13,7 @@ class Ui:
     from .page_layout import PageSticky as page_sticky
     from .update import update
 
+    from .elements.badge import Badge as badge
     from .elements.button import Button as button
     from .elements.card import Card as card
     from .elements.card import CardSection as card_section