Options
All
  • Public
  • Public/Protected
  • All
Menu

The Toolbar Component provides an organized navigation system.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Toolbar Demo', toolbarDemo)
.addParameter('Toolbar', uActions.ParamType.TOOLBAR)
.register();
function toolbarDemo(comp) {
var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.arrangement = uComps.Arrangement.DISTRIBUTE_VERTICALLY;
toolbarComp.arrangement = uComps.NavigationAnimation.SQUASH;
toolbarComp.itemScale = 0.3;
}

Hierarchy

Index

Constructors

Properties

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

arrangement: Arrangement

The arrangement of toolbar items within the component space.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.arrangement = uComps.Arrangement.DISTRIBUTE_VERTICALLY;
captionX: number

Horizontal alignment of the caption text. Range 0 (left) to 1 (right).

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.captionX = 0;
captionY: number

Vertical alignment of the caption text. Range 0 (top) to 1 (bottom).

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.captionY = 0.8;
clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components: ComponentList

Access this Component's sub-components.

fontColor: string

Color for caption text as a hexadecimal value. The alpha channel will be added, if not included.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.fontColor = '#631B1B';
//toolbarComp.fontColor = '#631B1BAA'; //Alpha channel set to be partially transparent
fontFilename: string

The font file to use for the caption text.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.fontFilename = 'vera.ttf'
fontSize: number

The font size for the caption text.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.fontSize = 10;
formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height: number

The height of the Component.

highlightAnimation: HighlightAnimation

Animation to apply to the highlight set in selectionHighlight. uComps.HighlightAnimation: 0 - NONE, 1 - SLIDE, 2: FADE

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.highlightAnimation = uComps.HighlightAnimation.FADE;
iconAlign: number

Align icon in the y direction between the top and bottom of the component space. Range 0 (top) to 1 (bottom).

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.iconAlign = 0.5;
itemScale: number

Enlarge or shrink items using this ratio. Default is 1

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.itemScale = 0.3;

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

name: string

Name of the component.

parent: Component

Access this Component's parent component.

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

resizeType: ResizeType

Resize as Millimeters (font will stay the same size regardless of device) or Scale with Screen..

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.resizeType = uComps.ResizeType.SCALE_WITH_SCREEN;
selectAnimation: NavigationAnimation

Animation that runs when a toolbar item is selected. uComps.NavigationAnimation: 0 - DEFAULT, 1 - BOUNCE, 2 - ZOOM, 3 - SPIN, 4 - SQUASH, 5 - SQUEEZE, 6 - ROCK, 7 - FLIP, 8 - BOUNCE_LEFT, BOUNCE_RIGHT

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.arrangement = uComps.NavigationAnimation.SPIN;
selectedFontColor: string

Color for caption text, once it's selected, as a hexadecimal value. The alpha channel will be added, if not included.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.selectedFontColor = '#235051';
//toolbarComp.selectedFontColor = '#235051AA'; //Alpha channel set to be partially transparent
selectedFontFilename: string

The font file to use for the caption text, once it's selected.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.selectedFontFilename = 'vera.ttf'
selectedFontSize: number

The font size for the caption text, once it's selected.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.selectedFontSize = 10;
selectionHighlight: string

Path to the image to appear behind the icon when selected.

var toolbarComp = uComps.cast.toToolbar(comp);
toolbarComp.selectionHighlight = 'presets/blue_background_rect_down.png';
type: string

Type of the component.

uniqueId: string

Unique ID of the component.

visible: boolean

Whether or not the Component is visible.

width: number

The width of the Component.

x: number

The x position of the Component relative to its parent.

y: number

The y position of the Component relative to its parent.

Methods

  • emit(eventType: string, data: Object): void
  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

  • focus(): void
  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
    .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
    .register();
    function setFocus(textEntry) {
    textEntry.focus();
    }

    Returns void

  • get(propertyName: string): any
  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
    var text1=uPages.current.components.getText('Text 1');
    console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

  • on(eventType: string, callback: Function): void
  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

  • refresh(): void
  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

  • set(propertyName: string, value: any): void
  • set(data: Object): void
  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
    uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

  • tween(seconds: number, params: Object, type?: TweenType): void
  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void