Skip to content

🚀 React hook used to convert Switch-like component to Tabs-like component state. 用于将类 Switch 组件转换为 Tabs 组件状态的 React hook。

License

Notifications You must be signed in to change notification settings

yunsii/use-switch-tabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 use-switch-tabs

use-switch-tabs

React hook used to convert Switch-like component to Tabs-like component state. 用于将类 Switch 组件转换为 Tabs 组件状态的 React hook。

  • 支持页面的嵌套路由渲染
  • 两种标签页模式可选
    • 基于路由,每个路由只渲染一个标签页
    • 基于路由参数,计算出每个路由的所有参数的哈希值,不同的哈希值渲染不同的标签页
  • 快捷操作
    • 刷新标签页 - actionRef.reloadTab()
    • 关闭标签页 - actionRef.closeTab()
    • 返回之前标签页 - actionRef.goBackTab()
    • 关闭并返回之前标签页 - actionRef.closeAndGoBackTab()
    • 获取 location 对应的 tabKey,如果没有入参,返回当前激活的 tabKey - actionRef.getTabKey()
    • 监听 activeKey 变化事件 - actionRef.listenActiveChange()
  • follow,路由定义中新增配置,默认打开方式是添加到所有标签页最后面,可通过配置该属性,使得一个标签页在 follow 指定的标签页后面打开
  • persistent,支持页面刷新之后恢复上次的标签页状态

注:返回默认只会返回上次的路由,所以如果上次的路由没有关闭,会在两个路由之前反复横跳,当删除上次打开的标签页之后再调用该返回方法时只会打印警告。

如何使用?

细节可参考 example 中的用法,也可参考 ant-design-pro-plus

About

🚀 React hook used to convert Switch-like component to Tabs-like component state. 用于将类 Switch 组件转换为 Tabs 组件状态的 React hook。

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published