📝 docs(Pagination): add example for MiniVariant property (#2075)

* 📝 docs(Pagination): add example for MiniVariant property * build min css
masastack · Aug 5, 2024 · 6fc7bd2 · 6fc7bd2
1 parent 44e00f7
commit 6fc7bd2
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 18 deletions.
diff --git a/docs/Masa.Blazor.Docs/Examples/components/paginations/MiniVariant.razor b/docs/Masa.Blazor.Docs/Examples/components/paginations/MiniVariant.razor
@@ -0,0 +1,10 @@
+<div class="text-center">
+    <MPagination @bind-Value="_page"
+                 MiniVariant
+                 Length="6">
+    </MPagination>
+</div>
+
+@code{
+    private int _page = 1;
+}
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/apis/paginations/MPagination-en-US.json b/docs/Masa.Blazor.Docs/wwwroot/data/apis/paginations/MPagination-en-US.json
@@ -5,12 +5,15 @@
     "nextIcon": "Specify the icon to use for the next icon",
     "prevIcon": "Specify the icon to use for the prev icon",
     "totalVisible": "Specify the max total visible pagination numbers",
-    "value": "Current selected page"
+    "value": "Current selected page",
+    "miniVariant": "Use the mini variant",
+    "mobileBreakpoint": "Specify the breakpoint at which the mini variant should be applied, default is 600px"
   },
   "events": {
     "onInput": "The updated bound model",
     "onNext": "Emitted when going to next item",
-    "onPrevious": "Emitted when going to previous item"
+    "onPrevious": "Emitted when going to previous item",
+    "miniVariantChanged": "Emitted when the mini variant changes"
   },
   "contents": {}
 }
diff --git a/docs/Masa.Blazor.Docs/wwwroot/data/apis/paginations/MPagination-zh-CN.json b/docs/Masa.Blazor.Docs/wwwroot/data/apis/paginations/MPagination-zh-CN.json
@@ -5,12 +5,15 @@
     "nextIcon": "指定用于下一个图标的图标",
     "prevIcon": "指定用于上一个图标的图标",
     "totalVisible": "指定最大可见分页数",
-    "value": "当前选定页面"
+    "value": "当前选定页面",
+    "miniVariant": "使用迷你变体",
+    "mobileBreakpoint": "指定迷你变体应用时的断点，默认为 600px"
   },
   "events": {
     "onInput": "被绑定模型的更新",
     "onNext": "转到下一个项目时发出",
-    "onPrevious": "转到上一个项目时发出"
+    "onPrevious": "转到上一个项目时发出",
+    "miniVariantChanged": "当迷你变体更改时触发"
   },
   "contents": {}
 }
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/paginations/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/paginations/en-US.md
@@ -47,8 +47,14 @@ Use the `Length` property to set the length of **MPagination**. If the number of
 
 <masa-example file="Examples.components.paginations.Length"></masa-example>
 
+#### Mini variant {released-on=v1.7.0}
+
+By default, when the browser window is less than *600px*, the mini style is automatically used. Use the `MinVariant` property to set the mini style of the pagination.
+
+<masa-example file="Examples.components.paginations.MiniVariant"></masa-example>
+
 #### TotalVisible
 
 You can also manually set the maximum number of visible pages through the `TotalVisible` property.
 
-<masa-example file="Examples.components.paginations.TotalVisible"></masa-example>
+<masa-example file="Examples.components.paginations.TotalVisible"></masa-example>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/components/paginations/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/components/paginations/zh-CN.md
@@ -7,48 +7,54 @@ related:
   - /blazor/components/lists
 ---
 
-## 使用
+## 使用 {#usage}
 
 分页默认根据设置的 `Length` 属性显示页数，两边有 `Prev` 和 `Next` 按钮帮助导航。
 
 <masa-example file="Examples.components.paginations.Usage"></masa-example>
 
-## 示例
+## 示例 {#examples}
 
-### 属性
+### 属性 {#props}
 
-#### 圆形
+#### 圆形 {#circle}
 
 `Circle` 属性为你提供了分页按钮的另一种样式。
 
 <masa-example file="Examples.components.paginations.Circle"></masa-example>
 
-#### 禁用
+#### 禁用 {#disabled}
 
 使用 `Disabled` 属性，可以手动禁用分页。
 
 <masa-example file="Examples.components.paginations.Disabled"></masa-example>
 
-#### Href 格式 {released-on=v1.3.0}
+#### Href 格式 {#href-format released-on=v1.3.0}
 
 使用 `HrefFormat` 属性，可以自定义分页按钮的链接格式，这对 SEO 有帮助。
 
 <masa-example file="Examples.components.paginations.HrefFormat"></masa-example>
 
-#### 图标
+#### 图标 {#icon}
 
 上一页和下一页的图标可以通过 `PrevIcon` 和 `NextIcon` 属性自定义。
 
 <masa-example file="Examples.components.paginations.Icon"></masa-example>
 
-#### 长度
+#### 长度 {#length}
 
 使用 `Length` 属性可以设置 **MPagination** 的长度，如果页面按钮的数量超过了父容器，分页将被从中截断。
 
 <masa-example file="Examples.components.paginations.Length"></masa-example>
 
-#### 最大可见分页数
+#### 迷你 {#mini-variant released-on=v1.7.0}
+
+默认情况下，当浏览器窗口小于 *600px* 时，会自动使用迷你样式。你也可以使用 `MinVariant` 属性可以手动设置迷你样式。
+
+<masa-example file="Examples.components.paginations.MiniVariant"></masa-example>
+
+#### 最大可见分页数 {#totalvisible}
 
 你也可以通过 `TotalVisible` 属性手动设置最大可见分页数。
 
-<masa-example file="Examples.components.paginations.TotalVisible"></masa-example>
+<masa-example file="Examples.components.paginations.TotalVisible"></masa-example>
diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/en-US.md b/docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/en-US.md
@@ -1,5 +1,20 @@
 # Upgrade Guides
 
+## Upgrading form v1.6.x to v1.7.0
+
+### Components
+
+#### Pagination
+
+A mini style UI has been added, now when the browser window is less than *600px*, it will automatically use it. If you don't want to use the mini style, you can manually set it through the `MiniVariant` property.
+
+```diff
+  <MPagination @bind-Value="page"
+               Length="10"
++              MiniVariant="false"
+  ></MPagination>
+```
+
 ## Upgrading form v1.5.x to v1.6.0
 
 ### Change the script

diff --git a/docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/zh-CN.md b/docs/Masa.Blazor.Docs/wwwroot/pages/getting-started/upgrade-guide/zh-CN.md
@@ -1,5 +1,20 @@
 # 升级指南
 
+## 从 v1.6.x 升级到 v1.7.0 {#upgrading-from-v1-6-x-to-v1-7-0}
+
+### 组件 {#components}
+
+#### Pagination
+
+新增了一个迷你样式的UI，现在当浏览器窗口小于 *600px* 时，会自动使用。如果不想使用迷你样式，可以通过 `MiniVariant` 属性手动设置。
+
+```diff
+  <MPagination @bind-Value="page"
+               Length="10"
++              MiniVariant="false"              
+  ></MPagination>
+```
+
 ## 从 v1.5.x 升级到 v1.6.0
 
 ### 更改脚本

diff --git a/src/Masa.Blazor/Components/Pagination/MPagination.razor b/src/Masa.Blazor/Components/Pagination/MPagination.razor
@@ -4,15 +4,17 @@
 @inherits MasaComponentBase
 
 <CascadingValue Value="IsDark" Name="IsDark">
-    <nav id="@Id" @ref="Ref" class="@Class" style="@Style" @attributes="@Attributes">
+    <nav id="@Id" @ref="Ref" class="@Class" style="@Style"
+         role="navigation"
+         @attributes="@Attributes">
         <ul class="@_modifierBuilder.Add(Circle).Add(Disabled).AddTheme(IsDark, IndependentTheme)">
             @GenPaginationIcon(PaginationIconType.First)
 
             @if (_internalMiniVariant)
             {
                 <div class="m-pagination__mini">
                     <span class="m-pagination__current">@Value</span>
-                    <span class="m-pagination__separator">/</span>
+                    <span class="m-pagination__slash">/</span>
                     <span class="m-pagination__total">@Length</span>
                 </div>
             }

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.extend.css
@@ -1472,6 +1472,10 @@ a.m-pagination__item {
     text-align: center;
 }
 
+.m-pagination__slash {
+    margin: 0 8px;
+}
+
 /* InteractiveTrigger */
 
 .m-interactive-trigger {

diff --git a/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css b/src/Masa.Blazor/wwwroot/css/masa-blazor.min.css