首页 > 其他分享 >如何将现有的`Blazor`项目的主题切换写的更好看?

如何将现有的`Blazor`项目的主题切换写的更好看?

时间:2023-08-28 14:15:50浏览次数:37  
标签:更好 clip -- args private 切换 var Blazor

如何将现有的Blazor项目的主题切换写的更好看?

在现有的系统当中,我们的主题切换会比较生硬,下面我们将基于Masa Blazor实现好看的扩散主题切换的样式效果。

安装MASA.Template

dotnet new install MASA.Template

创建Masa Blazor项目

打开vs2022

选择server app模板

打开wwwroot/css/site.css

添加一下代码,这个代码是核心样式实现。 animation: clip .5s ease-in;的.5s则是扩散时间。


::view-transition-old(root) {
    animation: none;
}
::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: clip .5s ease-in;
}

@keyframes clip {
    from {
        clip-path: circle(0% at var(--x) var(--y));
    }
    to{
        clip-path: circle(100% at var(--x) var(--y));
    }
}

打开Pages/_Host.cshtml

添加以下代码,请添加到body的内部的最尾部的位置。

    <script>
        window.switchTheme = function (dotNetHelper, x, y) {
            document.documentElement.style.setProperty('--x', x + 'px')
            document.documentElement.style.setProperty('--y', y + 'px')
            document.startViewTransition(() => {
                dotNetHelper.invokeMethodAsync('SwitchTheme');
            });
            
        }
    </script>

这个方法向window添加一个switchTheme的js方法,需要传递调用的实例,x,y则是扩散的开始位置,

然后会创建一个css的变量,这个变量对应到上面的clip里面的var(--x)和var(--y)

打开Shared\MainLayout.razor,修改成以下代码

@inherits LayoutComponentBase
@inject GlobalConfig GlobalConfig
@inject IJSRuntime JsRuntime
@inject MasaBlazor MasaBlazor

<MApp >
    <PPageTabsProvider>
        <CascadingValue Value="GlobalConfig.Culture.Name" Name="CultureName">
            <MAppBar  Elevation=0 App Height="100" Class="default-app-bar mx-6">
                 <div class="default-app-bar__actions @PageModeClass">
                     <Favorite />
                     <MSpacer />
                     <Search />
                     <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3">mdi-message-processing-outline</MIcon>
                     <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3" OnClick="() => _showSetting = true">mdi-cog-outline</MIcon>
                     <Language OnLanguageChanged="OnLanguageChanged" />
                     <MButton OnClick="ClickSwitchTheme">切换</MButton>
                     <Login />
                 </div>
                 <div class="default-app-bar__nav @PageModeClass">
                     @if (_pageTab == PageModes.PageTab)
                    {
                        <PageTabs @ref="_pageTabs" SelfPatterns="@s_selfPatterns" />
                    }
                    else
                    {
                        <Breadcrumb />
                    }
                </div>
            </MAppBar>

            <Navigation />

            <MMain Class="fill-lighten-1">
                <div class="pa-6">
                    @if (_pageTab == PageModes.PageTab)
                    {
                        <PPageContainer PageTabs="@_pageTabs?.PPageTabs" SelfPatterns="@s_selfPatterns">
                            @Body
                        </PPageContainer>
                    }
                    else
                    {
                        @Body
                    }
                </div>
            </MMain>
            <Settings @bind-PageModel="_pageTab" @bind-Show=_showSetting />
        </CascadingValue>
    </PPageTabsProvider>
</MApp>

@code {

    private DotNetObjectReference<MainLayout>? objRef;

    private bool dark = false;

    private static readonly string[] s_selfPatterns =
    {
        "/app/todo"
    };

    private bool? _showSetting;

    private string? _pageTab;

    private PageTabs? _pageTabs;

    private string PageModeClass => _pageTab == PageModes.PageTab ? "page-mode--tab" : "page-mode--breadcrumb";

    protected override void OnInitialized()
    {
        objRef = DotNetObjectReference.Create(this);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);

        if (firstRender)
        {
            await GlobalConfig.InitFromStorage();
        }
    }

    void OnLanguageChanged(CultureInfo culture)
    {
        GlobalConfig.Culture = culture;
    }

    private void ClickSwitchTheme(MouseEventArgs args)
    {
        _ = JsRuntime.InvokeVoidAsync("switchTheme", objRef, args.ClientX, args.ClientY);
    }

    [JSInvokable]
    public void SwitchTheme()
    {
        dark = !dark;
        MasaBlazor.ToggleTheme();
    }

}

在这里我们提供了SwitchTheme用于提供个js调用从而切换主题。

我们在原有的基础上添加了一个按钮,并且这个按钮点击会触发ClickSwitchTheme事件,然后通过JsRuntim调用js的方法,并且将当前实例传递到js,args.ClientX,args.ClientY则是点击的位置,我们会用点击的位置作为扩散的位置。

下面是运行效果,由于Masa Pro并没有适配暗夜效果,所以看的并不明显。如果你想看到更好的效果可以查看open666.cn

这是使用的简单Demo的效果。

技术交流群:

BlazorQQ群:452761192

来自token的分享。

标签:更好,clip,--,args,private,切换,var,Blazor
From: https://www.cnblogs.com/hejiale010426/p/17662123.html

相关文章

  • MAUI+Masa Blazor APP 各大商店新手发布指南(二)小米篇
    目录前言审核注意事项准备材料测试与审核总结前言先说一下我们上架厂家应用商店的原因:除了方便用户下载之外,需要厂家的离线推送和微信内容分享等都需要上架应用商店(微信分享不上架有调用次数限制)。如果你的App需要在国内使用离线推送功能,也就是App不启动的场景下接收消息推送,......
  • 深入理解操作系统中进程与线程的区别及切换机制(上)
    进程所谓进程,大家可以理解为我们打开的应用程序,如微信、QQ、游戏等,但也有系统应用是我们看不见的,可以打开任务管理器一探究竟,我们写的代码程序在服务器上在不运行的情况下,它就是一个二进制文件,并不是进程!一个进程可以包含一个或者多个线程,但对于CPU来说他就是一个任务而已;在......
  • tkinter窗口切换
    以下是使用tkinter实现窗口的创建、销毁和双向切换的示例代码: ```pythonimporttkinterastk classApp:  def__init__(self,root):    self.root=root    self.root.title("Tkinter窗口")    self.root.geometry("300x200")  ......
  • cpu-模拟进程上下文切换
    目录1、升级环境,安装stress-ng工具2、进程上下文切换-模拟场景3、进程上下文切换-top命令4、vmstat1命令-每隔1s显示一次数据5、pidstat-w3-找有问题的进程id6、总结7、分析过程-找到有问题的进程正文 1、升级环境,安装stress-ng工具#安装epel源,更新系统......
  • vue+element根据表单中选项切换,更改表单验证规则
    表单:<el-form-itemlabel="周期间隔(天)"prop="periodSpace"v-if="isServicePeriod"><el-inputv-model="form.periodSpace"type="number"placeholder="请输入周期间隔(天)"/></el-form-item>data:......
  • bh006- Blazor hybrid / Maui 使用NFC快速教程
    1.建立工程bh006_NFC_tag源码https://github.com/densen2014/BlazorHybrid/tree/master/bh100days/bh006_NFC_tag?WT.mc_id=DT-MVP-50050782.添加nuget包<PackageReferenceInclude="BlazorHybrid.Maui.Permissions"Version="0.0.3"/><Packag......
  • Bootstrap Blazor 实战动态表单组件
    1.新建工程源码新建工程b18ValidateForm,使用nuget.org进行BootstrapBlazor组件安装,Chart库,字体.将项目添加到解决方案中dotnetnewblazorserver-ob18ValidateFormdotnetaddb06chartpackageBootstrapBlazordotnetaddb06chartpackageBootstrapBlazor.Font......
  • 版本升级 | v1.0.13发布,传下去:更好用了
    新发行版来啦~本次更新主要聚焦兼容性的提升及结果报告格式的增加,另外对部分解析逻辑及使用体验进行了优化。在这里特别鸣谢大佬@Hugo-X在社区仓库提交的PR~后续,OpenSCA项目组会继续致力于完善本地能力闭环,覆盖更多场景。 v1.0.13更新内容本地漏洞库兼容多数据格式支......
  • 版本升级 | v1.0.13发布,传下去:更好用了
    新发行版来啦~本次更新主要聚焦兼容性的提升及结果报告格式的增加,另外对部分解析逻辑及使用体验进行了优化。在这里特别鸣谢大佬@Hugo-X在社区仓库提交的PR~后续,OpenSCA项目组会继续致力于完善本地能力闭环,覆盖更多场景。v1.0.13更新内容本地漏洞库兼容多数据格式支持SQLite、CSV格......
  • 切换Mac后maven项目无法启动报错
    `/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home/bin/java-agentlib:jdwp=transport=dt_socket,address=127.0.0.1:53666,suspend=y,server=n-XX:TieredStopAtLevel=1-noverify-Dspring.output.ansi.enabled=always-Dcom.sun.management.jmxremote-Dspri......