ant design pro plus下載 - ant design pro plus原始碼下載

ant design pro plus

其他類別

1.0.0

下載

Ant Design Pro Plus

官方說明請參閱/master/README.zh-CN

Snapshot

基於路由的頁面標籤化展示

相容性： ^[email protected] | ^[email protected]

支援頁面的嵌套路由渲染
兩種標籤頁模式可選
- 基於路由，每個路由只渲染一個標籤頁
- 基於路由參數，計算出每個路由的所有參數的雜湊值，不同的雜湊值渲染不同的標籤頁
可固定標籤欄
快速操作
- 刷新標籤頁- window.tabsAction.reloadTab()
- 關閉標籤頁- window.tabsAction.closeTab()
- 返回之前標籤頁- window.tabsAction.goBackTab()
- 關閉並返回之前標籤頁- window.tabsAction.closeAndGoBackTab()
- 取得location 對應的tabKey，如果沒有入參，傳回目前啟動的tabKey - window.tabsAction.getTabKey()
- 監聽activeKey 變化事件- window.tabsAction.listenActiveChange()
reloadable ，支援在頭部操作欄刷新目前標籤頁
follow ，路由定義中新增配置，預設開啟方式是新增到所有標籤頁最後面，可透過配置該屬性，使得一個標籤頁在follow指定的標籤頁後面開啟（可參考查詢頁Demo）
persistent ，支援頁面刷新之後恢復上次的標籤頁狀態

注意：

返回預設只會返回上次的路由，所以如果上次的路由沒有關閉，會在兩個路由之前反覆橫跳，當刪除上次打開的標籤頁之後再調用該返回方法時只會打印警告
如需固定標籤頁頭部且渲染Footer 時，請使用SwitchTabsLayout 的footerRender 配置，而不是ProLayout 提供的footerRender，以確保元件能正常固定標籤頁頭部

程式碼結構

 ├── config
│   └── defaultSettings.ts    # 系统风格配置，新增关于 SwitchTabs 的配置
├── src
│   └── layouts
│       └── SwitchTabsLayout  # 路由加载
│   └── pages
│       └── SwitchTabsDemo    # 标签页功能展示

???

已發包use-switch-tabs，同時透過use-switch-tabs 進行了重構。 —— 2021.06.19

分支說明

`v4-legacy`

基於ant design pro V4 版本的功能分支。

`v2-legacy`

原倉庫名稱ant design pro v2 plus ，代號移到此分支。重新命名為ant design pro plus後，在master分支跟進ant design pro中的更新。

`umi/v2.x`

基於[email protected] 的功能實作。

Q & A

標籤頁功能從ant design pro V4 遷移到V5

Pro V5 在架構上有了較大的重構，透過Umi 的插件機制屏蔽了更多的實作細節。不過得益於先前已將標籤頁核心功能發包use-switch-tabs，故需要做得工作並不多。但值得注意的一點是需要@umijs/plugin-layout的版本不能低於0.18.0 ，詳見此討論，因此@umijs/preset-react版本不能低於1.8.28 ，詳見此更新。

最後，實現入口改到了app.ts，透過此入口可查看具體實現，相關UI 元件較於V4 基本上沒有改變。

補充說明：由於V5 開始使用了扁平化的路由，以及當前use-switch-tabs做了redirect 的適配，所以在使用頁面標籤化的功能的時候注意originalRoutes需要處理得當，避免isSwitchTab判斷異常。