Options
All
  • Public
  • Public/Protected
  • All
Menu

Class ToggleButtonComponent

The Toggle Button Component can toggle between two states, and customize actions for each of those states.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Toggle Button Demo', toggleButtonDemo)
.addParameter('Toggle Button Group', uActions.ParamType.TOGGLE_BUTTON)
.register();
function toggleButtonDemo(comp) {
    var toggleButtonComp = uComps.cast.toToggleButton(comp);
    toggleButtonComp.text = 'Play';
    toggleButtonComp.toggledText = 'Stop';
    toggleButtonComp.defaultFilename = 'presets/light_grey.png';
}

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

alpha

alpha: number

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

clippingType

clippingType: ClippingType

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

components

components: ComponentList

Access this Component's sub-components.

defaultFilename

defaultFilename: string

Image that will display on the button when in the normal display state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.defaultFilename = 'presets/light_grey.png';

disabledFilename

disabledFilename: string

Image that will display on the button when the button is disabled.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.disabledFilename = 'presets/dark_grey.png';

downFilename

downFilename: string

Image that will display on the button when in the down, or pressed state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.downFilename = 'presets/dark_blue.png';

enabled

enabled: boolean

Enable or disable the button.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.enabled = false;

font

font: string

The font file to use for the button text.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.font = 'vera.ttf'

fontColor

fontColor: string

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

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.fontColor = '#631B1B';
//toggleButtonComp.fontColor = '#631B1BAA'; //Alpha channel set to be partially transparent

fontSize

fontSize: number

The font size for the button text.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.fontSize = 10;

formEnabled

formEnabled: boolean

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

formFieldName

formFieldName: string

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

height

height: number

The height of the Component.

hideText

hideText: boolean

Show or hide the text on the button.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.hideText = true;

iconFilename

iconFilename: string

Sets the icon from the Image folder, to show as an icon on the button.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.iconFilename = 'star_on.png;

iconScale

iconScale: number

Adjust the size of the icon on the button Range 0.2 to 1 (full size).

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.iconScale = 0.5;

iconX

iconX: number

Set the horizontal position of the icon on the button. Range 0 to 1.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.iconX = 0.13;

iconY

iconY: number

Set the vertical position of the icon on the button. Range 0 to 1.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.iconY = 0.5;

keepAspectRatio

keepAspectRatio: boolean

When true, this maintains the aspect ratio of the button during resizing.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.keepAspectRatio = true;

mask

mask: RectangleComponent | CircleComponent

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

name

name: string

Name of the component.

parent

parent: Component

Access this Component's parent component.

passedFormValidation

passedFormValidation: boolean

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

scaleBorderWithScreen

scaleBorderWithScreen: boolean

Set border to scale with screen or be fixed.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.scaleBorderWithScreen = true;

sliceBottom

sliceBottom: number

Preserve the edges and corners of the image. Editing Nine Slice values will apply to the button default, down and disabled images. Bottom Slice: Stop the bottom of the image from being stretched.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.sliceBottom = 6;

sliceLeft

sliceLeft: number

Preserve the edges and corners of the image. Editing Nine Slice values will apply to the button default, down and disabled images. Left Slice: Stop the left of the image from being stretched.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.sliceLeft = 8;

sliceRight

sliceRight: number

Preserve the edges and corners of the image. Editing Nine Slice values will apply to the button default, down and disabled images. Right Slice: Stop the right of the image from being stretched.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.sliceRight = 8;

sliceTop

sliceTop: number

Preserve the edges and corners of the image. Editing Nine Slice values will apply to the button default, down and disabled images. Top Slice: Stop the top of the image from being stretched.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.sliceTop = 6;

text

text: string

Text to appear on the button.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.text = 'Play';

textScaling

textScaling: TextScaling

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

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.textScaling = uComps.TextScaling.SCALE_WITH_SCREEN;

textX

textX: number

Set the horizontal position of the text on the button. Range 0 to 1.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.textX = 0.5;

textY

textY: number

Set the vertical position of the text on the button. Range 0 to 1.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.textY = 0.5;

toggled

toggled: boolean

When true, the button is in its toggled state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggled = true;

toggledDefaultFilename

toggledDefaultFilename: string

Image that will display on the toggled button when in the normal display state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledDefaultFilename = 'presets/light_green.png';

toggledDisabledFilename

toggledDisabledFilename: string

Image that will display on the toggled button when the button is disabled.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledDisabledFilename = 'presets/dark_grey.png';

toggledDownFilename

toggledDownFilename: string

Image that will display on the toggled button when in the down, or pressed state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledDownFilename = 'presets/dark_green.png';

toggledFont

toggledFont: string

The font file to use for the toggled button text.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledFont = 'vera.ttf'

toggledFontColor

toggledFontColor: string

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

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledFontColor = '#631B1B';
//toggleButtonComp.toggledFontColor = '#631B1BAA'; //Alpha channel set to be partially transparent

toggledFontSize

toggledFontSize: number

The font size for the toggled button text.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledFontSize = 10;

toggledText

toggledText: string

Text to appear on the button when in the toggled state.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledText = 'Stop';

toggledTracking

toggledTracking: number

The distance between text characters. Range -5 to 10. Default is 0.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.toggledTracking = 0.2

tracking

tracking: number

The distance between text characters. Range -5 to 10. Default is 0.

var toggleButtonComp = uComps.cast.toToggleButton(comp);
toggleButtonComp.tracking = 0.2

type

type: string

Type of the component.

uniqueId

uniqueId: string

Unique ID of the component.

visible

visible: boolean

Whether or not the Component is visible.

width

width: number

The width of the Component.

x

x: number

The x position of the Component relative to its parent.

y

y: number

The y position of the Component relative to its parent.

Methods

emit

  • 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

  • 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

  • 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

  • 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

  • refresh(): void

  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

set

  • 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

  • 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