Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

xy-tabs

1.3.0 • Public • Published
IE Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

NPM version node version npm download

xy-tabs

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

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-tabs is released under the MIT license.

Install

npm i xy-tabs

DownloadsWeekly Downloads

11

Version

1.3.0

License

MIT

Unpacked Size

48.3 kB

Total Files

42

Last publish

Collaborators

  • avatar