Widgets

Button

global-buttons.css

Scene HTML

<div class="palm-button" x-mojo-touch-feedback="delayed">
  <div class="palm-button-wrapper">
    Button label
  </div>
</div>

Base selector

Optional selectors

Required child

.palm-button

.primary

.secondary

.dismiss

.negative

.affirmative

.disabled

.selected

.palm-button-wrapper

Check Box

global.css

Scene HTML

<div id="my-id" class="left"   x-mojo-element="CheckBox"></div>

Base selector

Optional selectors

Required child

.checkbox

.left

.right

.disabled

.true
 

Notes:

  • Use the classes .left and .right on the widget when placing the check box into a palm-row with title text.

Date Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id" x-mojo-element="DatePicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Integer Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id" x-mojo-element="IntegerPicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Filter Field

global-textfields.css

Scene HTML

<div id="my-id"   x-mojo-element="FilterField"></div>

Base selector

Optional selectors

Required child

.filter-field-container

.filter-field-activity-spinner

.search-term

.mag-glass-icon
 

List Selector

global-menu.css

Scene HTML

<div id="my-id"   x-mojo-element="ListSelector"></div>

Base selector

Optional selectors

Required child

.palm-list-selector

.label

.right

.title
 

.palm-popup-container
  

.palm-row

.list-selector-triangle
 

Progress Pill

global.css

Scene HTML

<div id="my-id" x-mojo-element="ProgressPill"></div>

Base selector

Optional selectors

Required child

.progress-pill-background
  

.progress-pill-progress
  

Radio Button

global.css

Scene HTML

<div id="my-id" x-mojo-element="Radio"></div>

Base selector

Optional selectors

Required child

.palm-radiobutton

.selected
 

Slider

global.css

Scene HTML

<div id='my-id' x-mojo-element="Slider"   class="palm-slider"></div>

Base selector

Optional selectors

Required child

.palm-slider
  

.palm-slider-button

.selected
 

.palm-slider-background
  

Spinner

global.css

Scene HTML

<div id="my-id"   x-mojo-element="Spinner"></div>

Base selector

Optional selectors

Required child

.palm-activity-indicator-small
  

.palm-activity-indicator-large
  

Text Field

global-textfields.css

Scene HTML

<!-- Single Text Field -->
<div id="my-id"   x-mojo-element="TextField"></div>

<!-- Grouped Text Field -->
<div class="palm-row">
    <div class="palm-row-wrapper">
     <div class="textfield-group" x-mojo-focus-highlight="true">
      <div class=""title"">
            <div class="truncating-text" x-mojo-element="TextField"></div>
      </div>
      </div>
    </div>
</div>

Base selector

Optional selectors

Required child

.textfield-group

.focused

.title

.label
 

Time Picker

global-widget-mvpicker.css

Scene HTML

<div id="my-id"   x-mojo-element="TimePicker"></div>

Base selector

Optional selectors

Required child

.mv-picker-capsule
  

Toggle Button

global.css

Scene HTML

<div id="my-id"   x-mojo-element="ToggleButton"></div>

Base selector

Optional selectors

Required child

.sliding-toggle-container
  

.toggle-text
  

.toggle-button

.true

.false

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

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