Basic Components

The framework provides developers with a range of basic components that can be combined to quickly develop applications. For detailed information, please refer to the component documentation.

What are components:

• Components are the basic building blocks of the view layer.
• Components come with some styles consistent with the TransVoice style.
• A component typically consists of an opening tag and a closing tag, with attributes used to modify the component and content enclosed between the two tags.

<tagname property="value"> Content goes here ... </tagname>

Note: All components and attributes are in lowercase and connected with hyphens (-)

Attribute Types

Type	Description	Notes
Boolean	Boolean value	When this attribute is present on a component, it's treated as true regardless of its value. It's considered false only when it's not present on the component. If the attribute value is a variable, its value will be converted to a Boolean.
Number	Number	1, 2.5
String	String	"string"
Array	Array	[1, "string"]
Object	Object	{ key: value }
EventHandler	Event handler	"handlerName" is the name of an event handler defined in the Page.
Any	Any	Any attribute

Common Properties

All components have the following properties:

Property	Type	Description	Notes
id	String	Unique identifier for the component	Must be unique throughout the page
class	String	Component's style class	Defined in the corresponding CSS
style	String	Inline style for the component	Dynamically set inline styles
hidden	Boolean	Whether the component is visible	All components are visible by default
data-*	Any	Custom data attributes for the component	Sent to event handlers when an event is triggered on the component
bind:*	EventHandler	Component events	See event descriptions for details

Special Properties

Nearly all components have their own specific attributes that can be used to modify their functionality or style. Please refer to the documentation for each component for details.