IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
xy-tabs
选项卡组件, 提供了低级的组件任意组合
安装
# yarn yarn add xy-tabs
使用例子
;;;// 加载样式;ReactDOM.render , 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 | 无 |
使用自定义渲染
;;;// 可选的加载样式; ; // ScrollableTabBar 自定义渲染tabbar组件, 封装了溢出tab显示左右箭头// SwipeableTabContent 自定义渲染tabcontent组件, 封装了切换动画 ReactDOM.render , container,;
开发
yarn run start
例子
测试
yarn run test
开源许可
xy-tabs is released under the MIT license.