Menu

Segmented Plugin

The segmented plugin allows you to add a segmented control bar (aka. mutually exclusive radio buttons) and set unique events for each segment to send when it is selected.

The idea is similar to that of the TabBarPlugin but the intended functionality is different. It is good UX practice to use a Tab Bar for globally switching between discrete sections of your app and Segmented Controls for locally switching between different perspectives of a single view.

Sample Usage

const segmentedPlugin = await SegmentedPlugin.init()
segmentedPlugin.setColor('#666666')

segmentedPlugin.setItems([
    {
        key: 'all',
        text: 'All'
    },
    {
        key: 'top10',
        text: 'Top 10'
    },
    {
        key: 'latest',
        text: 'Latest'
    }
])

segmentedPlugin.on('itemSelect', (params) => {
    switch(params.key) {
        case 'all':
            page.displayAllSongs()
            break;
        case 'top10':
            page.filterByTop10Songs()
            break;
        case 'latest':
            page.sortSongsByNewest()
            break;
    }
})

Screenshots

IOS Android

Methods

SegmentedPlugin.init() #

Creates and returns an instance of the segmented plugin that is used to make subsequent method calls.


setItems(items) #

Sets the segmented control's items.

Note: If there are existing items set on the control, they are completely replaced.


setColor(color) #

Sets the highlight color of the segmented control. In Android, this means the text color and underline of the selected item.


setInactiveColor(color) (Android only) #

Sets the text color of unselected items in the segmented control.

Note: This is completely ignored in iOS so it is safe to call without checking for Android.


setBackgroundColor(color) #

Sets the background color of the segmented control.


selectItem(key) #

Select the segment corresponding to the given key.


getSelectedItem() #

Returns the key of the currently selected segment.

Events

itemSelect → { params } #

Fires when a segment is selected.

Note: This will always fire once during setItems(items) when the first segment is selected by default.