Merge pull request #416 from Diegiwg/Avatar--added-QAvatar-component

Avatar: added QAvatar component

nicegui/elements/avatar.py

@@ -0,0 +1,44 @@
+from typing import Literal, Optional
+
+from ..element import Element
+
+
+class Avatar(Element):
+
+    def __init__(self,
+                 icon: str = 'none', *,
+                 color: str = 'primary',
+                 text_color: Optional[str] = None,
+                 size: Optional[str] = None,
+                 font_size: Optional[str] = None,
+                 square: bool = False,
+                 rounded: bool = False,
+                 ) -> None:
+        """Avatar
+
+        A avatar element wrapping Quasar's
+        `QAvatar <https://quasar.dev/vue-components/avatar>`_ component.
+
+        :param icon: name of the icon or image path with "img:" prefix (e.g. "map", "img:path/to/image.png")
+        :param color: color name for component from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param text_color: color name from the Quasar Color Palette (e.g. "primary", "teal-10")
+        :param size: size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) (e.g. "16px", "2rem")
+        :param font_size: size in CSS units, including unit name, of the content (icon, text) (e.g. "18px", "2rem")
+        :param square: removes border-radius so borders are squared (default: False)
+        :param rounded: applies a small standard border-radius for a squared shape of the component (default: False)
+        """
+        super().__init__('q-avatar')
+
+        self._props['icon'] = icon
+        self._props['color'] = color
+        self._props['square'] = square
+        self._props['rounded'] = rounded
+
+        if text_color is not None:
+            self._props['text-color'] = text_color
+
+        if size is not None:
+            self._props['size'] = size
+
+        if font_size is not None:
+            self._props['font-size'] = font_size

nicegui/ui.py

@@ -2,6 +2,7 @@ import os
 
 from .element import Element as element
 from .elements.audio import Audio as audio
+from .elements.avatar import Avatar as avatar
 from .elements.badge import Badge as badge
 from .elements.button import Button as button
 from .elements.card import Card as card

website/reference.py

@@ -81,6 +81,11 @@ def create_full(menu: ui.element) -> None:
     def icon_example():
         ui.icon('thumb_up')
 
+    @example(ui.avatar, menu)
+    def avatar_example():
+        ui.avatar('favorite_border', text_color='grey-11', square=True)
+        ui.avatar('img:https://nicegui.io/logo.png', color='blue-2')
+
     @example(ui.link, menu)
     def link_example():
         ui.link('NiceGUI on GitHub', 'https://github.com/zauberzeug/nicegui')