Mutable HtmlComponents

Caution

Mutable components within the oj.Mutable namespace can only mutate the classes attribute via twsty_tags. If you want to create HTMLComponent types that can mutate other attributes, see the example usage in this GitHub repository.

Below is an example usage for the oj.Mutable.Button mutable component

mybtn = oj.Mutable.Button(key="mubtn", text="", value="", twsty_tags=[bg/green/1, ...])

Let’s say we want to modify the background based on some event. In the corresponding event handler:

def on_click_handler(dbref, msg, to_mutableShell):
"""
to_mutableShell: a function that returns the mutableShell of the static component
"""

mybtn_ms = to_mutableShell(mybtn)
mybtn_ms.add_twsty_tags(bg/green/5)

Once the above handler is invoked, the button background color will change to darker color of green

Checkout the example code snippets in the OfJustPy examples repository.

Following mutable components are supported. Their kwargs and instance attributes are same as their corresponding static component version.

class oj.Mutable.Button

class oj.Mutable.Circle

class oj.Mutable.Label

class oj.Mutable.Span

class oj.Mutable.TextInput

class oj.Mutable.Container

class oj.Mutable.Div

class oj.Mutable.StackH

class oj.Mutable.StackV

class oj.Mutable.StackD

class oj.Mutable.ColorSelector

class oj.Mutable.Slider

class oj.Mutable.WebPage

class oj.Mutable.Form

HCCStatic

Div class types whose css/classes is mutable but childs are static

class oj.HCCStatic.Div

class oj.HCCStatic.StackV

HCCMutable

Div class types whose css/classes is static but childs are mutable

class oj.HCCMutable.Div

class oj.HCCMutable.StackV

class oj.HCCMutable.StackH

class oj.HCCMutable.StackW

class oj.HCCMutable.Container

Layout Modifiers

Halign(content, align='center', **kwargs)

Aligns the HTML component content horizontally.

Parameters:

• content (Ofjustpy HTML component object) – The HTML component to be aligned.

• align (str, optional) – (optional) The horizontal alignment. Default is “center”. Other options are start, end, center, between, evenly, around

• kwargs – Additional keyword arguments for styling and attributes.

Returns:

An Ofjustpy HTML component with the specified horizontal alignment.

This function aligns the HTML component horizontally using the provided align parameter. You can specify the horizontal alignment using values like “left,” “center,” or “right.”

Example usage:

# Center-align the content
centered_content = Halign(oj.Mutable.Span(text="This is centered text"), align="center")

# Left-align the content
left_aligned_content = Halign(oj.Mutable.Button(text="Left-aligned text"), align="left")

Subsection(heading_text: AnyStr, content, align='center', twsty_tags=[], **kwargs)

Create a subsection with a heading and content.

param heading_text:

The text for the subsection heading.

type heading_text:

str

param content:

The content of the subsection.

type content:

Ofjustpy HTML component object

param align:

(optional) The horizontal alignment of the subsection. Default is “center”.

Other options are “start,” “end,” “center,” “between,” “evenly,” “around.” :type align: str, optional

param twsty_tags:

(optional) A list of Tailwind CSS tags for styling.

type twsty_tags:

List[str], optional

param kwargs:

Additional keyword arguments for styling and attributes.

return:

An Ofjustpy HTML component representing the subsection.

This function creates a subsection with a heading and content. You can specify the horizontal alignment of the subsection using the align parameter. The twsty_tags parameter allows you to apply Tailwind CSS styling to the subsection.

Example usage:

# Create a subsection with centered content
subsection = Subsection(
    heading_text="Section Title",
    content= oj.Mutable.Span(text="This is the subsection content."),
    align="center",
    twsty_tags=["bg-blue-100", "p-4"],
)

Subsubsection(heading_text: AnyStr, content, align='center', twsty_tags=[], **kwargs)

Same as Subsection except heading font is bit smaller.