From a9a099026173c5abbcabc7eb278f8b52b0c9650b Mon Sep 17 00:00:00 2001
From: Argo-Tianyi <argo@163.com>
Date: Tue, 17 Aug 2021 10:02:18 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20ShowCardView?=
 =?UTF-8?q?=20=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Components/Table/Table.razor              |  4 ++++
 .../Components/Table/Table.razor.Edit.cs      | 20 +++++++++++++++++++
 .../Table/Table.razor.Localization.cs         |  8 ++++++++
 .../Components/Table/Table.razor.Toolbar.cs   |  6 ++++++
 src/BootstrapBlazor/Locales/en.json           |  1 +
 src/BootstrapBlazor/Locales/zh.json           |  1 +
 6 files changed, 40 insertions(+)

diff --git a/src/BootstrapBlazor/Components/Table/Table.razor b/src/BootstrapBlazor/Components/Table/Table.razor
index 22d61ab31..6ce2fdf00 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor
+++ b/src/BootstrapBlazor/Components/Table/Table.razor
@@ -51,6 +51,10 @@
                     {
                         <Button Icon="fa fa-refresh" Text="@RefreshButtonText" Color="@Color.Secondary" OnClickWithoutRender="@OnClickRefreshAsync" />
                     }
+					@if(ShowCardView)
+					{
+                        <Button Icon="fa fa-bars" Text="@CardViewButtonText" Color="@Color.Secondary" OnClick="@OnClickCardView" />
+					}
                     @if (ShowColumnList)
                     {
                         <div class="btn-group btn-col" role="group">
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
index 7b024b5aa..4ef515a57 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Edit.cs
@@ -271,6 +271,26 @@ namespace BootstrapBlazor.Components
         /// <returns></returns>
         protected Task OnClickRefreshAsync() => QueryAsync();
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <returns></returns>
+        protected void OnClickCardView()
+        {
+            var model = RenderMode;
+            if (model == TableRenderMode.Auto)
+            {
+                model = ActiveRenderMode;
+            }
+            RenderMode = model switch
+            {
+                TableRenderMode.Table => TableRenderMode.CardView,
+                _ => TableRenderMode.Table
+            };
+
+            StateHasChanged();
+        }
+
         /// <summary>
         /// 查询按钮调用此方法
         /// </summary>
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
index ebd111fbd..c193a7fef 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Localization.cs
@@ -91,6 +91,13 @@ namespace BootstrapBlazor.Components
         [NotNull]
         public string? RefreshButtonText { get; set; }
 
+        /// <summary>
+        /// 视图按钮文本
+        /// </summary>
+        [Parameter]
+        [NotNull]
+        public string? CardViewButtonText { get; set; }
+
         /// <summary>
         /// 列显示隐藏按钮提示信息文本
         /// </summary>
@@ -269,6 +276,7 @@ namespace BootstrapBlazor.Components
             ConfirmDeleteButtonText ??= Localizer[nameof(ConfirmDeleteButtonText)];
             ConfirmDeleteContentText ??= Localizer[nameof(ConfirmDeleteContentText)];
             RefreshButtonText ??= Localizer[nameof(RefreshButtonText)];
+            CardViewButtonText ??= Localizer[nameof(CardViewButtonText)];
             ColumnButtonTitleText ??= Localizer[nameof(ColumnButtonTitleText)];
             ColumnButtonText ??= Localizer[nameof(ColumnButtonText)];
             ExportButtonText ??= Localizer[nameof(ExportButtonText)];
diff --git a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
index d328da4a2..2c552ed56 100644
--- a/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
+++ b/src/BootstrapBlazor/Components/Table/Table.razor.Toolbar.cs
@@ -94,6 +94,12 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public bool ShowRefresh { get; set; } = true;
 
+        /// <summary>
+        /// 获得/设置 是否显示视图按钮 默认为 false
+        /// </summary>
+        [Parameter]
+        public bool ShowCardView { get; set; }
+
         /// <summary>
         /// 获得/设置 是否显示列选择下拉框 默认为 false 不显示
         /// </summary>
diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json
index 5f77b0118..63c3a64af 100644
--- a/src/BootstrapBlazor/Locales/en.json
+++ b/src/BootstrapBlazor/Locales/en.json
@@ -194,6 +194,7 @@
     "ConfirmDeleteButtonText": "Delete",
     "ConfirmDeleteContentText": "Are you sure to DELETE all selected rows?",
     "RefreshButtonText": "Refresh",
+    "CardViewButtonText": "View",
     "ColumnButtonTitleText": "Show/Hide Columns",
     "ColumnButtonText": "Columns",
     "ExportButtonText": "Export",
diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json
index 4db4f00b2..4b12b5363 100644
--- a/src/BootstrapBlazor/Locales/zh.json
+++ b/src/BootstrapBlazor/Locales/zh.json
@@ -194,6 +194,7 @@
     "ConfirmDeleteButtonText": "删除",
     "ConfirmDeleteContentText": "确认要删除选中的所有行吗？",
     "RefreshButtonText": "刷新",
+    "CardViewButtonText": "视图",
     "ColumnButtonTitleText": "列显示隐藏控制",
     "ColumnButtonText": "列",
     "ExportButtonText": "导出数据",
-- 
Gitee


From 78fa6a50f7b292fd07775a39cb314a491d21a013 Mon Sep 17 00:00:00 2001
From: Argo-Tianyi <argo@163.com>
Date: Tue, 17 Aug 2021 10:02:31 +0800
Subject: [PATCH 2/2] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Pages/Samples/Table/TablesToolbar.razor                    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
index ee54f8d31..dfffd6fad 100644
--- a/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
+++ b/src/BootstrapBlazor.Shared/Pages/Samples/Table/TablesToolbar.razor
@@ -19,9 +19,10 @@
 </Block>
 
 <Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件">
+	<p>本例中通过设置 <code>ShowCardView</code> 显示 <b>视图</b> 按钮，用于切换 <code>Table</code> 组件渲染方式</p>
     <Table TItem="Foo"
            IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
-           ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
+           ShowToolbar="true" ShowSearch="true" ShowCardView="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
            OnQueryAsync="@OnSearchQueryAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" />
-- 
Gitee