update demo and readme

ant-design-blazor · May 12, 2023 · 676a1c5 · 676a1c5
1 parent 17ca9ed
commit 676a1c5
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 31 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -16,23 +16,23 @@ https://antblazor.com/demo-reuse-tabs/
 
 ## 前置条件
 
-先按照 Ant Design 的文档安装 AntDesign 组件 Nuget 包。
+先按照[ Ant Design 的文档 ](https://antblazor.com/docs/introduce)安装 AntDesign 组件 Nuget 包并在 IOC 容器注册依赖。
 
 ## 基础使用
 
 1. 首先，使用 `dotnet new` 命令创建一个 Blazor 项目。
 
-2. 修改项目中的 `App.razor` 文件，使用 `ReuseTabsRouteView` 替换 `RouteView`。
+2. 修改项目中的 `App.razor` 文件，使用 `<CascadingValue Value="routeData">` 包裹 `RouteView`。
 
    ```diff
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
-   -       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
-   +       <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-       </Found>
+   +       <CascadingValue Value="routeData">
+               <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+   +        </CascadingValue>
+      </Found>
        ...
    </Router>
-
    ```
 
 3. 修改 `MainLayout.razor` 文件, 增加 `ReuseTabs` 组件。注意 `@Body` 是不需要的。
@@ -70,15 +70,19 @@ https://antblazor.com/demo-reuse-tabs/
 - 如果需要使用模板来设置复杂的标题, 则需要页面组件实现 `IReuseTabsPage` 接口和 `GetPageTitle` 方法，就返回动态的标题了。
 
   ```diff
-  @page "/"
+  @page "/order/{OrderNo:int}"
   + @implements IReuseTabsPage
 
   <h1>Hello, world!</h1>
 
   @code{
+
+      [Parameter]
+      public int OrderNo { get; set; }
+
   +   public RenderFragment GetPageTitle() =>
   +       @<div>
-  +           <Icon Type="home"/> Home
+  +           <Icon Type="home"/> Order No. @OrderNo
   +       </div>
   +   ;
   }
@@ -96,7 +100,7 @@ ReuseTabs 可以集成 Blazor 的身份验证组件。
     $ dotnet add package AntDesign.Components.Authentication
     ```
 
-3. 把 `AuthorizeRouteView` 替换为 `AuthorizeReuseTabsRouteView`。
+3. 用 `<CascadingValue Value="routeData">` 包裹  `AuthorizeReuseTabsRouteView`。
 
     ```diff
     <CascadingAuthenticationState>
@@ -131,3 +135,26 @@ ReuseTabs 可以集成 Blazor 的身份验证组件。
 @page "/counter"
 + @attribute [ReuseTabsPage(Ignore = true)]
 ```
+
+更多配置请查看 API。
+
+## API
+
+### ReuseTabsPageAttribute 特性
+
+| 属性 | 描述 | 类型 | 默认值 | 
+| --- | --- | --- | --- |
+| Title | 消失在tab上的固定标题 | string | current path |
+| Ignore | 如果 `Ignore=true`, 页面将不会显示在tab中，而是跟原来一样在整个页面展示。 | boolean | false |
+| Closable | 是否显示关闭按钮并且不可被关闭。 | boolean | false |
+| Pin | 是否固定加载页面，并不可被关闭。一般用于主页或默认页。 | boolean | false |
+
+### ReuseTabsService 服务，在页面组件中注入使用。
+
+| 方法 | Description | 
+| --- | --- | 
+| ClosePage(string key) | 关闭指定key的页面，key 就是 url。 
+| CloseOther(string key) | 关闭除了指定key的页面，或者设置了 `Cloasable=false` 或 `Pin=true` 的页面。
+| CloseAll() | 关闭除了设置了 `Cloasable=false` 或者 `Pin=true` 的页面。  
+| CloseCurrent() | 关闭当前页面。 |
+| Update() | 更新 Tab 状态。当 `GetPageTitle()` 中引用的变量发生变化时，需要调用 `Update()` 来更新 tab 的显示。 | 
diff --git a/README.md b/README.md
@@ -16,23 +16,23 @@ https://antblazor.com/demo-reuse-tabs/
 
 ## Prerequisites
 
-Follow the installation steps of AntDesign and install the AntDesign dependencies.
+Follow the [installation steps of AntDesign](https://antblazor.com/docs/introduce) and install the AntDesign dependencies.
 
 ## Basic case
 
 1. First of all, create a blazor project using `dotnet new` command.
 
-2. Modify the `App.razor` file, replace the `RouteView` with `ReuseTabsRouteView`.
+2. Modify the `App.razor` file, warp the `RouteView` with `<CascadingValue Value="routeData">`.
 
    ```diff
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
-   -       <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
-   +       <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-       </Found>
+   +       <CascadingValue Value="routeData">
+               <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
+   +        </CascadingValue>
+      </Found>
        ...
    </Router>
-
    ```
 
 3. Then modify the `MainLayout.razor` file, add the `ReuseTabs` component. Note that `@Body` is not required at this case.
@@ -67,18 +67,22 @@ Follow the installation steps of AntDesign and install the AntDesign dependencie
   + @attribute [ReuseTabsPageTitle("Counter")]
   ```
 
-- If you want to use a template, then implement the `IReuseTabsPage` interface and implement the method
+- If you want to use a template or variables, then implement the `IReuseTabsPage` interface and implement the method
 
   ```diff
-  @page "/"
+  @page "/order/{OrderNo:int}"
   + @implements IReuseTabsPage
 
   <h1>Hello, world!</h1>
 
   @code{
+
+      [Parameter]
+      public int OrderNo { get; set; }
+
   +   public RenderFragment GetPageTitle() =>
   +       @<div>
-  +           <Icon Type="home"/> Home
+  +           <Icon Type="home"/> Order No. @OrderNo
   +       </div>
   +   ;
   }
@@ -96,16 +100,15 @@ ReuseTabs can be integrated with Blazor's Authentication component.
     $ dotnet add package AntDesign.Components.Authentication
     ```
 
-3. Replace `AuthorizeRouteView` with `AuthorizeReuseTabsRouteView`.
+3. Warp the `AuthorizeRouteView` with `<CascadingValue Value="routeData">`.
 
     ```diff
     <CascadingAuthenticationState>
         <Router AppAssembly="@typeof(Program).Assembly">
             <Found Context="routeData">
-    -            <AuthorizeRouteView RouteData="@routeData" 
-    DefaultLayout="@typeof(MainLayout)" />
-    +            <AuthorizeReuseTabsRouteVie
-    RouteData="@routeData"   DefaultLayout="@typeof(MainLayout)" />
+    +           <CascadingValue Value="routeData">
+                    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    +           </CascadingValue>
             </Found>
             <NotFound>
                 <LayoutView Layout="@typeof(MainLayout)">
@@ -118,7 +121,7 @@ ReuseTabs can be integrated with Blazor's Authentication component.
 
 The rest of the configuration is the same as the official documentation and ReuseTabs.
 
-## More options
+## More configurations
 
 You can set more options by using `ReuseTabsPage` attribute above pages.
 
@@ -133,3 +136,26 @@ If you want to ignore any pages, you can setting the `Ignore=true` in `ReuseTabs
 @page "/counter"
 + @attribute [ReuseTabsPage(Ignore = true)]
 ```
+
+See the API for more configurations.
+
+## API
+
+### ReuseTabsPageAttribute
+
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- |
+| Title | The fixed title show on tab. | string | current path |
+| Ignore | If `Ignore=true`, the page is not displayed in tab, but in the entire page. | boolean | false |
+| Closable | Whether the delete button can be displayed. | boolean | false |
+| Pin | Whether the page is fixed to load and avoid closing, usually used on the home page or default page. | boolean | false |
+
+### ReuseTabsService
+
+| Method | Description | Type | Default | 
+| --- | --- | --- | --- |
+| ClosePage(string key) | Close the page with the specified key. | string | current path |
+| CloseOther(string key) | Close all pages except those that specify key, `Cloasable=false`, or `Pin=true`. | boolean | false |
+| CloseAll() | Close all pages except those that `Cloasable=false` or `Pin=true`. | boolean | false |
+| CloseCurrent() | Close current page. | boolean | false |
+| Update() | Update the state of current tab. When the variable referenced in `GetPageTitle()` changes, `Update()` needs to be called to update the tab display. | boolean | false |
diff --git a/reuse-tabs.sln b/reuse-tabs.sln
@@ -8,6 +8,10 @@ EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AntDesign.TabView", "src\AntDesign.TabView\AntDesign.TabView.csproj", "{F3C68267-A66B-43F6-BEA2-22DF33F08790}"
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{A3658C20-CF70-43CA-AD06-F39BEACE405F}"
+	ProjectSection(SolutionItems) = preProject
+		README-zh_CN.md = README-zh_CN.md
+		README.md = README.md
+	EndProjectSection
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

diff --git a/src/AntDesign.TabView/AntDesign.TabView.csproj b/src/AntDesign.TabView/AntDesign.TabView.csproj
@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
 	<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="AntDesign" Version="0.10.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
+    <PackageReference Include="AntDesign" Version="0.14.4" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
   </ItemGroup>
 
 </Project>
diff --git a/src/AntDesign.TabView/App.razor b/src/AntDesign.TabView/App.razor
@@ -1,6 +1,8 @@
 <Router AppAssembly="@typeof(Program).Assembly">
     <Found Context="routeData">
-        <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <CascadingValue Value="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </CascadingValue>
     </Found>
     <NotFound>
         <LayoutView Layout="@typeof(MainLayout)">

diff --git a/src/AntDesign.TabView/Pages/Index.razor b/src/AntDesign.TabView/Pages/Index.razor
@@ -1,6 +1,8 @@
 @page "/"
+@page "/{OrderNo:int}"
 @implements IReuseTabsPage
 @attribute [ReuseTabsPage(Closable = false)]
+@inject ReuseTabsService tabService;
 
 <h1>Hello, world!</h1>
 
@@ -9,9 +11,12 @@ Welcome to your new app.
 <SurveyPrompt Title="How is Blazor working for you?" />
 
 @code {
+    [Parameter]
+    public int OrderNo { get; set; }
+
     public RenderFragment GetPageTitle() =>
     @<div>
-        <Icon Type="home" /> Home
-    </div>
+        <Icon Type="home" /> Order @OrderNo
+        </div>
     ;
 }
diff --git a/src/AntDesign.TabView/Shared/NavMenu.razor b/src/AntDesign.TabView/Shared/NavMenu.razor
@@ -12,6 +12,11 @@
                 <span class="oi oi-home" aria-hidden="true"></span> Home
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="/111" Match="NavLinkMatch.All">
+                <span class="oi oi-home" aria-hidden="true"></span> Order 111
+            </NavLink>
+        </li>
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
                 <span class="oi oi-plus" aria-hidden="true"></span> Counter