!3551 feat(#I627UW): add FileIcon component

* chore: bump version 7.0.4 * test: 增加 FileIcon 单元测试 * doc: 增加本地化设置 * doc: 更新示例 * chore: 更新组件参数说明 * chore: 更改组件名为 FileIcon * doc: 增加文件图标菜单 * doc: 更新自定义样式 * chore: 样式参数化 * refactor: 更新样式 * doc: 更新示例 * style: 增加样式 * feat: 增加 Icon 图标组件
2024-12-08 15:09:51 +08:00 · 2022-11-21 07:07:22 +00:00 · 2022-11-21 07:07:22 +00:00 · 75aaaccf36
commit 75aaaccf36
parent 1a79ac519a
13 changed files with 333 additions and 2 deletions
--- a/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs
+++ b/src/BootstrapBlazor.Shared/Extensions/MenusLocalizerExtensions.cs
@ -463,6 +463,12 @@ internal static class MenusLocalizerExtensions
                    Url = "empties"
                },
                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["FileIcon"],
+                    Url = "fileicons"
+                },
+                new()
                {
                    Text = Localizer["Geolocation"],
                    Url = "geolocations"
--- a/src/BootstrapBlazor.Shared/Locales/en.json
+++ b/src/BootstrapBlazor.Shared/Locales/en.json
@ -4291,6 +4291,7 @@
    "ListView": "ListView",
    "Locator": "Locator",
    "ImageViewer": "ImageViewer",
+    "FileIcon": "FileIcon",
    "Popover": "Popover",
    "Print": "Print",
    "QRCode": "QRCode",
@ -5319,5 +5320,20 @@
    "Tips": "If the performance is not normal, you can add this css to debug",
    "P5": "<code> .kioskboard-body-padding { padding-top: unset !important;} </code>",
    "P6": "Basic"
+  },
+  "BootstrapBlazor.Shared.Samples.FileIcons": {
+    "Title": "File Icon",
+    "Intro": "The icon show the file extension",
+    "BaseUsageTitle": "Base Usage",
+    "BaseUsageIntro": "Set the <code>Extension</code> parameter for the file type",
+    "ColorTitle": "Color",
+    "ColorIntro": "Set <code>IconColor</code> for the file extension badge background color",
+    "BackgroundTemplateTitle": "Background Template",
+    "BackgroundTemplateIntro": "Set <code>BackgroundTemplate</code> custom the file icon",
+    "CustomCssTitle": "Custom css",
+    "CustomCssIntro": "Set <code>class</code> parameter set the style for the file icon component",
+    "ExtensionAttr": "The extension of file",
+    "IconColorAttr": "The backgound color for badge of extension",
+    "BackgroundTemplateAttr": "The template for custom the backgroup file"
  }
 }
--- a/src/BootstrapBlazor.Shared/Locales/zh.json
+++ b/src/BootstrapBlazor.Shared/Locales/zh.json
@ -4291,6 +4291,7 @@
    "ListView": "列表组件 ListView",
    "Locator": "位置定位 Locator",
    "ImageViewer": "图片 ImageViewer",
+    "FileIcon": "文件图标 FileIcon",
    "Popover": "弹出窗 Popover",
    "Print": "打印组件 Print",
    "QRCode": "二维码 QRCode",
@ -5324,5 +5325,20 @@
    "Tips": "如果表现不正常,可以加上这句 css 调试看看",
    "P5": "<code> .kioskboard-body-padding { padding-top: unset !important;} </code>",
    "P6": "基础用法"
+  },
+  "BootstrapBlazor.Shared.Samples.FileIcons": {
+    "Title": "File Icon 文件图标",
+    "Intro": "通过文件扩展名自定义显示图标",
+    "BaseUsageTitle": "基本用法",
+    "BaseUsageIntro": "通过设置 <code>Type</code> 设置图标扩展名",
+    "ColorTitle": "颜色",
+    "ColorIntro": "通过设置 <code>IconColor</code> 设置图标颜色",
+    "BackgroundTemplateTitle": "自定义背景图",
+    "BackgroundTemplateIntro": "通过设置 <code>BackgroundTemplate</code> 通过模板自定义背景模板",
+    "CustomCssTitle": "自定义样式",
+    "CustomCssIntro": "通过设置 <code>class</code> 自定义样式调整图标大小",
+    "ExtensionAttr": "文件扩展名",
+    "IconColorAttr": "扩展名标签背景色",
+    "BackgroundTemplateAttr": "自定义背景图模板"
  }
 }
--- a/src/BootstrapBlazor.Shared/Samples/FileIcons.razor
+++ b/src/BootstrapBlazor.Shared/Samples/FileIcons.razor
@ -0,0 +1,121 @@
+@page "/fileicons"
+
+<h3>@Localizer["Title"]</h3>
+<h4>@Localizer["Intro"]</h4>
+
+<DemoBlock Title="@Localizer["BaseUsageTitle"]" Introduction="@Localizer["BaseUsageIntro"]" Name="Normal">
+    <div class="row row-cols-4 g-2">
+        <div class="col">
+            <FileIcon Extension=".xlsx" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".docx" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".pptx" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".pdf" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".mp4" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".png" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".jpeg" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".cs" />
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="IconColor">
+    <div class="row row-cols-4 g-2">
+        <div class="col">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".docx" IconColor="Color.Primary" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".pptx" IconColor="Color.Danger" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".pdf" IconColor="Color.Warning" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".mp4" IconColor="Color.Info" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".png" IconColor="Color.Secondary" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".jpeg" IconColor="Color.Dark" />
+        </div>
+        <div class="col">
+            <FileIcon Extension=".cs" IconColor="Color.Light" />
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["BackgroundTemplateTitle"]" Introduction="@Localizer["BackgroundTemplateIntro"]" Name="BackgroundTemplate">
+    <div class="row row-cols-4 g-2">
+        <div class="col">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success">
+                <BackgroundTemplate>
+                    <i class="fa-regular fa-clipboard fa-4x" />
+                </BackgroundTemplate>
+            </FileIcon>
+        </div>
+    </div>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["CustomCssTitle"]" Introduction="@Localizer["CustomCssIntro"]" Name="CustomClass">
+    <div class="row row-cols-4 g-2">
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".xlsx" IconColor="Color.Success" />
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".docx" IconColor="Color.Primary" />
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".pptx" IconColor="Color.Danger" />
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".pdf" IconColor="Color.Warning" />
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".mp4" IconColor="Color.Info">
+                <BackgroundTemplate>
+                    <i class="fa-regular fa-clipboard fa-4x" />
+                </BackgroundTemplate>
+            </FileIcon>
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".png" IconColor="Color.Secondary">
+                <BackgroundTemplate>
+                    <i class="fa-regular fa-clipboard fa-4x" />
+                </BackgroundTemplate>
+            </FileIcon>
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".jpeg" IconColor="Color.Dark">
+                <BackgroundTemplate>
+                    <i class="fa-regular fa-clipboard fa-4x" />
+                </BackgroundTemplate>
+            </FileIcon>
+        </div>
+        <div class="col">
+            <FileIcon class="custom-icon" Extension=".cs" IconColor="Color.Light">
+                <BackgroundTemplate>
+                    <i class="fa-regular fa-clipboard fa-4x" />
+                </BackgroundTemplate>
+            </FileIcon>
+        </div>
+    </div>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />
--- a/src/BootstrapBlazor.Shared/Samples/FileIcons.razor.cs
+++ b/src/BootstrapBlazor.Shared/Samples/FileIcons.razor.cs
@ -0,0 +1,40 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Shared.Samples;
+
+/// <summary>
+/// 图标库
+/// </summary>
+public partial class FileIcons
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<FileIcons>? Localizer { get; set; }
+
+    private IEnumerable<AttributeItem> GetAttributes() => new[]
+    {
+        new AttributeItem() {
+            Name = nameof(FileIcon.Extension),
+            Description = Localizer["ExtensionAttr"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = nameof(FileIcon.IconColor),
+            Description = Localizer["IconColorAttr"].Value,
+            Type = "Color",
+            ValueList = " — ",
+            DefaultValue = "Primary"
+        },
+        new AttributeItem() {
+            Name = nameof(FileIcon.BackgroundTemplate),
+            Description = Localizer["BackgroundTemplateAttr"].Value,
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    };
+}
--- a/src/BootstrapBlazor.Shared/Samples/FileIcons.razor.css
+++ b/src/BootstrapBlazor.Shared/Samples/FileIcons.razor.css
@ -0,0 +1,9 @@
+::deep .custom-icon .icon-svg {
+    --bb-icon-width: 56px;
+    --bb-icon-badge-bottom: 10px;
+    --bb-icon-path-fill-color: var(--bs-purple);
+}
+
+::deep .custom-icon .fa-clipboard {
+    color: var(--bs-indigo);
+}
--- a/src/BootstrapBlazor.Shared/docs.json
+++ b/src/BootstrapBlazor.Shared/docs.json
@ -21,6 +21,7 @@
    "dropdownwidgets": "DropdownWidgets",
    "fullscreens": "FullScreens",
    "floatinglabels": "FloatingLabels",
+    "fileicons": "FileIcons",
    "detail": "Table/TablesDetailRow",
    "dialog": "Table/TablesDialog",
    "dynamic": "Table/TablesDynamic",
--- a/src/BootstrapBlazor/BootstrapBlazor.csproj
+++ b/src/BootstrapBlazor/BootstrapBlazor.csproj
@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
-    <Version>7.0.4-beta03</Version>
+    <Version>7.0.4</Version>
  </PropertyGroup>

  <ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">
--- a/src/BootstrapBlazor/Components/FileIcon/FileIcon.css
+++ b/src/BootstrapBlazor/Components/FileIcon/FileIcon.css
@ -0,0 +1,25 @@
+.file-icon {
+    --bb-icon-width: 42px;
+    --bb-icon-height: auto;
+    --bb-icon-padding-left: .5rem;
+    --bb-icon-badge-bottom: 7px;
+    --bb-icon-path-fill-color: #495057;
+    padding-left: var(--bb-icon-padding-left);
+    display: inline-block;
+    position: relative;
+}
+
+    .file-icon .icon-svg {
+        width: var(--bb-icon-width);
+        height: var(--bb-icon-height);
+    }
+
+        .file-icon .icon-svg path {
+            fill: var(--bb-icon-path-fill-color);
+        }
+
+    .file-icon .badge {
+        position: absolute;
+        bottom: var(--bb-icon-badge-bottom);
+        left: 0;
+    }
--- a/src/BootstrapBlazor/Components/FileIcon/FileIcon.razor
+++ b/src/BootstrapBlazor/Components/FileIcon/FileIcon.razor
@ -0,0 +1,16 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString">
+    @if (BackgroundTemplate == null)
+    {
+        <svg class="icon-svg" version="1.1" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
+            <path d="M34 42H8c-2.2 0-4-1.8-4-4V4c0-2.2 1.8-4 4-4h19l11 11v27c0 2.2-1.8 4-4 4zM27 4v7h7l-7-7zm7 10H24V4H8v34h26V14z" />
+        </svg>
+    }
+    else
+    {
+        @BackgroundTemplate
+    }
+    <span class="@IconClassString">@Extension</span>
+</div>
--- a/src/BootstrapBlazor/Components/FileIcon/FileIcon.razor.cs
+++ b/src/BootstrapBlazor/Components/FileIcon/FileIcon.razor.cs
@ -0,0 +1,40 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Icon 图标组件
+/// </summary>
+public partial class FileIcon
+{
+    private string? ClassString => CssBuilder.Default("file-icon")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    private string? IconClassString => CssBuilder.Default("badge")
+        .AddClass($"bg-{IconColor.ToDescriptionString()}", IconColor != Color.None)
+        .Build();
+
+    /// <summary>
+    /// 获得/设置 文件类型扩展名 
+    /// </summary>
+    [Parameter]
+#if NET6_0_OR_GREATER
+    [EditorRequired]
+#endif
+    public string? Extension { get; set; }
+
+    /// <summary>
+    /// 获得/设置 背景图模板 默认 null 使用内部内置的空文件 svg 图
+    /// </summary>
+    [Parameter]
+    public RenderFragment? BackgroundTemplate { get; set; }
+
+    /// <summary>
+    /// 获得/设置 图标类型背景色 默认 Color.Primary
+    /// </summary>
+    [Parameter]
+    public Color IconColor { get; set; } = Color.Primary;
+}
--- a/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
+++ b/src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css
--- a/test/UnitTest/Components/FileIconTest.cs
+++ b/test/UnitTest/Components/FileIconTest.cs
@ -0,0 +1,41 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace UnitTest.Components;
+
+public class FileIconTest : TestBase
+{
+    [Fact]
+    public void Extension_Ok()
+    {
+        var cut = Context.RenderComponent<FileIcon>(pb =>
+        {
+            pb.Add(a => a.Extension, ".xlsx");
+        });
+        cut.Contains("badge bg-primary");
+        cut.Contains(".xlsx");
+    }
+
+    [Fact]
+    public void IconColor_Ok()
+    {
+        var cut = Context.RenderComponent<FileIcon>(pb =>
+        {
+            pb.Add(a => a.Extension, ".xlsx");
+            pb.Add(a => a.IconColor, Color.Danger);
+        });
+        cut.Contains("badge bg-danger");
+    }
+
+    [Fact]
+    public void BackgroundTemplate_Ok()
+    {
+        var cut = Context.RenderComponent<FileIcon>(pb =>
+        {
+            pb.Add(a => a.Extension, ".xlsx");
+            pb.Add(a => a.BackgroundTemplate, context => context.AddContent(0, "test-content"));
+        });
+        cut.Contains("test-content");
+    }
+}