Tailwind Styled Complex Components¶
oj.PC.Subsection¶
The Subsection function creates a subsection component that consists of a heading and content. It utilizes StackV to vertically stack the heading and content, creating a visually appealing subsection.
Usage¶
subsection_instance = oj.PC.Subsection('Sample Heading', content_function)
Parameters¶
heading_text: A string representing the text of the subsection heading. This parameter is required.
content_: A callable function that generates the content to be displayed in the subsection. This parameter is required.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
kwargs: Additional keyword arguments.
oj.PC.Title¶
The Title function creates a styled component that displays a title text. It takes a key and a title text as inputs, and displays the title text with the specified alignment.
Usage¶
title_instance_ = oj.PC.Title_('My Title', align='end')
Parameters¶
title_text: A string representing the title text to be displayed. This parameter is required.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
align: A string specifying the alignment of the title text. Default is set to “center”.
kwargs: Additional keyword arguments.
Tailwind Styled Input Components¶
TextInput¶
The TextInput function creates a styled input element.
Usage¶
labeled_input = TextInput(key='input_key', placeholder="Enter text", on_change=on_input_change)
Parameters¶
key: A string representing the key for the component instance. This parameter is required.
placeholder: A string representing the placeholder text for the input element. This parameter is required.
data_validators: A list of data validator functions to be applied to the input element. Default is an empty list.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
kwargs: Additional keyword arguments.
oj.AC.CheckboxInput¶
The CheckboxInput function creates a styled checkbox input element.
Usage¶
checkbox_instance = CheckboxInput(key='checkbox_key', checked=True)
Parameters¶
key: A string representing the key for the component instance. This parameter is required.
checked: A boolean value indicating whether the checkbox should be initially checked. Default is False.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
kwargs: Additional keyword arguments.
Complex Mutable Components¶
oj.Mutable.StackD¶
StackD is a dynamic component representing a “Deck” of cards, where each card is a child element. It allows for switching between the child elements, displaying only one at a time.
Usage¶
stackd_instance = oj.Mutable.StackD(key="my_stackd", child=[Component1, Component2, Component3], height_anchor_key = "component1")
Methods¶
addItems(cgens): Adds child elements to the StackD component. The first child element is set as the initially visible card.
bring_to_front(id): Brings the card with the specified id to the front, making it visible and hiding the previous visible card.
Example¶
stackd_instance = StackD(childs=[btn1, btn2, btn3])
stackd_instance.bring_to_front('text_key')
oj.Mutable.Slider¶
The Slider function creates a custom slider component that displays a set of clickable circles based on the provided itemiter list. It takes a key and a list of items as input, displaying the items as circles within the slider. When a circle is clicked, its outline is updated, and an on-click event is triggered.
Usage¶
slider_instance = oj.Mutable.Slider(key='slider_key', num_iter=range(4,12))
Parameters¶
key: A string representing the key for the component instance. This parameter is required.
itemiter: A list of items to be displayed as clickable circles in the slider. This parameter is required.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
kwargs: Additional keyword arguments.
Example¶
slider_instance = oj.Mutable.Slider(key='slider_key', num_iter= [1, 2, 3], twsty_tags=['bg-gray-200'])
This example demonstrates how to create a Slider component with a specified key and a list of items. The optional twsty_tags parameter is used to apply additional Tailwind CSS classes to style the slider with a gray background.
Note: In the current implementation, the slider component is a custom component and not a built-in HTML slider input element.
oj.Mutable.ColorSelector¶
The ColorSelector function creates a custom color selector component that combines a main color selector and a shades slider. It allows users to pick a color and its shade, then triggers an on-click event with the chosen color.
Usage¶
def on_cs_click(dbref, msg, to_target):
print ("color selector changed : ", msg.value)
color_selector_instance = ColorSelector(key='color_selector_key', on_click=on_cs_click)
Parameters¶
key: A string representing the key for the component instance. This parameter is required.
twsty_tags: A list of Tailwind CSS classes to apply to the component. This parameter is optional.
kwargs: Additional keyword arguments.
Example¶
color_selector_instance_ = ColorSelector_('color_selector_key', twsty_tags=['bg-gray-200'], on_click=on_cs_click)
This example demonstrates how to create a ColorSelector component with a specified key. The optional twsty_tags parameter is used to apply additional Tailwind CSS classes to style the color selector with a gray background.
Functionality¶
When the user selects a main color, the shades slider is updated to display shades of the chosen color. If the user clicks on a shade, the component passes the selected color in hexadecimal format to the parent component via an on-click event.
Note: In the current implementation, the ColorSelector component is a custom component and not a built-in HTML color input element.