john_helt•2mo ago

Disabling UI at runtime

I'm looking for a way to disable a certain UI component at runtime. In particular, I want to create a modal to confirm a choice. Until the choice is confirmed (True/False), I want the rest of the UI to remain disabled in this time. I've created a UI wrapper that uses mo.stop, and states to generate a choice like the one showed on the image, and hide the rest of the rest of the wrapped UI component, until the choice is accepted or declined, but this is rather limiting as I need to pass the UI components that I want to hide. Really what I want is to disable the UI components (grey them out), while still showing them, but I can't figure out if that's possible.

4 Replies

Myles Scolnick•2mo ago

Which ui components specifically? Most should have a disabled argument on them

john_heltOP•2mo ago

It could be a stack of components assembled with vstack or hstack. I'm working alot with composite components stacked using vstack or batch

Myles Scolnick•2mo ago

got it - i wonder if we could leverage "<fieldset disabled>". this usually disabled everything inside, but i bet our css styles don't quite adhere perfectly you could like create your own still

def disabled(obj, disabled: bool = True):
   if not disabled:
       return obj
   return mo.Html(f"<fieldset disabled="true" style="opacity: 60">{mo.as_html(obj)}</fieldset>")

def disabled(obj, disabled: bool = True):
   if not disabled:
       return obj
   return mo.Html(f"<fieldset disabled="true" style="opacity: 60">{mo.as_html(obj)}</fieldset>")

john_heltOP•2mo ago

great! I'll try this out! Unfortunately, I couldn't get that to work. Maybe it would be an idea to add "disabled" as a keyword to any type of HTML (or a callout style)?