Live testing for element in documentation

[phoskee]

Question

Hello! It's me again, the one with the bad ideas.
I have another one,

again

It took me a while to understand the real workings of .classes, .props and .style and even more 'cumbersome' is making changes, saving, going back to the broswer.
So, I tried this to make it easier for me to understand the various workings, and I thought maybe it could be introduced in the documentation of each component/element!

I am working on a version that allows you to choose the element, list all classes, props and be able to add the various arguments to pass as well.

See you soon, for another bad idea

[rodja]

That is absolutely awesome! I just talked it through with @falkoschindler. Would you like to create a pull request which introduces this live-testing below "Styling" in the documentation? Making the element selectable is also cool, but the tool is also helpful as it is right now. Maybe you can add it as a second step after we integrated this one?
We should also think hard about possible security implications. We are allowing user input to be evaluated by Python/Js. Is that safe? Do we need sanity checks?

[phoskee]

Eventually the input is called up like this:

def add_classes():
    test_element.classes(replace=input_classes.value)
    test_element.update()

Could it be risky?
I will send a pm for the pull request

[falkoschindler]

The interactive live demo is online: https://nicegui.io/documentation#try_styling_nicegui_elements_ 😎

[phoskee]

So proud!

[rodja]

You can be! That was an awesome idea and execution 🧞