Как изменить CSS или класс элемента "body" в Blazor - PullRequest
Новая
       66

Как изменить CSS или класс элемента "body" в Blazor

1 голос
/ 07 мая 2020

Я сейчас делаю кнопку «Изменить тему», чтобы можно было переключать всю страницу между «Темным режимом» и «Светлым режимом». Но я не могу найти способ изменить цвет фона всей страницы.

По сути, мне нужно изменить стиль <body> (это единственный способ, который я могу придумать). Я думаю, что когда вы нажимаете кнопку «Изменить тему», элемент <body> будет добавлен к классу «темная тема». А затем я просто определяю «темную тему» ​​в CSS следующим образом: 

body {
    background-color: #FFFFFF;
    color: #000000;
}

    body.dark-theme {
        background-color: #5A5A5A;
        color: #F2F2F2;
    }

Я думаю, что это имеет смысл, но, как вы можете видеть ниже, я не могу получить доступ к элементу <body>, поэтому есть у меня нет возможности добавить класс или изменить CSS его.

MainLayout.razor 

@inherits LayoutComponentBase
@using System.Web;
<div class="sidebar">
    <NavMenu />
</div>

<div>
    <LoginDisplay />
    <button id="change-theme-btn" @onclick="ThemeChanged">Change Theme</button>
    @Body
</div>

@code {
    bool isDark = false;
    private void ThemeChanged()
    {
        isDark = !isDark;
    }
}

Итак, как мне изменить класс или CSS из <body> элемент? Или, если у вас есть альтернативное решение, сообщите мне. Спасибо!

Ответы [ 3 ]

0 голосов
/ 08 мая 2020

Или, если вам нужен чистый код C# без блейзера: 

public string BackgroundImage { get; set; }

<style>
    body 
    {
        background-image: url(@BackgroundImage);
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: darkgray;
        overflow: hidden;
    }
</style>

Или я использую пакет Nuget BlazorStyled:

https://github.com/chanan/BlazorStyled

А вот образец: 

<Styled @bind-Classname="CanvasStyle">
    position: fixed;
    top: 18vh;
    left: 5%;
    width: 60%;
    height: 64vh;    
</Styled>

<div class=@CanvasStyle></div>

А вот видео, которое я сделал для BlazorStyled, если вы хотите посмотреть:

https://youtu.be/frtetHgfdIo

0 голосов
/ 24 августа 2020

Blazor должен иметь простой способ сделать это, но на данный момент его нет. Надеюсь, когда-нибудь это произойдет.

Я сделал компонент для решения этой проблемы. Он позволяет вам установить CSS класс элемента тела страницы из страницы или компонента. Вы также можете установить атрибут lang и атрибут dir, чтобы установить язык и направление текста на странице. Это были все атрибуты, которые, как я думал, вы, возможно, захотите изменить, но вы можете добавить больше, если вам нужно.

Вы можете загрузить код здесь: https://github.com/BenjaminCharlton/BlazorBody

Или вот краткое описание того, как это сделать:

  1. Создайте небольшой JavaScript файл для управления элементом тела в scripts / BodyElement. js

    var getBodyElement = function() {
        return document.getElementsByTagName("body")[0];
    }
    
    var addCssClassToBody = function (cssClass) {
        var body = getBodyElement();
    
        if (!body.classList.contains(cssClass)) {
            body.classList.add(cssClass);
        }
    }
    
    
    var setLanguageOfBody = function (language) {
        var body = getBodyElement();
        body.lang = language;
    }
    
    var setTextDirectionOfBody = function (direction) {
        var body = getBodyElement();
        body.dir = direction;
    }
Разместите ссылку на свой JavaScript в разделе индекса. html 

<script src="/script/bodyelement.js"></script>
Сделайте небольшой класс CSS, чтобы проверить результат. 

    body {
        background: white;
        color: black;
    }
    
    body.danger {
        background: red;
        color: white;
    }
Создайте компонент бритвы BodyElement, который вы можете разместить на любой странице со свойствами, которые вы можете установить на этой странице. 

@inject IJSRuntime JSRuntime
@code {
    protected async override Task OnParametersSetAsync()
    {
        if (CssClass is { })
            await JSRuntime.InvokeVoidAsync("addCssClassToBody", CssClass);

        if (Language is { })
            await JSRuntime.InvokeVoidAsync("setLanguageOfBody", Language);

        if (TextDirection is { })
            await JSRuntime.InvokeVoidAsync("setTextDirectionOfBody", TextDirection);
    }

    [Parameter]
    public string? CssClass { get; set; } = null;

    [Parameter]
    public string? Language { get; set; } = null;

    [Parameter]
    public string? TextDirection { get; set; } = null;
}
Разместите компонент бритвы BodyElement на любой странице, где вы sh, чтобы управлять тегом и устанавливать свойства 

    @page "/danger"
        <BodyElement CssClass="danger" />
0 голосов
/ 07 мая 2020

Просто введите IJSRuntime и используйте его для вызова функции JavaScript, чтобы внести это изменение.

В вашем компоненте: 

[Inject]
IJSRuntime JSRuntime { get; set; }

Затем: 

private async Task ThemeChanged()
{
    isDark = !isDark;
    await JSRuntime.InvokeVoidAsync("MyInterop.ChangeTheme", isDark);
}

В вашем JS: 

window.MyInterop = (function () {
    const _changeTheme = function (isDark) {
        if (isDark)
            document.body.classList.add('dark-theme');
        else
            document.body.classList.remove('dark-theme');
    };

    return {
        ChangeTheme: _changeTheme
    };
})();

Если вы еще этого не сделали, укажите ссылку на свой JS файл в _Host.cshtml после строки для добавления среды выполнения Blazor.

...