Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
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
var Tabs = require('rc-tabs');
var TabPane = Tabs.TabPane;
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 | |
animation | String | tabPane's animation. current only support slide-horizontal in assets/index.css | |
defaultActiveKey | String | first active tabPanel's key | initial active tabPanel's key if activeKey is absent |
onChange | Function(key) | called when tabPanel is changed | |
onTabClick | Function(key) | called when tab is clicked |
name | type | default | description |
---|---|---|---|
key | Object | corresponding to activeKey | |
tab | String | current tab's title corresponding to current tabPane |
npm install
npm start
http://localhost:8000/examples
online example: http://react-component.github.io/tabs/examples/
http://localhost:8000/tests/runner.html?coverage
rc-tabs is released under the MIT license.
5.1.0 / 2015-06-10
change effect props to animation
FAQs
tabs ui component for react
The npm package rc-tabs receives a total of 1,220,610 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 0 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.