diff --git a/src/BootstrapBlazor/Components/Upload/CardUpload.razor b/src/BootstrapBlazor/Components/Upload/CardUpload.razor index 4975e8972d5..5cb3f09d14d 100644 --- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor @@ -1,4 +1,4 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @typeparam TValue @inherits FileListUploadBase @@ -29,7 +29,13 @@ } -
@item.GetFileName() (@item.Size.ToFileSizeString())
+
+ @item.GetFileName() + @if (ShowFileSize) + { + (@item.Size.ToFileSizeString()) + } +
@if (BeforeActionButtonTemplate != null) @@ -54,10 +60,10 @@ } - @if (ActionButtonTemplate != null) - { - @ActionButtonTemplate(item) - } + @if (ActionButtonTemplate != null) + { + @ActionButtonTemplate(item) + }
@if (ShowDeleteButton) { diff --git a/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs index 4260b8a80aa..a1f88f7cfe1 100644 --- a/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs @@ -1,4 +1,4 @@ -// Licensed to the .NET Foundation under one or more agreements. +// Licensed to the .NET Foundation under one or more agreements. // The .NET Foundation licenses this file to you under the Apache 2.0 License // See the LICENSE file in the project root for more information. // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone @@ -72,6 +72,12 @@ public partial class CardUpload [Parameter] public RenderFragment? ActionButtonTemplate { get; set; } + /// + /// 获得/设置 是否显示文件尺寸,默认为 true 显示 + /// + [Parameter] + public bool ShowFileSize { get; set; } = true; + /// /// 获得/设置 新建图标 /// diff --git a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss index 33efcd27f79..3d3cc8d19a7 100644 --- a/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss +++ b/src/BootstrapBlazor/Components/Upload/InputUpload.razor.scss @@ -1,4 +1,4 @@ -@use "../../wwwroot/scss/variables" as *; +@use "../../wwwroot/scss/variables" as *; .upload { --bb-upload-body-margin-top: #{$bb-upload-body-margin-top}; @@ -208,21 +208,22 @@ display: none; } -.upload .upload-body.is-card .upload-item-size { +.upload .upload-body.is-card .upload-item-file { margin: 1rem auto; - text-align: center; font-size: 0.625rem; display: flex; + flex-wrap: nowrap; justify-content: center; -} + align-items: center; -.upload .upload-body.is-card .upload-item-size span { - max-width: calc(100% - 4.5rem); - overflow: hidden; - text-overflow: ellipsis; - display: block; - white-space: nowrap; - padding-right: 0.25rem; + .upload-item-file-name { + max-width: calc(100% - 4.5rem); + overflow: hidden; + text-overflow: ellipsis; + display: block; + white-space: nowrap; + padding-right: 0.25rem; + } } .upload .upload-item .upload-item-label { diff --git a/test/UnitTest/Components/UploadCardTest.cs b/test/UnitTest/Components/UploadCardTest.cs index 21527218354..8b7cb5c303d 100644 --- a/test/UnitTest/Components/UploadCardTest.cs +++ b/test/UnitTest/Components/UploadCardTest.cs @@ -130,6 +130,26 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha cut.DoesNotContain("aria-label=\"delete\""); } + [Fact] + public void ShowFileSize_Ok() + { + var cut = Context.Render>(pb => + { + pb.Add(a => a.ShowFileSize, true); + pb.Add(a => a.DefaultFileList, + [ + new() { FileName = "Test-File1.text" }, + ]); + }); + cut.Contains("upload-item-file-size"); + + cut.Render(pb => + { + pb.Add(a => a.ShowFileSize, false); + }); + cut.DoesNotContain("upload-item-file-size"); + } + [Fact] public void CardUpload_ValidateForm_Ok() { @@ -157,7 +177,7 @@ public void AllowExtensions_Ok() new() { FileName = "test.dba" } ]); }); - cut.Contains("test.dba (0 B)"); + cut.Contains("test.dba"); cut.Render(pb => { @@ -166,7 +186,7 @@ public void AllowExtensions_Ok() new() { File = new MockBrowserFile("demo.dba") } ]); }); - cut.Contains("demo.dba (0 B)"); + cut.Contains("demo.dba"); } [Fact]