Back to Polythene Tabs main page

Tabs component for React

• Options
• Usage
  • Tab options
  • Scrollable tabs
  • Getting the tabs state
• Appearance
  • Mobile bottom menu
  • Scrollable tabs with custom arrow icons
  • Styling
    • Themed component
    • CSS
    • Style
  • Tab widths
  • Dark or light tone

Options

Tabs options

Usage

Tabs can show a text label, an icon, or the combination of the two. Because each tab are registered with the parent Tabs component, tabs cannot be passed as children but only as option parameter to Tabs.

import React from "react"
import { Tabs } from "polythene-react"

const tabOptions = [{
  //
}]

<Tabs tabs={tabOptions} />

Tab options

Text labels:

[
  { label: "Favorites" },
  { label: "Notifs" },
  ...
]

Icons:

[
  { icon: { svg: { content: iconHeartSVG } } },
  { icon: { svg: { content: h.trust(iconAlarmSVG_String) } } },
  ...
];

Text labels and icons combined:

[
  {
    label: "Favs",
    icon: { svg: { content: iconHeartSVG } }
  },
  {
    label: "Notifs",
    icon: { svg: { content: h.trust(iconAlarmSVG_String) } },
  },
  ...
]

You can use Button options here (Tab button options will be passed to the Button component). For example:

[
  {
    label: "Favorites",
    ink: false
  },
  {
    label: "Notifs",
    ink: false
  },
  ...
]

To set shared options all at once, use option all:

{
  all: { ink: false },
  tabs: [
    { label: "Favorites" },
    { label: "Notifs" }
  ]
}

Alternatively, write the tab options as children:

<Tabs>
  {[
    {
      label: "One"
    },
    {
      label: "Two",
      disabled: true,
      icon: { svg: { content: iconHeartSVG } } 
    },
    {
      label: "Three",
      selected: true,
    }
  ]}
</Tabs>

Scrollable tabs

To display more tabs than fit in the viewport, set scrollable to true. On no-touch devices 2 scroll buttons will automatically be added to navigate the tabs. The scroll buttons can be customized - see under Appearance below.

To create the container where the buttons are displayed behind (sliding doors), it must have CSS attributes:

• A width or maximum width: f.i. max-width: 400px
• Overflow on hidden on the x axis: overflow-x: hidden
• A height; this should be at least the tab button height (48px): height: 48px

The container's background-color will automatically set the scroll button colors. The color will automatically set the scroll button icon color.

For example:

<div
  style={{
    maxWidth: "400px",
    color: "#fff",
    backgroundColor: "#444",
    overflowX: "hidden",
    height: "48px"
  }}
>
  <Tabs scrollable tabs={tabOptions} />
</div>

Getting the tabs state

To read the currently selected tab, for instance to write the selected tab to a controller variable, use onChange:

{
  onChange: ({ index }) => this.setState({ selectedTabIndex: index })
}

The state object contains data on the current tab:

• index: Array index of the selected tab
• options: the options that were passed to the tab button
• el: the tab button HTML Element

Appearance

Mobile bottom menu

Use option menu to remove the minimum width settings from the tab buttons and compress padding and label font size.

{
  menu: true,
  autofit: true,
  hideIndicator: true
}

Scrollable tabs with custom arrow icons

import React from "react"
import { Tabs } from "polythene-react"

const arrowBackSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
const arrowForwardSVG = <svg width="24" height="24" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>

const tabOptions = [
  { label: "Web" },
  { label: "Shopping" },
  { label: "Videos" },
  { label: "Images" },
  { label: "Books" },
  { label: "More" }
]

<div
  style={{
    maxWidth: "400px",
    color: "#fff",
    backgroundColor: "#444",
    overflowX: "hidden",
    height: "48px"
  }}
>
  <Tabs
    scrollable
    scrollIconBackward={{ svg: { content: arrowBackSVG } }}
    scrollIconForward={{ svg: { content: arrowForwardSVG } }}
    tabs={tabOptions}
  />
</div>

Styling

Below are examples how to change the Tabs appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { TabsCSS } from "polythene-css"

TabsCSS.addStyle(".themed-tabs", {
  color_light:               "#00BCD4",
  color_light_selected:      "#F44336",
  color_light_tab_indicator: "#F44336"
})

<Tabs className="themed-tabs" />

CSS

Change CSS using the Tabs CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/tabs"

Style

Some style attributes can be set using option style. The tab button styles can be passed using all.style:

<Tabs
  all={{
    style: {
      backgroundColor: "#EF6C00",
      color: "#fff"
    }
  }}
/>

Tab widths

• The minimum tab width is 72px. For larger screens (> 480px, as defined in the default theme) the minimum tabs width is 160px.
• To automatically fit the tabs in the view, use parameter autofit.
• To make all tabs the width of the largest tab, use parameter largestWidth.

To use a fixed width without autofit:

Tabs.addStyle(".tabs-fixed-width", {
  tab_min_width:        100,
  tab_min_width_tablet: 100
});

h(Tabs,
  {
    className: "tabs-fixed-width",
    tabs: tabOptions
  }
)

or:

.pe-tabs:not(.pe-tabs--small) .pe-tabs__tab {
  min-width: 100px;
}

Dark or light tone

If the component - or a component's parent - has option tone set to "dark", the component will be rendered with light colors on dark.

• Use tone: "dark" to render light on dark
• Use tone: "light" to locally render normally when dark tone is set