Security News
RubyGems.org Adds New Maintainer Role
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
The rc-tabs package is a React component for creating and managing tabs in a web application. It provides a set of features that allow developers to create customizable and accessible tab interfaces with ease.
Basic Tabs
This feature allows you to create basic tabbed interfaces. Each TabPane component represents a tab panel with its own content.
import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
const Demo = () => (
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
);
export default Demo;
Animated Tabs
This feature adds animations to the tab transitions, providing a more dynamic user experience.
import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';
const Demo = () => (
<Tabs defaultActiveKey="1" animated={{ inkBar: true, tabPane: true }}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
);
export default Demo;
Vertical Tabs
This feature allows you to create vertical tabs, with the tab list displayed on the side rather than the top.
import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';
const Demo = () => (
<Tabs defaultActiveKey="1" tabPosition="left">
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
);
export default Demo;
Customizable Tabs
This feature allows for customization of the tab bar, enabling the use of custom classes and styles.
import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import 'rc-tabs/assets/index.css';
const renderTabBar = (props, DefaultTabBar) => (
<DefaultTabBar {...props} className="my-custom-class" />
);
const Demo = () => (
<Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
<TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
</Tabs>
);
export default Demo;
react-tabs is a package that provides components for managing tabs in React. It is similar to rc-tabs but focuses on simplicity and accessibility, offering a more straightforward API with less customization options.
react-bootstrap-tabs is a component that integrates with the React-Bootstrap framework, providing tabs that are styled according to Bootstrap's design. It is suitable for those who are using Bootstrap for styling and want to maintain design consistency.
React Tabs component.
http://localhost:8000/examples
online example: https://tabs.react-component.now.sh/
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'),
);
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 |
name | type | default | description |
---|---|---|---|
destroyInactiveTabPane | boolean | false | whether destroy inactive TabPane when change tab |
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 |
npm install
npm start
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-tabs is released under the MIT license.
There are 3 cases when handling resposive tabs:
We get hidden tabs through useVisibleRange.ts.
If enconter the third case, in order to make tabs responsive, some tabs should be hidden.
So we minus addSize
when calculating basicSize
manully, even though there's no addNode in container.
In this way, case 3 turns to case 2, tabs become stable again.
FAQs
tabs ui component for react
The npm package rc-tabs receives a total of 884,472 weekly downloads. As such, rc-tabs popularity was classified as popular.
We found that rc-tabs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.