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>

<section-list>

The <section-list> element represents a sectioned list of items. Each section of the list has a sticky title bar, followed by a list of items. Unlike child elements of s <view>, children in a <section-list> undergo optimizations to efficiently render hundres of items.

<section-list style="List">
  <section-title style="Header">
    <text>Section 1</text>
  </section-title>

  <item key="a" style="Item">
    <text>Item 1</text>
  </item>

  <section-title style="Header">
    <text>Section 1</text>
  </section-title>

  <item key="b" style="Item">
    <text>Section 2</text>
  </item>
</section-list>

Structure

A <section-list> element will only render <section-title> and <item> children elements. Other elements will be ignored during rendering.

Attributes

  • Behavior attributes
  • style
  • id
  • hide
  • sticky-section-titles
  • keyboard-dismiss-mode
  • keyboard-should-persist-taps

Behavior attributes

A section list will accept the standard behavior attributes. However, a section list will only trigger the refresh behavior (through the pull-to-refresh gesture). Other behaviors, such as presses, should be handled by the <item> elements in the section list.

style

TypeRequired
stringNo

A space-separated list of styles to apply to the text. See Styles.

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.

sticky-section-titles

TypeRequired
true, falseNo

When set to "true", the section titles will remain sticky at the top of their section items, as the list is being scrolled. When set to "false", the section titles will scroll along with the items of the list. When not explicitly set, the section titles will adopt the platform behaviors: sticky on iOS, not sticky on Android.

keyboard-dismiss-mode

TypeRequired
none (default), on-drag, interactiveNo

An attribute that controls the virtual keyboard behavior when the scrollable view is interacted with. Note: interactive value is only supported on iOS. When set to this value, the keyboard is dismissed interactively with the drag and moves in synchrony with the touch, dragging upwards cancels the dismissal. On Android this is not supported and it will have the same behavior as none.

keyboard-should-persist-taps

TypeRequired
never (default), always, handledNo

An attribute that controls the virtual keyboard behavior when the scrollable view is tapped.

← <list><section> →
  • Structure
  • Attributes
    • sticky-section-titles
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHub
Copyright © 2025 Instawork