Tabs

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.


Default Usage

import { ItsyTabs } from '@itsy-ui/navigation';

const schema = {
  "items": [
    {
      "title": "Tab 1",
      "content": {
        "ui:widget": "label",
        "title": "Tab 1 Content",
        "alignText": "center",
        "headerTag": "h5"
      },
      "closable": false
    },
    {
      "title": "Tab 2",
      "content": {
        "ui:widget": "label",
        "title": "Tab 2",
        "alignText": "center",
        "headerTag": "h5"
      },
      "closable": false
    }
  ],
  "typeId": "tabs"
}

<ItsyTabs className="tabs" schema={schema} />


Bottom tabbar Usage

import { ItsyTabs } from '@itsy-ui/navigation';

const schema = {
  "tabType": "tab-nav",
  "items": [
    {
      "title": "Home",
      "icon": "home",
      "path": "/home",
      "primary": true
    },
    {
      "title": "Search",
      "icon": "search",
      "path": "/search_listing",
      "primary": true
    },
    {
      "title": "Property",
      "icon": "business",
      "path": "/property_details",
      "primary": true
    },
    {
      "title": "Places",
      "icon": "subtitles",
      "path": "/places",
      "primary": false
    },
    {
      "title": "Settings",
      "icon": "settings",
      "path": "/settings",
      "primary": false
    }
  ]
}

<ItsyTabs className="tabs" schema={schema} />


API

name type default description
className String additional class name of root node.
style Object {} Inline style object
schema Object {} Schema which contains information to be displayed inside drawer.


Schema API’s

name type default description
tabType String tab Mode of the tab to display (tab|tab-nav)
items object Array of tab items. Each items contains following attributes,
  • title - Tab item title
  • content - Content to be displayed inside tab
  • path - Route path to be redirected when clicked
  • icon - Icon to be displayed when tab rendered in bottom
  • content - Content to be displayed inside tab
  • closable - Show close icon in tab
typeId String Model name tab bound to


Compatibility

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
Edge last 2 versions last 2 versions last 2 versions last 2 versions