# riot-tab

> A radio-style selection view manager for riot.js like UITabBarController in iOS.

Latest version **0.2.3** (published 2017-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install riot-tab
pnpm add riot-tab
yarn add riot-tab
bun add riot-tab
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.3 |
| Published | 2017-08-16 |
| First published | 2017-07-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | iq3+Li |
| Maintainers | iq3addli |
| Keywords | riot, riotjs, single-page-applications, minimal, radio-style-selection |

## Links

- npm: https://www.npmjs.com/package/riot-tab
- Repository: https://github.com/iq3addLi/riot-tab
- Homepage: https://github.com/iq3addLi/riot-tab#readme
- Issues: https://github.com/iq3addLi/riot-tab/issues
- npm.io page: https://npm.io/package/riot-tab

## Recent versions

- 0.2.3 (latest) — 2017-08-16
- 0.2.2 — 2017-08-15
- 0.2.1 — 2017-07-05
- 0.2.0 — 2017-07-03

## README

# riot-tab
A radio-style selection view manager for riot.js like UITabBarController in iOS.

<a href="https://www.npmjs.com/package/riot-tab"><img src="https://img.shields.io/npm/v/riot-tab.svg?style=shield"></a>

## How to use

### Case1. manual install
#### import tag
```html
<script type="riot/tag" src="path/to/TabBarController.tag"></script>
```
#### mount with tags
Please note that you need to write with lowercase.
```javascript
<tabbarcontroller tabs={ [
    { tagName : "firstviewcontroller", opts : {} },
    { tagName : "secondviewcontroller", opts : {} },
    { tagName : "thirdviewcontroller", opts : {} }
] } />
```
#### with riot-nav
When used with [riot-nav](https://github.com/iq3addLi/riot-nav).
```javascript
<tabbarcontroller tabs={ [
    { tagName : "navigationcontroller", opts : { root : "firstviewcontroller" } },
    { tagName : "navigationcontroller", opts : { root : "secondviewcontroller" } },
    { tagName : "navigationcontroller", opts : { root : "thirdviewcontroller" } }
] } />
```

### Case2. npm & rollup
In order to use this method, you need to install the following software. You need to set rollup.config.js, but I will omit it here.
* npm
* rollup
* rollup-plugin-riot
* rollup-plugin-node-resolve
* rollup-plugin-commonjs

#### npm install
```bash
npm install --save riot-tab
```
#### import riot-tab
```javascript
import 'riot-tab/dist/TabBarController.tag'
```
#### mount
```javascript
<tabbarcontroller tabs={ [
    { tagName : "firstviewcontroller", opts : {} },
    { tagName : "secondviewcontroller", opts : {} },
    { tagName : "thirdviewcontroller", opts : {} }
] } />
```

## Access
From the tag of the child you can refer from opts.tab
```js
opts.tab
opts.tabBarController // Familiar to iOS engineers
```

#### from a child of riot-nav
```js
opts.nav.tab
```

## API

### selectedIndex
return index of selected tag.
```js
tab.selectedIndex()
```

### setSelectedIndex
Changed to active.
```js
tab.setSelectedIndex(1)
```

### isActive
Check activing in a tag.
> ⚠️ This method can't use in on("mount",...).
```js
tab.isActive( tag )
```

### viewTags
Return tags by managed at riot-tab. It corresponds to ios tabbarController.viewcontrollers
> ⚠️  Not contain caller tag when call in on("mount",...).
```js
tab.viewTags()
```

## Lifecycle
The order called is shouldSelect -> didDeselect -> didSelect
### shouldSelect
Returns select tag is possible. If you do something and do not want to select, return false.
### didDeselect
Called when deselect.
### didSelect
Called when select.

## Demo
[View demo](https://iq3addli.github.io/riot-tab/index.html)

## Check list
|Browser|Version|OS|Result|
|:---|:---|:---|:---:|
|Safari|10.1.1|MacOSX Sierra|◯|
|FireFox|52.0.2|MacOSX Sierra|◯|
|Chrome|58.0.3029.110|MacOSX Sierra|◯|

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