MonsterUI Buttons and Links

by Audrey M. Roy Greenfeld | Wed, Jan 22, 2025

Iterating through the ButtonT enum to show all MonsterUI button types visually.


from fastcore.utils import *
from fasthtml.common import *
from monsterui.all import *
tags = ["MonsterUI"]

Setup

Button()
show(Button("Click me"))
show(A("My link", href="example.com", cls=AT.muted))
show(NavBar(title="MySite", nav_links=(A("Link 1"), A("Link 2"))))
show(Button("Hey",cls=ButtonT.primary))
ButtonT
[t.name for t in ButtonT]

AI Prompt

Is there a convenience function in enum to list all these?

AI Response

Yes! The Enum class in Python has a built-in method called __members__. You can use it like this:

ButtonT.__members__

Would you like me to explain more about what this returns and how it differs from the list comprehension approach you used?

ButtonT.__members__
L(ButtonT.__members__)
def _Button(t): return Button(f"{t} button",cls=t)
btns = L(ButtonT.__members__).map(_Button)
btns
to_xml(Div(*btns))
show(to_xml(Div(*btns)))

AI Prompt

Why don't the buttons look right?

AI Response

Looking at the button classes in the HTML output, I notice the classes are missing the uk-button- prefix that we saw in the ButtonT enum values. Instead, they just have uk-button default, uk-button primary, etc.

Let's check what's happening by looking at one button directly:

show(Button("test", cls=ButtonT.primary))

This should help us see if the issue is in how we're passing the enum values to the Button constructor.

AI Prompt

def _Button(t): return Button(f"{t} button",cls=ButtonT.t) btns = L(ButtonT.members).map(_Button) btns

AI Response

Ah, I see the issue in your code. ButtonT.t isn't correct - you're trying to access a property t on ButtonT, but t is actually the variable in your function containing the member name.

Instead, you should use ButtonT[t] or getattr(ButtonT, t) to look up the enum member by name. Would you like to try fixing this?

def _Button(t): return Button(f"{t} button",cls=ButtonT[t])
btns = L(ButtonT.__members__).map(_Button)
show(Div(*btns))

Improvements

This part is from SolveIt office hours with Isaac Flath.

AI Prompt

Is there any other way to get ButtonT.__members__ in enum or otherwise?

AI Response

Yes! There are a few other ways to get enum members:

  1. Using list(ButtonT) - this gives you the values
  2. Using ButtonT._member_names_ - this gives you just the names
  3. Using ButtonT._member_map_ - similar to __members__ but returns a regular dict

Would you like to try any of these to see how they differ?

list(ButtonT)[0].value
Div(*[Button(v,cls=v) for v in list(ButtonT)])
show(Div(*[Button(v,cls=v) for v in list(ButtonT)]))
show(DivLAligned(*[Button(v,cls=v) for v in list(ButtonT)]))
show(Grid(*[Button(v,cls=v) for v in list(ButtonT)]))