aotoo-react-tabs

react tabs component that based on the aotoo

Stats

StarsIssuesVersionUpdatedCreatedSize
aotoo-react-tabs
021.0.192 years ago4 years agoMinified + gzip package size for aotoo-react-tabs in KB

Readme

aotoo-react-tabs

Install

# install
yarn add aotoo-react-tabs

USAGE

Depends on aotoo this library, Aotoo is a global variable

import aotoo from 'aotoo'
require('aotoo-web-widgets')
require('aotoo-react-tabs')

const WrapElement = Aotoo.wrap( <div>这个真好吃</div>, {
  rendered: function(dom){ /* after reactDom didMounted then ... */ },
  leave: function(){ /* before reactDom will be unmounted then ..*/ }
})

const tabs = Aotoo.tabs({
  props: {
    tabClass: 'tabs-nornal-top',
    data: [
      {title: 'aaa', content: '什么, what'},
      {title: 'bbb', content: '来了'},
      {title: 'ccc', content: <WrapElement />},
    ]
  }
})

tabs.render('id')  // reader tabs to some dom with id
// cosnt xxx = tabs.render() ====> it's a jsx

API

$update(opts)

// ======== or full replacement
tabs.$update({
  data: [
    {title: 'one', content: 'abcccc'},
    {title: 'two', content: 'uuuyyy'},
    ...
  ]
})

The above operation causes the structure to be re-rendered and the callback method rendered is executed again

$select(index)

tabs.$select({ select: 2 })

access the above operation, you can dynamically append the structure after you append the data(_data)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.