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

Demo

A list of menu items.

Array

[]

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.

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
}];

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.

Boolean

true

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
}];

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

item Object
The selected item.

Subscribes to the event:

View:

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

Controller:

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