如何将 MudAppBar 中的背景颜色更改为线性背景颜色以及如何在 MudAppBar 中居中 MudText

Question

如何将 MudAppBar 中的背景颜色更改为线性背景颜色 如何在 MudAppBar 中居中 MudText

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>

    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h4"  Class="ml-3">My Application</MudText>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Docked" Elevation="2">
        <NavMenu/>
    </MudDrawer>
    
    <MudMainContent>        
        <MudContainer MaxWidth="MaxWidth.ExtraLarge">
            @Body
        </MudContainer>
    </MudMainContent>

</MudLayout>
@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

如何将 MudAppBar 中的背景颜色更改为线性背景颜色 如何在 MudAppBar 中居中 MudText

Answer 1

MudText以为中心MudAppBar：

<div class="d-flex justify-center" style="width: 100vw;">
    <MudText Width Typo="Typo.h4" Class="ml-3">My Application</MudText>
</div>

要更改 的背景颜色MudAppBar：

<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider />
<MudSnackbarProvider />

@code {

    private MudTheme _currentTheme = new MudTheme()
    {
        Palette = new Palette
        {
            AppbarBackground = "#e43652",
        },
    };
}

在 MudBlazor 主题中更改为线性渐变背景MudAppBar不可用，相反，我们可以使用内联样式。有关此问题的更多信息，请访问 https://github.com/MudBlazor/MudBlazor/issues/4216#issuecomment-1075173555

<MudAppBar Elevation="1" Style="background-image: linear-gradient( 109.6deg,  rgba(0,182,255,1) 11.2%, rgba(102,51,153,1) 91.1% );">

示例代码：

@inherits LayoutComponentBase

<MudThemeProvider Theme="_currentTheme"/>
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    
    <MudAppBar Elevation="1" Style="background-image: linear-gradient( 109.6deg,  rgba(0,182,255,1) 11.2%, rgba(102,51,153,1) 91.1% );">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(e => DrawerToggle())"/>
        <div class="d-flex justify-center" style="width: 100vw;">
            <MudText Width Typo="Typo.h4" Class="ml-3">My Application</MudText>
        </div>
        <MudSpacer/>
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End"/>
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Docked" Elevation="2">
        <NavMenu/>
    </MudDrawer>

    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" class="mt-10 mb-10">
            @Body
        </MudContainer>
    </MudMainContent>

</MudLayout>

@code {

    private readonly MudTheme _currentTheme = new()
    {
    // Palette = new Palette
    // {
    //     AppbarBackground = "#e43652",
    // },
    };

    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

输出