Scene Basics

Backdrop

global-base.css

Change the background of an individual scene or every scene within the application.

Scene HTML

<div class="my-backdrop"></div>

Base selector

Optional selectors

Required child

my-backdrop
  

body
  

Notes:

  • my-backdrop is a developer-defined selector (you can define any selector name); this technique allows each individual scene to have a unique background.

  • Use the body selector to style the body element; a simple solution to style all of the scenes in your application.

Fixed Header

global-lists.css

Floating header atop your scene; visually identical to the View Menu.

Scene HTML

<div class="palm-header"></div>
<div class="palm-header-spacer"></div>

Base selector

Optional selectors

Required child

.palm-header

.left

.right
 

.palm-header-spacer
  

Page Header

global-lists.css

The topmost element of the scrollable content; commonly used atop preference scenes.

Scene HTML

<div class="palm-page-header multi-line">
     <div class="palm-page-header-wrapper">
        <div class="icon"></div>
        <div class="title">
          My title
        </div>
     </div>
</div>

Base selector

Optional selectors

Required child

.palm-page-header

.multi-line

.icon

.palm-page-header-wrapper

.palm-page-header-wrapper
  

.palm-page-header-wrapper > 
.icon
  

.palm-page-header-wrapper > 
.title

.left

.center

.right

.truncating-text
 

Notes:

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

  • palm-page-header-wrapper > .icon should be a 32 × 32px PNG centered on the div.

Scrim

global.css

A translucent layer used to obscure background UI when modal foreground UI is layered on top of the current scene.

Scene HTML

<div class="palm-scrim"></div>

Base selector

Optional selectors

Required child

.palm-scrim

.app-menu

.dialog

.submenu-popup

.menu-panel

.picker-popup
 

Scroll Fades

In the absence of view or command menus, these fades at the edge of your scene indicate more content.

Scene HTML

<div class="my-scene-fade-top" x-mojo-scroll-fade="top"></div>
<div class="my-scene-fade-bottom" x-mojo-scroll-fade="bottom"></div>

Base selector

Optional selectors

Required child

None

  

Notes:

  • Use a high z-index (100,000) if you want your fades to draw above all else, and use the style -webkit-palm-mouse-target: ignore; to allow taps to pass through these fades to underlying content.

View/Command Menus

global-menus.css

Float menus at either the top or bottom of your scene, and the gradient fades behind them.

Scene HTML

None

Base selector

Optional selectors

Required child

.palm-menu
  

.palm-menu.view-menu

.palm-default

.palm-white
 

.palm-menu.view-menu > 
.palm-menu-fade
  

.palm-menu.command-menu

.palm-default

.palm-white
 

.palm-menu.command-menu > 
.palm-menu-fade
  

.palm-menu-button

.selected
 

.palm-menu-spacer

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

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