Skip to content

Latest commit

 

History

History
106 lines (82 loc) · 2.92 KB

README.md

File metadata and controls

106 lines (82 loc) · 2.92 KB

MUI Tabs

NPM

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

  • If you want to use it for the web, you need to install the clsx package.
  • If you want to use a RippleButton, you need to install the react-transition-group package.
yarn add mui-tabs clsx

if you want to use the RippleButton

yarn add mui-tabs clsx react-transition-group

Examples

Basic example

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

import 'mui-tabs/dist/main.css'
// or import 'mui-tabs/dist/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

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

import 'mui-tabs/dist/main.css'
import 'mui-tabs/dist/ripple.css'
// or import 'mui-tabs/dist/all.css'
// or import 'mui-tabs/dist/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>
  )
}

License

This project is licensed under the terms of the MIT license.