# rex-tabs

> ReX React UI Component

Latest version **1.2.0** (published 2019-04-26) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install rex-tabs
pnpm add rex-tabs
yarn add rex-tabs
bun add rex-tabs
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-04-26 |
| First published | 2019-04-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 0 |
| Unpacked size | 385.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rex Project Authors |
| Maintainers | claudio.moya-rakuten.com |
| Keywords | css, sass, mobile-first, responsive, front-end, framework, web, react, ui-components |

## Links

- npm: https://www.npmjs.com/package/rex-tabs
- Repository: https://github.com/rakuten-rex/rex-tabs
- Homepage: https://rakuten-rex.github.io/rex-tabs/
- Issues: https://github.com/rakuten-rex/rex-tabs/issues
- npm.io page: https://npm.io/package/rex-tabs

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-04-26

## README

# ReX React UI Components Library
## ReX React UI Component: rex-tabs

This project is part of ReX Design Language and it can be used to create React UI Components.   
For more information visit:   

Github  
https://github.com/rakuten-rex

NPM  
https://www.npmjs.com/org/rakuten-rex

## How it was built 

1. Build tool: webpack 4
1. Codebase: Fork of Bootstrap project + ReX custom styles
1. Css engine: Sass
1. JavaScript component: React

# How to install

```
npm install rex-tabs@1.2.0 --save
```

## What you can do

Tabs are a type of navigation pattern, that allows the user to change views in the same page. They provide a way to meaningfully separate content into different sections, while showing users the available content and how to get to it.

This component includes support for different styles such as border bottom, border top, subtab and icon tab.   

### Live examples

For a complete guide of properties for React and HTML classes please visit the Storybook site:  

https://rakuten-rex.github.io/rex-tabs/

### JavaScript modules

#### React component (JavaScript + CSS Styles)

For plug and play components integration.   

Example: 

```js
import 'rex-core'; // ReX Core dependency
import { Tabs, TabPane } from 'rex-tabs';

function MyComponent() {
  return (
    <Tabs selected={0} type="default">
      <TabPane label="TabPane 1">
        This is my TabPane 1 contents!Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </TabPane>
      <TabPane label="TabPane 2">
        This is my TabPane 2 contents!Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </TabPane>
      <TabPane label="TabPane 3">
        This is my TabPane 3 contents!Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </TabPane>
      <TabPane label="TabPane 4">
        This is my TabPane 4 contents!Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </TabPane>
      <TabPane label="TabPane 5">
        This is my TabPane 5 contents!Lorem Ipsum is simply dummy text of the
        printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a
        galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic
        typesetting, remaining essentially unchanged. It was popularised in the
        1960s with the release of Letraset sheets containing Lorem Ipsum passages,
        and more recently with desktop publishing software like Aldus PageMaker
        including versions of Lorem Ipsum.
      </TabPane>
    </Tabs>
  );
}
```

#### CSS Styles only

For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.

Example: 

```js
import 'rex-core/css'; // ReX Core dependency
import 'rex-tabs/css';

function MyComponent() {
  return (
    <div class="tabs">
      <ul class="tabs-menu">
        <li role="tab" class="selected"><a class="selected" role="presentation">TabPane 1</a></li>
        <li role="tab"><a role="presentation">TabPane 2</a></li>
        <li role="tab"><a role="presentation">TabPane 3</a></li>
        <li role="tab"><a role="presentation">TabPane 4</a></li>
        <li role="tab"><a role="presentation">TabPane 5</a></li>
      </ul>
      <div class="tabs-content">
        <div>This is my TabPane 1 contents!Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#x27;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </div>
  );
}
```

### Static HTML

Add it from our CDN into your HTML template or HTML static page.

For development mode:

```markdown
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.development.css" rel="stylesheet">
<!-- rex-tabs -->
<link href="https://r.r10s.jp/com/rex/rex-tabs/1.2.0/rex-tabs.development.css" rel="stylesheet">
```

For production mode:

```markdown
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/rex-core/1.4.0/rex-core.production.min.css" rel="stylesheet">
<!-- rex-tabs -->
<link href="https://r.r10s.jp/com/rex/rex-tabs/1.2.0/rex-tabs.production.min.css" rel="stylesheet">
```

Example: 

```markdown
<div class="rex-css-style my-component">
  <div class="tabs">
    <ul class="tabs-menu">
      <li role="tab" class="selected"><a class="selected" role="presentation">TabPane 1</a></li>
      <li role="tab"><a role="presentation">TabPane 2</a></li>
      <li role="tab"><a role="presentation">TabPane 3</a></li>
      <li role="tab"><a role="presentation">TabPane 4</a></li>
      <li role="tab"><a role="presentation">TabPane 5</a></li>
    </ul>
    <div class="tabs-content">
      <div>This is my TabPane 1 contents!Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#x27;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
  </div>
</div>
```

## Javascript and React related documents

Take a look to this nice documentation pages to be more familiar with React and modern Javascript:

### Official site
https://reactjs.org/docs/getting-started.html   

### Google Web Fundamentals (the whole site is a must to read)
https://developers.google.com/web/fundamentals/

### Webpack as magic bundler
https://webpack.js.org/

### Composing Software series (how to understand Funcional Programming)
https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea   

### Common React patterns
https://reactpatterns.com   

### Understanding Storybook with nice images
https://blog.hichroma.com/the-delightful-storybook-workflow-b322b76fd07   

### Some guidelines for clean code
https://americanexpress.io/clean-code-dirty-code/

---
_Source: https://npm.io/package/rex-tabs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._