mirror of
https://gitee.com/blazorcomponent/MASA.Blazor.git
synced 2025-12-06 10:19:23 +08:00
🆕feat (PageStack): add badge functionality to PageStackTab (#2438)
* 🆕 (PageStack): add badge functionality to PageStackTab
* rename, update docs and apis
* update demo
This commit is contained in:
capdiem
@@ -20,12 +20,25 @@
|
||||
Language="html"
|
||||
Style="font-size: 10px">
|
||||
</MSyntaxHighlight>
|
||||
|
||||
<MDivider Class="my-2"/>
|
||||
|
||||
<MButton Outlined Class="text-capitalize" OnClick="@AddBadge">
|
||||
Add badge to Tab 3
|
||||
</MButton>
|
||||
@if (_badgeAdded > 0)
|
||||
{
|
||||
<div class="text--secondary">
|
||||
Try to click tab 3 or pull to refresh it to clear the badge.
|
||||
</div>
|
||||
}
|
||||
</MPullRefresh>
|
||||
|
||||
@code {
|
||||
|
||||
private readonly DateTimeOffset _pageCreatedAt = DateTimeOffset.UtcNow;
|
||||
private MPullRefresh? _pullToRefresh;
|
||||
private int _badgeAdded;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
@@ -59,6 +72,16 @@
|
||||
{
|
||||
// simulate a long-running task
|
||||
await Task.Delay(2000);
|
||||
|
||||
_badgeAdded = 0;
|
||||
NavController.RequestTabBadgeClear("/blazor/examples/page-stack/tab3");
|
||||
}
|
||||
|
||||
private void AddBadge()
|
||||
{
|
||||
_badgeAdded++;
|
||||
NavController.RequestTabBadgeUpdate(
|
||||
new PageStackTabBadgeUpdateRequestedEventArgs("/blazor/examples/page-stack/tab3", content: _badgeAdded));
|
||||
}
|
||||
|
||||
public void Dispose()
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
</MButton>
|
||||
</PPageStackTab>
|
||||
<PPageStackTab Href="/blazor/examples/page-stack/tab3">
|
||||
<MButton @attributes="@context.Attrs">Tab 3</MButton>
|
||||
<MButton @attributes="@context.Attrs">
|
||||
@context.GenBadgeContent("Tab 3")
|
||||
</MButton>
|
||||
</PPageStackTab>
|
||||
</MBottomNavigation>
|
||||
</MApp>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
{
|
||||
"events": {
|
||||
"PageClosed": "a event occurs when a stack page is closed",
|
||||
"TabChanged": "a event occurs when a tab is changed, it will not be triggered when a page is pushed or popped",
|
||||
"TabRefreshRequested": "a event occurs when a refresh is requested"
|
||||
"PageClosed": "an event occurs when a stack page is closed",
|
||||
"TabChanged": "an event occurs when a tab is changed, it will not be triggered when a page is pushed or popped",
|
||||
"TabRefreshRequested": "an event occurs when a refresh is requested",
|
||||
"RequestTabBadgeUpdate": "an event occurs when a tab badge update is requested",
|
||||
"RequestTabBadgeClear": "an event occurs when a tab badge clear is requested"
|
||||
},
|
||||
"methods": {
|
||||
"Push": "push a new page onto the page stack; the second parameter is optional and used to remove the top page of the stack",
|
||||
|
||||
@@ -2,7 +2,9 @@
|
||||
"events": {
|
||||
"PageClosed": "当堆栈页面关闭时触发",
|
||||
"TabChanged": "当选项卡更改时触发，页面入栈或出栈时不会触发",
|
||||
"TabRefreshRequested": "请求刷新事件"
|
||||
"TabRefreshRequested": "请求刷新事件",
|
||||
"RequestTabBadgeUpdate": "请求更新选项卡徽章",
|
||||
"RequestTabBadgeClear": "请求清除选项卡徽章"
|
||||
},
|
||||
"methods": {
|
||||
"Push": "将新页面推送到页面堆栈；第二个参数是可选的，用于删除栈顶的页面",
|
||||
|
||||
@@ -74,11 +74,13 @@ Used to control the navigation of the page stack.
|
||||
|
||||
#### Events
|
||||
|
||||
| Event name | Description | Usage scenario |
|
||||
|-----------------------|--------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|
|
||||
| `PageClosed` | Triggered when the stack page is closed. | - |
|
||||
| `TabChanged` | Triggered when the tab is switched, including system-level return. It will not be triggered when pushed or popped. | Reset some states of the old tab page when switching, such as popups. |
|
||||
| `TabRefreshRequested` | Tab refresh request. | Used with [Pull to refresh](/blazor/mobiles/pull-refresh) component. |
|
||||
| Event name | Description | Usage scenario |
|
||||
|-------------------------|--------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|
|
||||
| `PageClosed` | Triggered when the stack page is closed. | - |
|
||||
| `TabChanged` | Triggered when the tab is switched, including system-level return. It will not be triggered when pushed or popped. | Reset some states of the old tab page when switching, such as popups. |
|
||||
| `TabRefreshRequested` | Tab refresh request. | Used with [Pull to refresh](/blazor/mobiles/pull-refresh) component. |
|
||||
| `RequestTabBadgeUpdate` | Tab badge update request. | New message notification |
|
||||
| `RequestTabBadgeClear` | Tab badge clear request. | |
|
||||
|
||||
### data-page-stack-strategy(not recommended) {#data-page-stack-strategy}
|
||||
|
||||
|
||||
@@ -73,11 +73,15 @@ builder.Services
|
||||
|
||||
#### 事件 {#events}
|
||||
|
||||
| 事件名 | 说明 | 使用场景 |
|
||||
|-----------------------|-------------------------------|-----------------------------------------------|
|
||||
| `PageClosed` | 堆栈页面关闭时触发。 | - |
|
||||
| `TabChanged` | 选项卡切换时触发，包括系统级返回时。入栈或出栈时不会触发。 | 切换时重置旧tab页的某些状态，如弹窗。 |
|
||||
| 事件名 | 说明 | 使用场景 |
|
||||
|-----------------------|-------------------------------|-------------------------------------------|
|
||||
| `PageClosed` | 堆栈页面关闭时触发。 | - |
|
||||
| `TabChanged` | 选项卡切换时触发，包括系统级返回时。入栈或出栈时不会触发。 | 切换时重置旧tab页的某些状态，如弹窗。 |
|
||||
| `TabRefreshRequested` | 选项卡刷新请求。 | 配合[下拉刷新组件](/blazor/mobiles/pull-refresh)使用。 |
|
||||
| `RequestTabBadgeUpdate` | 选项卡徽章更新请求。 | 新消息通知 |
|
||||
| `RequestTabBadgeClear` | 选项卡徽章清除请求。 | |
|
||||
|
||||
```razor
|
||||
|
||||
### data-page-stack-strategy（不推荐） {#data-page-stack-strategy}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user