List Basics

Add/Remove Rows

global-lists.css

The “add item” row appended to a list and “remove item” buttons for removable rows.

Scene HTML

None

Base selector

Optional selectors

Required child

.list-item-add-button
.list-item-remove-button
  

Lists and Rows

global-lists.css

Rows stacked vertically within lists, designed for legibility and touch interaction.

Scene HTML

<!-- Within Scene    -->
<div id="my-list" x-mojo-element="List"></div>

<!-- Within List template -->
<div class="palm-row"   x-mojo-touch-feedback="delayed">
     <div class="palm-row-wrapper">
       <!-- row content here -->
     </div>
</div>

Base selector

Optional selectors

Required child

.palm-list
  
.palm-row
.first
.last
.single
.no-divider
.no-separator
.disabled
.palm-row-wrapper
.palm-row-wrapper
.textfield-group
 
.palm-row-wrapper > .title
.left
.right
.truncating-text
 

Notes:

  • .palm-row-wrapper: child element with a specified margin to compensate for the padding effect of -webkit-border-image.

Separators

global-lists.css

Thin lines that visually separate rows.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-row
  

Reordering Rows

global-lists.css

The space behind the reordered items and the item you’re moving.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-drag-spacer
.palm-row.palm-reorder-element
  

Swipe to Delete

global-lists.css

The space revealed when you swipe to delete, which may contain confirmation buttons.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-row.palm-swipe-delete
.palm-row.palm-swipe-delete ...

Get Palm webOS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial