 |
 |
 |
 |
 |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
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,
);开发
yarn run start例子
测试
yarn run test
开源许可
xy-tabs is released under the MIT license.
