ASP.NET Blazor & FontAwesome

最新推荐文章于 2023-11-12 17:40:01 发布

寒冰屋

最新推荐文章于 2023-11-12 17:40:01 发布

阅读量311

点赞数

分类专栏： ASP.NET CORE 架构及框架文章标签： FontAwesome ASP.NET Blazor .NET 6.0 WebAssembly Blazor Server

原文链接：https://www.codeproject.com/Tips/5337785/ASP-NET-Blazor-FontAwesome

版权

ASP.NET CORE 同时被 2 个专栏收录

1060 篇文章 54 订阅

订阅专栏

架构及框架

612 篇文章 16 订阅

订阅专栏

2. 添加CSS和JavaScript引用

3. 导入命名空间

准备好了吗？

下载源代码 - 8.1 MB

介绍

免费FontAwesome 6 组件ASP.NET Blazor
带有Blazor WebAssembly或Blazor Server的.NET 6.0+（其他托管模型尚未测试，完全支持.NET 6.0）

使用代码

在Blazor 中使用FontAwesome框架有很多组件。我不会说这个组件是最好的、最快的或最简单的，但这是为方便在Blazor 中使用FontAwesome框架而创建的免费组件之一。

在此组件中，我克服了此FontAwesome框架中的主要问题，该问题通过向此组件添加'AutoReplaceSvg'属性来阻止Blazor程序员在同一程序中使用层、掩码和响应HTML标记事件。

Jenin.FontAwesome.Blazor/EventsOnClickSnippet.razor at master ·TarekNajem04/Jenin.FontAwesome.Blazor（github.com）

<IconContainer CssClass="mb-1 p-5" IconSize=IconSize.X02>
    <Icons>
        <Icon AutoReplaceSvg=ProcessingSvgMethod.False
              IconStyle=IconStyle.Solid
              IconName=@(IsChecked ? "fa-check-square" : "fa-square")
              Bordered=true
              BorderColor=@(IsChecked ? "green" : "red")
              BorderWidth="4px"
              Clicked=IconCliked
              @ref=Icon />
    </Icons>
</IconContainer>
 
@code {
    public Icon Icon { get; set; }
 
    int bw = 1;
 
    private bool IsChecked => bw % 2 == 0;
    private void IconCliked(ElementMouseEventArgs eventArgs) {
        bw++;
    }
}

除了易于设置FontAwesome框架以用HTML SVG替换包含图标类的HTML标签或将其作为保存HTML SVG的容器之外。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
 
<body>
    ...
 
    <!--
        By default Font Awesome will replace elements. 
        However, setting this value to nest will cause Font Awesome 
        to add a child element to the existing <i> tag.
    -->
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/fontawesome-Svg[nest]-config.js"
     type="text/javascript"></script>
 
    <!--OR -->
    <!--
        When false this will cause Font Awesome to use Webfont.
        When you set this property to false, 
        you will not be able to use the Layers feature.
        <script src="_content/Jeninnet.FontAwesome.Blazor/js/
         fontawesome-Svg[false]-config.js" type="text/javascript"></script>
    -->
 
    <script src="your-path-to-fontawesome/js/all.min.js" 
            type="text/javascript"></script>
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/
     fontawesome-config-utilities.js" type="text/javascript"></script>
</body>
 
</html>

您还可以轻松地将此元素与Bootstrap 框架结合使用，以使用您自己的图标创建HTML标记。

Bootstrap框架和Jenin.FontAwesome.Blazor

<button class="btn btn-outline-primary mb-4 ms-2 d-flex align-items-center gap-2" 
 @onclick=GotoStartPage>
    <Icon IconStyle=IconStyle.Solid IconSize=IconSize.X02 IconName="fa-bell" 
     Animation=@Animation.Shake() Color="gold" />
    <span>Are you ready?</span>
</button>
 
@code {
    [Inject]
    private NavigationManager NavigationManager { get; set; }
 
    private void GotoStartPage() => NavigationManager.NavigateTo("/icon-basics-style");
}

此组件不需要您费心使用它。对于每个功能，您将在github存储库中找到一个包含源代码的示例，以便您可以根据需要修改代码。

使用动画和转换的Fluent API

Jenin.FontAwesome.Blazor/AnimationWithUtilitiesSnippet.razor at master ·TarekNajem04/Jenin.FontAwesome.Blazor （github.com）

<IconContainer CssClass="mb-1 ps-4" FixedWidth=false IconSize=IconSize.X03>
    <Icons>
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-circle-plus"
              Animation=@Animation.Beat(delayUnit: DurationUnit.Seconds, delay: 5F)
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid 
              IconName="fa-triangle-exclamation"
              Animation=@Animation.Fade(iterationCount: 15F)
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-magnet"
              Animation=@Animation.Bounce(timingFunction: 
              "cubic-bezier(0.2, 3, 0.2, 2)") 
              Rotate=IconRotate.RotateBy RotateAngle=90F
              Color="#007AFF" />
 
        <Icon CssClass="me-4" IconStyle=IconStyle.Solid IconName="fa-sync"
              Animation=@Animation.Spin(delayUnit: DurationUnit.Seconds, 
              delay: 3F, direction: AnimationDirection.Reverse)
              Color="#007AFF" />
    </Icons>
</IconContainer>

Jenin.FontAwesome.Blazor/TransformsPositioningSnippet.razor at master ·TarekNajem04/Jenin.FontAwesome.Blazor （github.com）

变换结果

<IconContainer CssClass="mb-1 p-5" IconSize=IconSize.X04>
    <Icons>
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=Transform.Shrink(8) BackgroundColor="#8B9DC3" Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Up(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Right(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Down(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
        <Icon IconStyle=IconStyle.Solid IconName="fa-seedling" 
         Transform=@Transform.Shrink(8).Left(6) BackgroundColor="#8B9DC3" 
         Color="#007AFF" />
    </Icons>
</IconContainer>

安装指南

开始

先决条件

Jenin.FontAwesome.Blazor组件具有以下要求：

.NET 6.0或更高版本
Blazor WebAssembly或Blazor Server托管模型（其他选项尚未测试）

安装

1. 安装软件包

通过NuGet包管理器查找Jenin.FontAwesome.Blazorp包，或使用以下命令安装它：

dotnet add package Jenin.FontAwesome.Blazor

2. 添加CSS和JavaScript引用

A.CSS

将以下内容添加到您的HTML head部分，它是index.html，_Host.cshtml或 _Layout.cshtml，具体取决于您运行的是WebAssembly还是服务器：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <base href="~/" />        ...        <!--load all Font Awesome styles -->
        <link href="/your-path-to-fontawesome/css/all.css" 
         rel="stylesheet">        ...    </head>    <body>
        ...
    </body></html>

有关如何托管自己的更多详细信息——字体真棒托管 Host Yourself — Web Fonts

B. JavaScript

在index.html，_Host.cshtml或 _Layout.cshtml 的HTML<body>部分末尾，添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
</head><body>
    ...    <!--
        By default Font Awesome will replace elements. 
        However, setting this value to nest will cause Font Awesome 
        to add a child element to the existing <i> tag.
    -->
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/fontawesome-Svg[nest]-config.js"
     type="text/javascript"></script>    <!--OR -->
    <!--
        When false this will cause Font Awesome to use Webfont.
        When you set this property to false, you will not be able 
        to use the Layers feature.
        <script src="_content/Jeninnet.FontAwesome.Blazor/js/
         fontawesome-Svg[false]-config.js" type="text/javascript"></script>
    -->    <script src="your-path-to-fontawesome/js/all.min.js" 
            type="text/javascript"></script>
    <script src="_content/Jeninnet.FontAwesome.Blazor/js/
     fontawesome-config-utilities.js" type="text/javascript"></script>
</body>
</html>

3. 导入命名空间

将以下内容添加到您的_Imports.razor文件中：

@using Jenin.FontAwesome.Blazor;
@using Jenin.FontAwesome.Blazor.Extensions
@using Jenin.FontAwesome.Blazor.Components
@using Jenin.FontAwesome.Blazor.Transformations
@using Jenin.FontAwesome.Blazor.Animations

准备，设置，出发！

准备好了吗？

<button class="btn btn-outline-primary mb-4 ms-2 d-flex align-items-center gap-2" 
 @onclick=GotoStartPage>
    <Icon IconStyle=IconStyle.Solid IconSize=IconSize.X02 IconName="fa-bell" 
     Animation=@Animation.Shake() Color="gold"/>
    <span>Are you ready?</span>
</button>@code{
    [Inject]
    private NavigationManager NavigationManager{ get; set; }    
    private void GotoStartPage() => NavigationManager.NavigateTo("/icon-basics-style");
}

https://www.codeproject.com/Tips/5337785/ASP-NET-Blazor-FontAwesome

寒冰屋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET Blazor & FontAwesome

免费的FontAwesome 6组件，用于ASP.NET Blazor .NET 6.0+与Blazor WebAssembly或Blazor Server（其他托管模型尚未测试，完全支持.NET 6.0）
复制链接

扫一扫