Element
The <block> element is a container for content. It is designed to facilitate
the creation of structured and styled sections within a BML document. This
element can be used independently or nested within other elements, offering
flexibility in designing layouts.
Attributes
Most attributes correspond to their HTML equivalents, providing a familiar approach for those accustomed to HTML styling.
| Attribute Name | Required | Type | Description |
|---|---|---|---|
| alignHorizontally | No | String | Sets the horizontal alignment of content within the element (e.g., left, center, right). This attribute is only allowed if the display attribute is set to flex. |
| alignVertically | No | String | Sets the vertical alignment of content within the element (e.g., top, center, bottom). This attribute is only allowed if the display attribute is set to flex. |
| backgroundColor | No | Hex value | Sets the background color of the element. |
| borderColor | No | Hex value | Sets the color of the element's border. |
| borderBottomColor | No | Hex value | Sets the color of the bottom border. |
| borderBottomWidth | No | Number | Sets the width of the bottom border in pixels. |
| borderLeftColor | No | Hex value | Sets the color of the left border. |
| borderLeftWidth | No | Number | Sets the width of the left border in pixels. |
| borderRadius | No | Number | Sets the radius of the element's corners, giving a rounded appearance. |
| borderRightColor | No | Hex value | Sets the color of the right border. |
| borderRightWidth | No | Number | Sets the width of the right border in pixels. |
| borderTopColor | No | Hex value | Sets the color of the top border. |
| borderTopWidth | No | Number | Sets the width of the top border in pixels. |
| borderWidth | No | Number | Sets the overall width of the borders in pixels. |
| display | No | String | Sets the display style of the element. The only allowed value is flex, which enables a flexible box layout design. Such a layout provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. |
| height | No | Number/String | Sets the height of the element, often in pixels or percentage. If the height is smaller than the size of the child elements, the child elements will be cut off. |
| hoverBackgroundColor | No | Hex value | Sets the background color of the element when it is hovered. Hovers are only applied when the BML is rendered in a browser. |
| maxWidth | No | Number/String | Sets the maximum width the element can occupy, in pixels or percentage. If the maximum width is smaller than the size of the child elements, the child elements will be cut off. |
| maxHeight | No | Number/String | Sets the maximum height the element can occupy, in pixels or percentage. If the maximum height is smaller than the size of the child elements, the child elements will be cut off. |
| opacity | No | Number | Sets the opacity level of the element, ranging from 0 (transparent) to 1 (opaque). |
| padding | No | Number/String | Sets the internal spacing between the element’s content and its border. |
| tooltip | No | String | Sets a tooltip that is visible when a user hovers over the element. |
| width | No | Number/String | Sets the width of the element, in pixels or percentage. If the width is smaller than the size of the child elements, the child elements will be cut off. |
Examples
Simple Block Element
This example demonstrates a basic block element with a solid background color and specified dimensions:
<bml>
<block width="200px" height="100px" backgroundColor="#E8751C"/>
</bml>
Result
<div style="background-color: #E8751C; height: 100px; width: 200px;"></div>
Block Element with Border and Nested Block
The following code creates an orange block with rounded corners that has a width of 300px and a height of 150px. Nested within this orange block is a smaller grey block, with a width and height of 200 and 100px respectively:
<bml>
<block width="300" height="150" backgroundColor="#E8751C" borderColor="#000000" borderRadius="10">
<block width="200" height="100" backgroundColor="#808080"></block>
</block>
</bml>
Result
<div style="overflow: hidden; width: 100%;">
<div style="background-color: #E8751C; border-color: #000000; border-radius: 10px; box-sizing: border-box; height: 150px; overflow: hidden; width: 300px;">
<div style="background-color: #808080; box-sizing: border-box; height: 100px; overflow: hidden; width: 200px;">
</div>
</div>
</div>