iconical-tab-nav

iconical-tab-nav

A Tab Navigation component that can be either text or icon based

Demo

Check out the demo.

Install

npm install --save iconical-tab-nav

Usage

This library has been designed to work with material icons by default. In order to use material icons you must include the following line in your application.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

You can then use any of the icons available at https://material.io/tools/icons/ by passing in the relevant string to the 'icon' prop.

import * as React from 'react'

import IconicalTabNav from 'iconical-tab-nav'

class Example extends React.Component {
  render () {
    return (
      <IconicalTabNav 
      tabs={
        [
          { label: 'Home', icon: 'home', render:  ()=> <div>Tab One</div>}, 
          { label: 'Favourites', icon: 'favorite', render:  ()=> <div>Tab Two</div>}
        ]
      }/>
    )
  }
}

API

Tab

IconicalTabNav has one required prop, tabs, that takes a Tab[].

The interface for Tab is as follows:

interface Tab {
  label?: string
  icon?: string
}

In order for the icon to render, the string passed in must match an icon in the material icons set. https://material.io/tools/icons/

Props

name	type	default	description
tabs (required)	Tab[]		(see above)
showLabels	boolean	false	show text labels
hideIcons	boolean	false	show icon labels
containerStyles	ContainerStyles	(see styles)	(see styles)
tabStyles	TabStyles	(see styles)	(see styles)
selectedStyles	TabStyles	(see styles)	(see styles)
labelStyles	LabelStyles	(see styles)	(see styles)
hoverColour	string	#dfe3e6	The background color of the tab when moused over
selected	number / 'none'	'none'	The index of the default tab selection (e.g. 0)
iconSize	enum('s', 'm', 'l', 'xl')	'm'	Size of the icon, as per material design standards (s: 18px, m: 24px, l: 32px, xl: 48px)
selectedColour	string	#008673	The color of the text and icon when active
defaultColor	string	#8897a2	The color of the text and the icon when inactive
reverse	boolean	false	Indicates whether the tabs should sit at the top or the bottom of the container. Default is at the top, if reverse is set to true then tabs will sit at the bottom

Styles

IconicalTabNav has default styling applied so there should be no need to apply futher styles unless desired. It takes style objects for the container component, tabs and the labels and is therefore the styling is highly customisable.

For containerStyles these are the expected values:

interface ContainerStyles {
  backgroundColour?: string (default white)
  padding?: string
}

These styles are applied to the container that wraps the tabs.

For tabStyles and selectedStyles these are the expected values:

interface TabStyles {
  padding?: string
}

These styles are applied to the tab divs. tabStyles are applied to all tabs, selectedStyles are applied to the currently selected tab.

For labelStyles these are the expected values:

interface LabelStyles {
  margin?: string
  fontSize?: string
}

These styles are applied to the label, both text and icon.

But you can pass any valid styles through these objects as they are passed directly in to the component.

License

MIT © kipurc