Package Exports

react-metro-tabs
react-metro-tabs/dist/index.es.js
react-metro-tabs/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-metro-tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Metro Tabs

windows phone style tabs in react.js

Install

npm install react-metro-tabs

yarn add react-metro-tabs

Demo

Github Pages

CodeSandbox

Sandbox

Example Usage

import React, { Component } from "react";

import { MetroTabs, MetroTab } from "react-metro-tabs";

export default function App() {
  return (
    <div
      style={{
        border: "2px solid black",
        borderRadius: 10,
        height: 500,
        width: 300,
      }}
    >
      <MetroTabs onTabChange={(e) => console.log(e)} tabSpaces={50}>
        <MetroTab title='landing page'>content1</MetroTab>
        <MetroTab title='study cases'>content2</MetroTab>
        <MetroTab title='contact us'>content3</MetroTab>
      </MetroTabs>
    </div>
  );
}

MetroTabs props

Prop	Type	Description	Default
transitionDuration	number	transition duration	1000
tabSpaces	number	space between tabs, make it dynamic for making responsive	70
tabsColor	string	color of all tabs	"#000"
tabFontSize	number	font size of all tabs	"2.5em"
tabFontWeight	number	font weight of all tabs	"normal"
transitionTimingFunction	string	transition timing function	"ease"
onTabChange	Function	function that triggers on tab change
children	Node	children (only MetroTab is allowed)

MetroTab props

Prop	Type	Description	Default
title	string	title of the tab
children	Node	children (every children are allowed)

License

The source code is licensed under MIT, all assets are copyrighted to their respective owner.

This package uses react-hammerjs underhood.