如何在Blazor .NET 8的MudBlazor按钮中旋转图标？

这里有三种简单可行的方式来实现图标旋转：

方法1：自定义CSS类（推荐用于固定旋转角度的场景） #

先在组件的<style>区块或者全局样式文件中添加旋转样式：

/* 45度旋转类 */
.icon-rotate-45 {
    transform: rotate(45deg);
}

/* 90度旋转类 */
.icon-rotate-90 {
    transform: rotate(90deg);
}

然后给MudButton指定EndIconClass参数，应用对应的样式类：

<MudButton Color="Color.Info" 
           OnClick="@(e => { Share("G"); })" 
           EndIcon="@Icons.Material.Filled.IosShare"
           EndIconClass="icon-rotate-45">
    Share
</MudButton>

方法2：内联样式（快速实现单次旋转需求） #

直接通过EndIconStyle参数写内联CSS，无需额外定义样式类：

<MudButton Color="Color.Info" 
           OnClick="@(e => { Share("G"); })" 
           EndIcon="@Icons.Material.Filled.IosShare"
           EndIconStyle="transform: rotate(90deg);">
    Share
</MudButton>

方法3：动态控制旋转角度（适合需要切换状态的场景） #

如果需要根据交互或状态动态改变旋转角度，可以绑定变量实现：

1. 先在组件代码块中定义角度变量：

private int currentRotation = 0; // 初始角度为0，可按需修改

2. 修改按钮代码，动态绑定样式：

<MudButton Color="Color.Info" 
           OnClick="@(e => { 
               Share("G"); 
               // 点击切换45度/0度旋转
               currentRotation = currentRotation == 0 ? 45 : 0; 
           })" 
           EndIcon="@Icons.Material.Filled.IosShare"
           EndIconStyle="@($"transform: rotate({currentRotation}deg);")">
    Share
</MudButton>

额外提示 #

如果需要调整旋转的中心点，可以在样式中添加transform-origin属性，比如：

.icon-rotate-45 {
    transform: rotate(45deg);
    transform-origin: top right; /* 以右上角为旋转中心 */
}

内容的提问来源于stack exchange，提问作者Taimur Lak