Tabs

Table of contents

• Demo
• Fields
  • items
  • useState
• Events
  • select

Demo

Demo

Fields

items

A list of menu items.

Type

Array

Default value

[]

Item object

text String
Text to be displayed.

isSelected Boolean
Determines whether an item is selected.

isDisabled Boolean
Determines whether an item is disabled.

modifier Boolean
A single CSS modifier or list of space-separated CSS modifiers to add to the component.

selector Function
By default the component highlights items as selected if current app state contains item's state.name.
This function can be used to override that standard behavior.

state Object
Used with Angular UI Router to navigate between app states.
Only used when useState field is set to true.

Examples

Sets the field:

View:

<ma-tabs
    use-state="false"
    items="items">
</ma-tabs>

Controller:

$scope.items = [{
    text: 'DAs',
    icon: 'list',
    new: 6,
    isSelected: true
}, {
    text: 'payments',
    icon: 'calendar'
}, {
    text: 'port information',
    icon: 'anchor',
    isDisabled: true
}];

useState

Determines whether to use Angular UI Router for navigation.
When set to true navigation between items is done automatically based on item's state field and select event is not triggered.

Type

Boolean

Default value

true

Examples

Configures the component to work with app states:

View:

<ma-tabs
    items="items">
</ma-tabs>

Controller:

$scope.items = [{
    text: 'DAs',
    icon: 'list',
    new: 6,
    isSelected: true,
    state: {
        name: 'das.da',
        parameters: {
            id: 200982
        }
    }
}, {
    text: 'payments',
    icon: 'calendar',
    state: {
        name: 'das.da.payments',
        parameters: {
            id: 200982
        }
    }
}, {
    text: 'port information',
    icon: 'anchor',
    isDisabled: true
}];

Events

select

Fires when an item is selected by the user.
Does not fire when useState field is set to true.

Parameters

item Object
The selected item.

Examples

Subscribes to the event:

View:

<ma-tabs
    select="select(item)">
</ma-tabs>

Controller:

$scope.select = function(item) {
    // Handle the event.
};