Xy-tabs NPM | npm.io


IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

NPM version npm download

xy-tabs

选项卡组件, 提供了低级的组件任意组合

安装

# yarn
yarn add xy-tabs

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { TabPanelNode, Tabs } from "xy-tabs";
// 加载样式
import "xy-tabs/assets/index.css";
ReactDOM.render(
    <Tabs defaultActiveKey="b">
        <TabPanelNode tab="tab 1" tabKey="a">
            first
        </TabPanelNode>
        <TabPanelNode tab="tab 2" tabKey="b">
            second
        </TabPanelNode>
        <TabPanelNode tab="tab 3" tabKey="c">
            third
        </TabPanelNode>
    </Tabs>,
    container,
);

API

Tabs

属性	说明	类型	默认值
children	TabPanels	React.ReactNode	无
activeKey	激活 key	string/number	无
defaultActiveKey	默认激活 key	string/number	无
lazy	是否延迟载入 content	boolean	无
reverse	是否翻转	boolean	无
destroyInactiveTabPane	不是激活的 content 是否不渲染在 dom 中	boolean	无
renderTabBar	渲染选项卡 tab	() => JSX.Element	无
renderTabContent	渲染选项卡内容	() => JSX.Element	无
onChange	激活改变事件	(activeKey: string/number) => void	无
onTabClick	tab 被点击事件	(activeKey: string/number, event?: any) => void	无

TabPanelNode

属性	说明	类型	默认值
active	是否激活样式	boolean	无
disabled	是否禁用	boolean	无
children	tab 内容	React.ReactNode	无
tab	选项卡 tab 内容	React.ReactNode	无
lazy	是否延迟载入 content	boolean	无
tabKey	选项卡 key	string/number	无
destroyInactiveTabPane	不是激活的 content 是否不渲染在 dom 中	boolean	无

使用自定义渲染

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import { Tabs, TabBarRoot, TabContentRoot, TabNode, TabPanelNode, TabsContext, ScrollableTabBar, SwipeableTabContent } from "xy-tabs";
// 可选的加载样式
import "xy-tabs/assets/index.css";

const scrollToRef = useRef<Function>();

// ScrollableTabBar 自定义渲染tabbar组件, 封装了溢出tab显示左右箭头
// SwipeableTabContent 自定义渲染tabcontent组件, 封装了切换动画

ReactDOM.render(
    <Tabs renderTabBar={() => <ScrollableTabBar />} renderTabContent={() => <SwipeableTabContent />}>
        <TabPanelNode tab="tab 1" tabKey="a">
            first
        </TabPanelNode>
        <TabPanelNode tab="tab 2" tabKey="b">
            second
        </TabPanelNode>
        <TabPanelNode tab="tab 3" tabKey="c">
            third
        </TabPanelNode>
    </Tabs>,
    container,
);