ui.div()

[ofenbach]

Why not add this shortcut instead of using ui.element('div')?

its easy to implement i guess?

[ofenbach]

def div():
    return ui.element('div')

this is how i implemented it now, for example for this usage:

with div():
    ...

[falkoschindler]

Interesting idea, @ofenbach! Let me share my thoughts about it:

1. We try to decouple NiceGUI from historic HTML terminology to make it more accessible to non-web developers. Therefore one of our most primitive elements is called "label" instead of "div", even though it is a div.
2. Sure, adding a ui.div would be very easy to implement. But we try not to spoil the namespace with too many elements. Once they are in the world, we have to support them basically forever. So we're getting a bit picky. 😉
3. We could make the tag name optional, so that ui.element() creates a div by default. It would, however, introduce the danger of forgetting to specify a tag name when deriving from Element. This is not a major problem, but something to consider.
4. What are you using div() for? We usually use ui.row and ui.column as a container for multiple elements. If they don't suit your needs, creating a custom class (or function) might just be the right thing to do.

[ofenbach]

the catdesign got updatet, if you got time you can check it out.
i created a landing page to see all the elements available.
its not really responsive but if you look at the code inside cat_design.py you can see i made
custom div and box elements in case you are interested.

[rodja]

This is the url of the CatDesign project: https://github.com/ofenbach/CatDesign. I'll hopefully check it out tomorrow.

[rodja]

Looks really great. Can't wait for an official pip package :-)
We plan on setting up a collection of cool projects done with NiceGUI in #396. This is definitely one of them!

Maybe your design system could benefit from auto-completion with literals as was discussed in #117 (comment)?

[ofenbach]

Thanks for the feedback.

That's exactly what i was looking for (Literals). Will implement those.

[falkoschindler]

In #362 we're working on something related. Should be part of the next release.

[dridk]

I understand your reasoning but I think nicegui should have both low-level and high-level usage.
I think it would have been better to do what JustPy did by separating the basic components ( ui.div ) from the quasar components ( ui.QButton ).

For example, I prefer to use ui.element(‘div’) rather than ui.cards() because I can fully customize the element with tailwindcss. If I use ui.cards(), I always have style conflicts between props and classes.

I'm currently trying to reproduce this design: https://ui.shadcn.com/. I'll let you know if I succeed

[falkoschindler]

Your post sparked the idea for a separate html namespace which could be auto-generated from some kind of HTML specification and include all HTML elements and potentially their attributes:

from nicegui import ui, html

with html.p():
    html.img(src="...")
    html.a(href="...")
    html.text("This is inner HTML of the p tag.")

ui.run()

All these statements would translate to a ui.element with the corresponding tag, which can be further manipulated with style, classes, props and event registrations.

What do you think?

[dridk]

Looks good but with classes and style only. I don't understand the purpose of "props" when we can use function arguments.

[dridk]

Just to share my thoughts, In a more generalist perspective, I would have done :

from niceui.quasar import ui
from niceui import html 
ui.button()
html.button()

But I know it's too complicated because it would require a lot of work. is already an incredible libs you hav done.

[falkoschindler]

In version 2.5.0 we introduced an html module including html.div().
Therefore I'll close this feature request as completed.