Mui-tabs NPM | npm.io

MUI Tabs

npm.io npm.io npm.io npm.io npm.io npm.io

This package was developed based on the Material UI Tabs component. See example.

Differences

emotion, etc. it is not used
There is no Material UI requirement

Features

Installation

yarn add mui-tabs@^3

Examples

Basic example

import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'

import 'mui-tabs/styles/main.css'
// or import 'mui-tabs/styles/scss/main.scss'

const App = () => {
  const [value, setValue] = React.useState(1)

  return (
    <Tabs value={value} onChange={(value) => setValue(value)}>
      <Tab value={1} label="Tab 1" />
      <Tab value={2} label="Tab 2" />
    </Tabs>
  )
}

Ripple effect example

You need to install the react-transition-group package.

yarn add react-transition-group

Example

import * as React from 'react'
import { Tab, Tabs } from 'mui-tabs'
import RippleButton from 'mui-tabs/RippleButton'

import 'mui-tabs/styles/main.css'
import 'mui-tabs/styles/ripple.css'
// or import 'mui-tabs/styles/all.css'
// or import 'mui-tabs/styles/scss/all.scss'

const App = () => {
  const [value, setValue] = React.useState(1)

  return (
    <Tabs
      value={value}
      variant="scrollable"
      scrollButtons={true}
      onChange={(value) => setValue(value)}
      TabComponent={RippleButton}
      ScrollButtonComponent={RippleButton}
      allowScrollButtonsMobile={true}
    >
      <Tab value={1} label="Tab 1" />
      <Tab value={2} label="Tab 2" />
      <Tab value={3} label="Tab 3" />
      <Tab value={4} label="Tab 4" />
      <Tab value={5} label="Tab 5" />
      <Tab value={6} label="Tab 6" />
      <Tab value={7} label="Tab 7" />
    </Tabs>
  )
}