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>

<header>

The <header> element represents the header of a screen in the app. Typically, the header shows a title and navigation elements

An example header on a screen with a scrolling view.

<screen>
  <body style="Flex">
    <header style="MyHeader">
      <text href="#">Back</text>
      <text>My App</text>
    </header>
    <view scroll="true" style="Flex">
      <view style="FlexHorizontal">
        <text>Basic view</text>
        <text>With Horizontal Layout</text>
      </view>
    </view>
  </body>
</screen>

Attributes

  • Behavior attributes
  • safe-area (deprecated)
  • style
  • id
  • hide

Behavior attributes

A <header> element accepts the standard behavior attributes, except for the "refresh" trigger.

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

id

TypeRequired
stringNo

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

hide

TypeRequired
false (default), trueNo

If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

← <screen><body> →
  • Attributes
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHubStar
Copyright © 2025 Instawork