Docs

Native rail elements properties

This element goals is to draw and use native rail component

Properties

direction

TypeDefault valueSupported value
string$RailDirection.HORIZONTAL$RailDirection.HORIZONTAL $RailDirection.VERTICAL

Define how to align item (horizontally or vertically).

itemChooser

TypeDefault valueSupported value
objectnullNot applicable

itemChooser will allow to define which item will be used to draw a tile in you rail. You must respect following structure

NameTypeSupported valueExplanation
keystringNot applicableDefine the key that will be used in you data object to switch on
valuesArray<{keyValue, item}≥Not applicable
  • keyValue will define the value associated to the defined “key”
  • item will define the item to use if keyValue is matching
defaultItemstringitem to be used
  • if keyValue is not matching any of the one set
  • if no items are defined, so we want the same item for everything

As an example we would be able to have the following object :

const itemChooser = {
  key: "ratio",
  items : [
    {
      keyValue: "16:9",
      item: "LandscapeItem"
    },
    {
      keyValue: "4:3",
      item: "PortraitItem"
    }
  ],
  defaultItem: "DefaultItem"
}

Getter / Setter

getIndex() → {Promise< Number >}

Get the index of the current focused item.

Returns

A Promise that returns the index of the current focused item

getItem(index) → {Promise< Object >}

Get the item data at the given index.

Parameters

NameMandatoryTypeDescription
indexyesnumberThe index of the item you want

Returns

A Promise that returns an object that matches the item data of the asked index

setData(datas, index, chooser) → {Promise}

Send data to be used by the rail to create items.

You could use empty array to empty the rail.

If no index sent, 0 value will be used.

You can modify the chooser only when setting data.

Parameters

NameMandatoryTypeDescription
datasyesArrayThe data that are going to be used to fill the rail
indexnonumberThe index you want to scroll to
choosernoObjectSee itemChooser property description

Returns

Promise that resolve is set has been successful.

Public interface

scrollTo(index) → {Promise< Boolean >}

Scroll to the item at the requested index.

Parameters

NameMandatoryTypeDescription
indexyesnumberThe index of the item you want

Returns

True if the item has been scrolledTo, false else (out of bound). If the item is already scrolled to, return false.

Protected methods that needs implementations

_setData

Called by setData

_scrollTo

Called by scrollTo

_onScroll(index)

Function that needs to be connected to scroll native event

_onItemClicked(index)

Function that needs to be connected to clicked native event

Events

onScroll(index, Object)

Triggers each time an item has been scrolled to.

Send current item data.

onItemClicked(index, Object)

Triggers each time an item has been clicked on (remote OK or touch).

Send clicked item data.

Edit this page on GitHub
Next
Native text input properties