Mojo.Widget.Spinner
Namespace Detail
Overview
The Spinner widget provides all spinner behavior. Use the spinner to indicate that activity is taking place. The framework uses it as part of the activity button type, and you'll see it in many of the core applications. There are two sizes: the large Spinner is 128 pixels wide (and high) and the small Spinner is 32 pixels. (These dimensions are for the Pre screen and may vary on other devices, but the proportions and fit within the UI will be maintained.) All attribute properties are optional, but the spinnerSize
is commonly used; set it to "large", the default, or "small". To start the Spinner, set its model property (default name is 'spinning') to true
; to stop it, set the property to false
.
Declaration
<div x-mojo-element="Spinner" id="spinnerId" class="spinnerClass" name="spinnerName"></div>
Properties | Required | Value | Description |
---|---|---|---|
x-mojo-element | Required | Spinner | Declares the widget as type 'Spinner'. |
id | Required | Any String | Identifies the widget element for use when instantiating or rendering. |
class | Optional | Any String | Spinner uses .palm-spinner-container by default, but you can override this setting. |
name | Optional | Any String | Adds a unique name to the Spinner widget; generally used in templates. |
Events
The Spinner widget has no events.
Instantiation
this.controller.setupWidget("spinnerId", this.attributes = { spinnerSize: "large" }, this.model = { spinning: false } );
Attribute Properties
Attribute Property | Type | Required | Default | Description |
---|---|---|---|---|
property | String | Optional | spinning | DEPRECATED Name of model property for this widget instance |
modelProperty | String | Optional | spinning | Name of model property for this widget instance; default is "spinning". |
spinnerSize | String | Optional | Mojo.Widget.spinnerSmall | Either Mojo.Widget.spinnerLarge or Mojo.Widget.spinnerSmall (small=32 or large=128). |
superClass | String | Optional | .palm-activity-indicator | Specifies the CSS class name for the background image when you specify a custom. |
startFrameCount | Integer | Optional | None | If the spinner widget is in custom mode, this specifies the number of frames allocated to the pre-main loop animation. |
mainFrameCount | Integer | Optional | 10 | If the spinner widget is in custom mode, this specifies the number of frames allocated to the main loop animation. |
finalFrameCount | Integer | Optional | None | If the spinner widget is in custom mode, this specifies the number of frames allocated to the post-main loop animation. |
frameHeight | Integer | Optional | small | Explicitly sets the frame height of the animation (small=32 or large=128). |
fps | Integer | Optional | 10 | Number of frames per second |
Model Properties
Model Property | Type | Required | Default | Description |
---|---|---|---|---|
spinning | Boolean | Required | false | Spinner state; true is spinning. |
Methods
To invoke a method on a widget, use the scene controller's get
method for the desired widget, and append mojo
followed by the method.
Example:
this.controller.get('myWidget').mojo.getValue()
Method | Arguments | Description |
---|---|---|
start | None | Starts the spinner. |
stop | None | Stops the spinner. |
toggle | None | Changes the spinner state (spinning to not, stopped to spinning). |