UI Components
Tabs alpha

Standard (Horizontal) Tabs

Example ⚡


<UITabsView
  activeTabKey='overview'
  onChangeTab={function(){};}>
    <UITabsView.Tab
      tabKey='overview'
      title='Overview'>
    </UITabsView.Tab>
    <UITabsView.Tab
      tabKey='filters'
      title='Filters'>
      </UITabsView.Tab>
    <UITabsView.Tab
      tabKey='joins'
      title='Joins'>
    </UITabsView.Tab>
    <UITabsView.Tab
      tabKey='lineage'
      title='Lineage'>
    </UITabsView.Tab>
    <UITabsView.Tab
      tabKey='queries'
      title='Queries'>
    </UITabsView.Tab>
</UITabsView>

Usage

  • Standard Tabs should be used when the majority of the content is changed with the tab.

Vertical Tabs

Example


<UITabView
   type='vertical'
   tabs={tabs}/>

Usage

Vertical Tabs should be used when only a subset of the page content is changed with the tab.

Segmented Controller

Example


<UISegmentedController >

Usage

Segmented Controller should be used when a very samll portion of the page content is changed with the tab

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • October 31, 2016 - Added Segmneted Controller
  • July 20, 2016 - Updated code snippets and added example images as placeholders