Git Product home page Git Product logo

tabs's Introduction

rc-tabs


React Tabs component.

NPM version dumi build status Test coverage Dependencies DevDependencies npm download bundle size

Screenshot

Example

http://localhost:8000/examples

online example: https://tabs.react-component.now.sh/

install

rc-tabs

Feature

Keyboard

  • left and up: tabs to previous tab
  • right and down: tabs to next tab

Usage

import Tabs, { TabPane } from 'rc-tabs';

var callback = function(key) {};

React.render(
  <Tabs defaultActiveKey="2" onChange={callback}>
    <TabPane tab="tab 1" key="1">
      first
    </TabPane>
    <TabPane tab="tab 2" key="2">
      second
    </TabPane>
    <TabPane tab="tab 3" key="3">
      third
    </TabPane>
  </Tabs>,
  document.getElementById('t2'),
);

API

Tabs

name type default description
activeKey string - current active tabPanel's key
animated boolean | { inkBar: boolean, tabPane: boolean } { inkBar: true, tabPane: false } config animation
defaultActiveKey string - initial active tabPanel's key if activeKey is absent
destroyInactiveTabPane boolean false whether destroy inactive TabPane when change tab
direction `'ltr' 'rlt'` 'ltr'
editable { onEdit(type: 'add' 'remove', info: { key, event }), showAdd: boolean, removeIcon: ReactNode, addIcon: ReactNode } -
locale { dropdownAriaLabel: string, removeAriaLabel: string, addAriaLabel: string } - Accessibility locale help text
moreIcon ReactNode - collapse icon
tabBarGutter number 0 config tab bar gutter
tabBarPosition `'left' 'right' 'top'
tabBarStyle style - tab nav style
tabBarExtraContent ReactNode | { left: ReactNode, right: ReactNode } - config extra content
renderTabBar (props, TabBarComponent) => ReactElement - How to render tab bar
prefixCls string 'rc-tabs' prefix class name, use to custom style
onChange (key) => void - called when tabPanel is changed
onTabClick (key) => void - called when tab click
onTabScroll ({ direction }) => void - called when tab scroll

TabPane

name type default description
key string - corresponding to activeKey, should be unique
forceRender boolean false forced render of content in tabs, not lazy render after clicking on tabs
tab ReactNode - current tab's title corresponding to current tabPane
closeIcon ReactNode - Config close icon

Development

npm install
npm start

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-tabs is released under the MIT license.

tabs's People

Contributors

afc163 avatar zombiej avatar yiminghe avatar paranoidjk avatar picodoth avatar yesmeck avatar jljsj33 avatar benjycui avatar rinick avatar dependabot-preview[bot] avatar heskeybaozi avatar alexkb0009 avatar valleykid avatar silentcloud avatar yoyo837 avatar orzyyyy avatar gyh9457 avatar chilijung avatar saeedrahimi avatar kerm1it avatar abramo-bagnara avatar raohai avatar wmertens avatar ajuner avatar dependabot-support avatar dxq613 avatar filipjnc avatar jesse3mh9a avatar limerickgds avatar lixiaoyang1992 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.