mozilla
Your Search Results

    Tabs

    Tabs are used as a navigational widget that let the user switch among sets of views. This way, a window may contain multiple views. See the Coding guide for details on how to implement tabs in your apps.

    Characteristics

    • Tab bars always fill the full horizontal width of the screen.
    • You may have up to (but no more than) five tabs in a tab bar.
    • Tab bars should be positioned at the very bottom of the screen, unless doing so would result in excessive clutter due to multiple bars of controls at the bottom of the screen.
    • Tabs can contain a variety of elements, such as buttons, filters, indicators, and the like.
    • Tabs' labels may be text, text with an icon, or just an icon.

    Visuals

    Below is a screen shot showing a fairly complicated screen; the tab bar is at the bottom, providing the primary interface for selecting views. At the top, just below the "Call Log" header, is a filter bar, letting the user switch between all calls and missed calls. These are both kinds of tab bars.

    Tab states

    Each tab has four possible states:

    Normal
    This is how the tab normally appears when not the active tab.
    Pressed
    When the user is holding a finger down on the tab, it's in the "pressed" state.
    Active
    The currently active tab—the one whose corresponding view is displayed—is in the "active" state.
    Disabled
    When a tab is disabled, it cannot be selected; its icon should be drawn with a grey cast.
    Normal Pressed Active Disabled

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, chrisdavidmills
    Last updated by: chrisdavidmills,