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 
.palm-swipe-delete-button

.palm-row.palm-swipe-delete 
.palm-swipe-undo-button
  

Touch Feedback

global-lists.css

Displaying alternate background images and content styling in response to user interaction.

Scene HTML

<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-row.selected
  

Notes:

  • When touched, rows using x-mojo-touch-feedback will display a selection graphic implemented using -webkit-border-image with a 9-tile image (41 × 49 pixels).

  • For items within scrollable content, use delayed feedback. For fixed elements that don’t scroll, immediate feedback is an option. Use immediatePersistent or delayedPersistent only if you require exacting control of when feedback is removed (which must be done manually).

Touch Feedback with Groups

global-lists.css

Displaying alternate background images and content styling in response to user interaction with rows within in a palm-group.

Scene HTML

<!--  First Row -->
<div class="palm-group">
    <div class="palm-row first" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->
      </div>
    </div>
</div>

<!--  Last Row -->
<div class="palm-group">
    <div class="palm-row last" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->
      </div>
    </div>
</div>

<!--  Single Row -->
<div class="palm-group">
    <div class="palm-row single" x-mojo-touch-feedback="delayed">
      <div class="palm-row-wrapper">
        <!-- row content here -->
      </div>
    </div>
</div>

Base selector

Optional selectors

Required child

.palm-group 
.palm-row.selected.first
  

.palm-group 
.palm-row.selected.last
  

.palm-group 
.palm-row.selected.single
  

Notes:

  • The first row within a group requires a selection graphic with rounded top corners.

  • The last row within a group requires a selection graphic with rounded bottom corners.

  • A single row within a group requires a selection graphic with rounded corners.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.15.25.34