Hyperview

Hyperview

  • Guides
  • Examples
  • Reference
  • Blog

›Display Elements

Reference

  • Index

Behaviors

  • Behavior Attributes
  • <behavior>
  • Alert
  • Share

Display Elements

  • <doc>
  • <screen>
  • <header>
  • <body>
  • <view>
  • <text>
  • <image>
  • <list>
  • <section-list>
  • <section>
  • <section-title>
  • <items>
  • <item>
  • <spinner>
  • <web-view>

Input Elements

  • <form>
  • <text-field>
  • <select-single>
  • <select-multiple>
  • <option>
  • <picker-field>
  • <picker-item>
  • <switch>
  • <date-field>

Style Elements

  • <styles>
  • <style>
  • <modifier>

Hyperview Client

  • Hyperview component
  • Custom elements
  • Custom behaviors
  • Loading Screen

Hyperview Navigation

  • <navigator>
  • <nav-route>

<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
  • safe-area (deprecated)
  • style
  • scroll
  • scroll-orientation
  • shows-scroll-indicator
  • id

Behavior attributes

A <body> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).

safe-area

TypeRequired
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.

Deprecation note: support for this attribute will be removed in a future release. Instead, implement the custom safe-area element.

style

TypeRequired
stringNo

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

TypeRequired
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

TypeRequired
vertical (default), horizontalNo

An attribute indicating the direction in which the body will scroll.

shows-scroll-indicator

TypeRequired
true (default), falseNo

An attribute indicating whether the scroll bar should be shown. Attribute scroll should be set in for this to have any effect.

id

TypeRequired
stringNo

A global attribute uniquely identifying the element in the whole document.

← <header><view> →
  • Structure
  • Attributes
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHub
Copyright © 2025 Instawork