Expose properties of Quasar widgets as properties of NiceGUI elements

[Diegiwg]

Quasar's widgets have several interesting props, which the NiceGUI developer would only discover by reading Quasar's documentation.

Wouldn't it be interesting to expose these props as properties of NiceGUI elements?

Probably a ui.button().color = "#000000" would be extremely useful/cool. I don't know how far I would go to do the direct conversion, since the props are inside the _props dictionary.

Perhaps some set_xxxx functions would be ideal, and it would still leave the option to expose docstrings explaining each of the 'configurable' properties.

[Diegiwg]

Example of how the definition of a Button would look, with some of the properties exposed:

from nicegui.element import Element
from nicegui import ui


class QButton(Element):
    """Quasar has a component called QBtn which is a button with a few extra useful features. For instance, it comes in two shapes: rectangle (default) and round. It also has the material ripple effect baked in (which can be disabled).

    The button component also comes with a spinner or loading effect. You would use this for times when app execution may cause a delay and you want to give the user some feedback about that delay. When used, the button will display a spinning animation as soon as the user clicks the button.
    """

    def __init__(self, label: str = "", icon: str = "") -> None:
        super().__init__("q-btn")

        self.set_label(label)
        self.set_icon(icon)

    def set_label(self, label: str):
        """[label]: String | Number

        Description: The text that will be shown on the button

        Example: [Button Label]
        """
        self._props["label"] = label

    def set_icon(self, icon: str):
        """[icon]: String

        Description: Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)

        Examples: [map] [ion-add] [img:https://cdn.quasar.dev/logo-v2/svg/logo.svg] [img:path/to/some_image.png]
        """
        self._props["icon"] = icon

    def set_round(self, round: bool):
        """[round]: Boolean

        Description: Makes a circle shaped button
        """
        self._props["round"] = round


btn = QButton(label="Test", icon="layers_clear")

ui.run()

[falkoschindler]

You're right. We could, indeed, expose more props as properties. Some thoughts about it:

1. Why did you chose set_ methods instead of properties?
2. The set_ methods could return self to support the builder pattern.
3. Manipulating _props won't update the client. But you can simply add calling self.update().
4. The button label is already covered by the bindable property text.
5. The next step might be to make these new properties bindable. This, however, involves pretty much boilerplate code (see e.g. TextElement).
6. The question will arise, which prop is worth implementing in Python and which is not. This was one reason why we added so little props in the first place.
7. We should be careful not to interfere with our new layout and styling API How to simplify styling? #117, TailwindCSS class manager implementation #362, Layout builder #364. Quasar props seem somehow separate, but should nevertheless be part of an overall strategy for manipulating elements.

[Diegiwg]

Yeah, there are some widgets that have different properties that don't make sense to expose as a Nicegui element.

Example: QBreadcrumbsEl has several navigation properties, which does not make sense to expose in nicegui, as it would not work.

• to, exact, replace, active-class, exact-active-class.

All these props are related to Vue's navigation, which is not used in Nicegui.

[Diegiwg]

Oops, I chose _set because I wasn't able to make a property link.

In this case, I tested it yesterday with some Quasar elements, and I replaced the _set by qcontent and qstyle classes.

The properties are exposed within these classes, like functions, which receive the value to be set as an argument.

I didn't mind adding the self, to enable the constructor pattern. Perhaps this is an interesting approach.

Link of what I've done so far: quasar-nicegui-ex

Example of use:

from nicegui import ui
from quasar import *


el_1 = avatar("clock")
el_1.qcontent.icon("directions")
el_1.qstyle.color("pink")

el_2 = badge()
el_2.qcontent.label("Hello")
el_2.qcontent.align("center")
el_2.qstyle.color("blue")
el_2.qstyle.outline(True)

el_3 = banner()
el_3.qcontent.inline_actions(True)
el_3.qstyle.rounded(True)
el_3.qstyle.dense(False)

with el_3.style(add="background: red; color: white;"):
    ui.label("Hello")
    ui.label("World")

el_4 = bar()
el_4.qstyle.dark(True)
el_4.qstyle.dense(True)

with el_4.style(add="background: red; color: white;"):
    ui.label("File")
    ui.label("Edit")
    ui.label("View")
    ui.label("Tools")

el_5 = breadcrumbs()

with el_5:
    el_5_1 = breadcrumbsEl()
    el_5_1.qcontent.label("Home")
    el_5_1.qnavigation.href("/")
    el_5_1.qstate.disabled(True)

    el_5_2 = breadcrumbsEl()
    el_5_2.qcontent.label("File")
    el_5_2.qnavigation.href("/file")
    el_5_1.qnavigation.target("_blank")


ui.run(title="Quasar Example")