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>
  • <text-area>
  • <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

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

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
BlogGitHubStar
Copyright © 2022 Instawork