riot-tab v0.2.3
riot-tab
A radio-style selection view manager for riot.js like UITabBarController in iOS.
How to use
Case1. manual install
import tag
<script type="riot/tag" src="path/to/TabBarController.tag"></script>
mount with tags
Please note that you need to write with lowercase.
<tabbarcontroller tabs={ [
{ tagName : "firstviewcontroller", opts : {} },
{ tagName : "secondviewcontroller", opts : {} },
{ tagName : "thirdviewcontroller", opts : {} }
] } />
with riot-nav
When used with riot-nav.
<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
npm install --save riot-tab
import riot-tab
import 'riot-tab/dist/TabBarController.tag'
mount
<tabbarcontroller tabs={ [
{ tagName : "firstviewcontroller", opts : {} },
{ tagName : "secondviewcontroller", opts : {} },
{ tagName : "thirdviewcontroller", opts : {} }
] } />
Access
From the tag of the child you can refer from opts.tab
opts.tab
opts.tabBarController // Familiar to iOS engineers
from a child of riot-nav
opts.nav.tab
API
selectedIndex
return index of selected tag.
tab.selectedIndex()
setSelectedIndex
Changed to active.
tab.setSelectedIndex(1)
isActive
Check activing in a tag.
⚠️ This method can't use in on("mount",...).
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",...).
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
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 | ◯ |