mirror of
https://gitee.com/blazorcomponent/MASA.Blazor.git
synced 2025-12-06 10:19:23 +08:00
🆕 (PageTabs): add support for fixed tabs (#2437)
This commit is contained in:
capdiem
@@ -30,8 +30,8 @@
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
// use () => title if you want to update the title on every render
|
||||
// for example if you use the i18n.T function
|
||||
// use () => title if you want to update the title on every render,
|
||||
// for example, if you use the i18n.T function
|
||||
|
||||
PageTabsProvider?.UpdateTabTitle(NavigationManager.GetAbsolutePath(), Name);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,8 @@
|
||||
<PPageTabs @ref="_pageTabs"
|
||||
NoDataPath="@s_noDataPath"
|
||||
TabOptions="@TabOptions"
|
||||
SelfPatterns="@s_selfPatterns">
|
||||
SelfPatterns="@s_selfPatterns"
|
||||
FixedTabs="@_fixedTabs">
|
||||
</PPageTabs>
|
||||
</MAppBar>
|
||||
|
||||
@@ -45,11 +46,16 @@
|
||||
"/blazor/examples/page-tabs/page2"
|
||||
};
|
||||
|
||||
private string[] _fixedTabs =
|
||||
[
|
||||
"/blazor/examples/page-tabs/page1"
|
||||
];
|
||||
|
||||
private TabOptions? TabOptions(PageTabPathValue pathValue)
|
||||
{
|
||||
if (pathValue.AbsolutePath == "/blazor/examples/page-tabs/page2")
|
||||
{
|
||||
return new TabOptions("Custom tab title", "mdi-tab", "font-weight-bold", false);
|
||||
return new TabOptions("Custom title", "mdi-tab", "font-weight-bold", closeable: false);
|
||||
}
|
||||
|
||||
return null;
|
||||
|
||||
@@ -17,6 +17,7 @@ A set of visited tab components that can be switched to the corresponding page b
|
||||
|-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| `TabOptions` | Customize the title and icon of the tab. If you change the title through the `UpdateTabTitle` method provided by the **PPageTabsProvider** component, the title set by the `TabOptions` parameter will be overwritten. |
|
||||
| `SelfPatterns` | Used for fuzzy matching paths. All successful paths are displayed in the same tab. The behavior is similar to `_self` of the `href` attribute of the `<a></a>` tag. |
|
||||
| `FixedTabs` | A list of paths for fixed tabs. Fixed tabs cannot be closed. |
|
||||
| `OnClose` | Customize the behavior of closing the tab. Return `true` to close the tab and return `false` to not close the tab. |
|
||||
|
||||
> It needs to be used with the **PPageContainer** component.
|
||||
@@ -53,7 +54,7 @@ The specific source codes are listed below:
|
||||
Layout: demonstrate the use of **PPageTabs**, **PPageContainer** and **PPageTabsProvider** components, and how to
|
||||
use `TabOptions` to customize the title and icon of the tab.
|
||||
- [PageTabs1.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs1.razor)
|
||||
Page1: demonstrate the ability to save page state.
|
||||
Page1: demonstrate the ability to save page state and the function of fixed tabs.
|
||||
- [PageTabs2.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs2.razor)
|
||||
Page2: demonstrate that the state will not be cached after using the `ExcludedPatterns` property, and the function of not being able to close.
|
||||
- [PageTabs3.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs3.razor)
|
||||
|
||||
@@ -13,11 +13,12 @@ related:
|
||||
|
||||
一组访问过的标签页组件，可以通过点击标签页切换到对应的页面。
|
||||
|
||||
| 主要参数 | 说明 |
|
||||
|----------------|----------------------------------------------------------------------------------------------------------------------|
|
||||
| `TabOptions` | 可以通过 `TabOptions` 属性自定义标签页的标题和图标。如果通过 **PPageTabsProvider** 组件提供的 `UpdateTabTitle` 方法更改标题，将会覆盖 `TabOptions` 属性设置的标题。 |
|
||||
| 主要参数 | 说明 |
|
||||
|---------------|----------------------------------------------------------------------------------------------------------------------|
|
||||
| `TabOptions` | 可以通过 `TabOptions` 属性自定义标签页的标题和图标。如果通过 **PPageTabsProvider** 组件提供的 `UpdateTabTitle` 方法更改标题，将会覆盖 `TabOptions` 属性设置的标题。 |
|
||||
| `SelfPatterns` | 用于模糊匹配路径，所有匹配成功的路径都会显示在同一个标签页中。行为与`<a></a>`标签的 `href` 属性的 `_self` 类似。 |
|
||||
| `OnClose` | 自定义关闭标签页的行为。返回 `true` 表示关闭标签页，返回 `false` 表示不关闭标签页。 |
|
||||
| `FixedTabs` | 固定标签页的路径列表。固定标签页不会被关闭。 |
|
||||
| `OnClose` | 自定义关闭标签页的行为。返回 `true` 表示关闭标签页，返回 `false` 表示不关闭标签页。 |
|
||||
|
||||
> 需配合 **PPageContainer** 组件一起使用。
|
||||
|
||||
@@ -48,7 +49,7 @@ related:
|
||||
- [PageTabsLayout.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Shared/PageTabsLayout.razor)
|
||||
布局：演示使用 **PPageTabs**、**PPageContainer**和**PPageTabsProvider** 组件，以及如何使用 `TabOptions` 属性自定义标签页的标题和图标。
|
||||
- [PageTabs1.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs1.razor)
|
||||
Page1：演示保存页面状态的功能
|
||||
Page1：演示保存页面状态和固定标签页的功能
|
||||
- [PageTabs2.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs2.razor)
|
||||
Page2：演示使用`ExcludedPatterns`属性后不会缓存状态的功能，以及不可关闭的功能
|
||||
- [PageTabs3.razor](https://github.com/masastack/MASA.Blazor/blob/main/docs/Masa.Blazor.Docs/Pages/PageTabs3.razor)
|
||||
|
||||
Reference in New Issue
Block a user