<body>
The <body> element represents the body of the UI, meaning everything other than the header and bottom tab. The body can scroll or be of fixed size. Using flexbox styling, the body can represent a variety of top-level layouts. <body> elements can handle all of the standard behavior triggers, including "refresh" to provide a pull-to-refresh behavior.
Some examples of views:
<body id="Main" scroll="true">
<view style="Section1">
<text>First section in a vertically scrolling body</text>
</view>
<view style="Section 2">
<text>Second section in a vertically scrolling body</text>
</view>
<view style="Section 3">
<text>Third section in a vertically scrolling body</text>
</view>
</body>
Structure
A <body> element can only appear as a direct child of a <screen> element. There should only be one body per screen.
Attributes
Behavior attributes
A <body> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).
safe-area
| Type | Required |
|---|---|
| boolean, false (default) | No |
If true, the body will be rendered in the safe area of the mobile device (avoiding notches at the top or bottom). Note that safe-area will only have an effect if scroll is false.
style
| Type | Required |
|---|---|
| string | No |
A space-separated list of styles to apply to the element. See Styles. Note that text style rules will cannot be applied to a <body>.
scroll
| Type | Required |
|---|---|
| true, false (default) | No |
An attribute indicating whether the content in the can be scrollable. The style rules of the body will determine the viewport size.
scroll-orientation
| Type | Required |
|---|---|
| vertical (default), horizontal | No |
An attribute indicating the direction in which the body will scroll.
id
| Type | Required |
|---|---|
| string | No |
A global attribute uniquely identifying the element in the whole document.