https://github.com/bilaleren/mui-tabs

Material UI tabs for React and React Native projects.
https://github.com/bilaleren/mui-tabs

material-ui mui mui-tabs react react-component react-native react-native-material-tab react-native-tab react-native-tab-view react-tabs scss tabs typescript

Last synced: 1 day ago
JSON representation

Material UI tabs for React and React Native projects.

• Host: GitHub
• URL: https://github.com/bilaleren/mui-tabs
• Owner: bilaleren
• License: mit
• Created: 2022-04-11T23:52:21.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-10-02T14:29:20.000Z (about 1 month ago)
• Last Synced: 2024-10-31T18:41:00.396Z (8 days ago)
• Topics: material-ui, mui, mui-tabs, react, react-component, react-native, react-native-material-tab, react-native-tab, react-native-tab-view, react-tabs, scss, tabs, typescript
• Language: TypeScript
• Homepage: https://bilaleren.github.io/mui-tabs/
• Size: 30.8 MB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# MUI Tabs

[![NPM](https://img.shields.io/npm/v/mui-tabs.svg)](https://www.npmjs.com/package/mui-tabs)

![](https://badgen.net/npm/license/mui-tabs)

![](https://badgen.net/packagephobia/install/mui-tabs)

![](https://badgen.net/bundlephobia/min/mui-tabs)

![](https://badgen.net/bundlephobia/minzip/mui-tabs)

![](https://badgen.net/npm/dw/mui-tabs)

![](https://badgen.net/npm/dm/mui-tabs)

This package was developed based on the [Material UI Tabs](https://mui.com/components/tabs/#main-content) component. [See example](https://bilaleren.github.io/mui-tabs).

## Differences

- emotion, etc. it is not used

- There is no Material UI requirement

## Features

- [x] [Icon tabs](https://bilaleren.github.io/mui-tabs#icon-tabs)

- [x] [Vertical tabs](https://bilaleren.github.io/mui-tabs#vertical-tabs)

- [x] [Scrollable tabs](https://bilaleren.github.io/mui-tabs#scrollable-tabs)

- [x] [Full width tabs](https://bilaleren.github.io/mui-tabs#fullwidth-tabs)

- [x] [Centered tabs](https://bilaleren.github.io/mui-tabs#centered-tabs)

- [x] [Ripple effect supported](https://bilaleren.github.io/mui-tabs#ripple-effect)

- [x] [React Native supported](./NATIVE_README.md)

## Installation

```bash

yarn add mui-tabs@^2

```

> See [here](https://github.com/bilaleren/mui-tabs/tree/v3) for v3 installation and documentation.

## Examples

#### Basic example

```tsx

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 (

     setValue(value)}>

      

      

    

  )

}

```

#### Ripple effect example

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

```bash

yarn add react-transition-group

```

**Example**

```tsx

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 (

     setValue(value)}

      TabComponent={RippleButton}

      ScrollButtonComponent={RippleButton}

      allowScrollButtonsMobile={true}

    >

      

      

      

      

      

      

      

    

  )

}

```

## License

This project is licensed under the terms of the

[MIT license](https://github.com/bilaleren/mui-tabs/blob/master/LICENCE).