XNAT Documentation

tabs

Description

Creates container elements that Spawner tab elements are spawned into.

Spawner Widget Name

kind: tabs

JavaScript Method

XNAT.ui.tabs.init()

Configuration Options

adminTabs:
    kind: tabs
    label: Administer XNAT
	container: "#id-for-container"
    [name]: adminPage
	[layout]: left
	groups:
   		tabGroup1: First Group
   		tabGroup2: Second Group
   		tabGroup3: Third Group
		[etc]
    contents:
		[Spawner objects]

Properties

(required config properties are bold)

Name

Value

Description

kind

tabs

Spawner widget type - creates container elements for all page components of a tabbed interface.

label

(string)

Header text.

container

(string - selector)

Selects existing DOM element to use as a container for the tabs.

name

(string)

Arbitrary, but meaningful, name for these tabs.

layout

left / top

Specify tab layout - left is default.

groups

(object)

Object map containing group ids (property names) and their labels (values).

contents

(Spawner objects)

One or more Spawner element config objects for tabs that will be inside this tabs parent element.

HTML Output

Generic Example

<div class="content-tabs xnat-tab-container">
    <div class="xnat-nav-tabs side pull-left">
        <ul class="nav tab-group" id="foo">
            <li class="label">Foo</li>
			<!-- tab flippers rendered here -->
        </ul>
    </div>
    <div class="xnat-tab-content side pull-right">
        <!-- container for all tab panes -->
    </div>
</div>