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 ... |
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access