Element
The <text> element in BML is designed specifically for displaying text. It is
used for displaying and styling text within a BML layout. It offers a range of
styling options, enabling developers and administrators to control the
appearance and layout of text precisely.
Attributes
Most attributes correspond to their HTML equivalents, providing a familiar
approach for those accustomed to HTML styling. The display property cannot be
set for this component.
| Attribute Name | Required | Default Value | Description |
|---|---|---|---|
| alignHorizontally | No | Sets the horizontal alignment of the text within the element (e.g., left, center, right). | |
| alignVertically | No | Sets the vertical alignment of the text within the element (e.g., top, center, bottom). In order to use this, the element's height needs to be set. | |
| bold | No | Sets bold styling to the text if set to true. |
|
| fontFamily | No | 'Ubuntu' | Sets the font family for the text. |
| fontSize | No | '14px' | Sets the size of the font used for the text. |
| fontWeight | No | Sets the weight (thickness) of the font for the text. | |
| height | No | Sets the height of the text element, in pixels or percentage. | |
| italic | No | Displays text in italics when set to true. |
|
| lineHeight | No | Sets the line height, affecting the space between lines of text. | |
| marginLeft | No | Sets the left margin of the text element, in pixels or percentage. | |
| marginRight | No | Sets the right margin of the text element, in pixels or percentage. | |
| marginTop | No | Sets the top margin of the text element, in pixels or percentage. | |
| marginBottom | No | Sets the bottom margin of the text element, in pixels or percentage. | |
| maxWidth | No | Sets the maximum width the text element can occupy, in pixels or percentage. | |
| opacity | No | Sets the opacity level of the text, ranging from 0 (transparent) to 1 (opaque). | |
| resize | No | Automatically adjusts the element's size to fit its content when set to true. |
|
| textColor | No | Sets the color of the text in hexadecimal notation. | |
| underline | No | If set to true, the text is underlined. |
|
| width | No | '100%' | Sets the width of the text element, in pixels or percentage. |
| x | No | Positions the element along the X axis relative to its parent container, in pixels. | |
| y | No | Positions the element along the Y axis relative to its parent container, in pixels. |
Examples
Basic Text Element
A simple example using default alignment and basic font styling.
<bml borderColor="#000000" borderWidth="1">
<text fontFamily="Arial" fontSize="14" textColor="#000000">
Hello, BML World!
</text>
</bml>
Output:
<div style="border-color: #000000; border-style: solid; border-width: 1px;">
<div style="font-family: Arial; font-size: 14px; color: #000000;">
Hello, BML World!
</div>
</div>
Styled Text Element
A simple example with margins, bold font, underline and align horizontally to the right.
<bml borderColor="#000000" borderWidth="1">
<text fontFamily="Verdana" fontSize="16" fontWeight="900" textColor="#333333" marginTop="10" marginBottom="10" underline="true" alignHorizontally="right">
Styled Text Example
</text>
</bml>
Output:
<div style="border-color: #000000; border-style: solid; border-width: 1px;">
<div style="width: 100%; overflow: hidden; font-family: Verdana; font-size: 16px; font-weight: 900; margin-top: 10px; margin-bottom: 10px; justify-content: flex-end; color: rgb(51, 51, 51); text-decoration: underline; display: flex;">
Styled Text Example
</div>
</div>