经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » ASP.net » 查看文章
如何将现有的`Blazor`项目的主题切换写的更好看?
来源:cnblogs  作者:tokengo  时间:2023/8/29 8:48:11  对本文有异议

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

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

安装MASA.Template

  1. dotnet new install MASA.Template

创建Masa Blazor项目

打开vs2022

选择server app模板

打开wwwroot/css/site.css

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

  1. ::view-transition-old(root) {
  2. animation: none;
  3. }
  4. ::view-transition-new(root) {
  5. mix-blend-mode: normal;
  6. animation: clip .5s ease-in;
  7. }
  8. @keyframes clip {
  9. from {
  10. clip-path: circle(0% at var(--x) var(--y));
  11. }
  12. to{
  13. clip-path: circle(100% at var(--x) var(--y));
  14. }
  15. }

打开Pages/_Host.cshtml

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

  1. <script>
  2. window.switchTheme = function (dotNetHelper, x, y) {
  3. document.documentElement.style.setProperty('--x', x + 'px')
  4. document.documentElement.style.setProperty('--y', y + 'px')
  5. document.startViewTransition(() => {
  6. dotNetHelper.invokeMethodAsync('SwitchTheme');
  7. });
  8. }
  9. </script>

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

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

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

  1. @inherits LayoutComponentBase
  2. @inject GlobalConfig GlobalConfig
  3. @inject IJSRuntime JsRuntime
  4. @inject MasaBlazor MasaBlazor
  5. <MApp >
  6. <PPageTabsProvider>
  7. <CascadingValue Value="GlobalConfig.Culture.Name" Name="CultureName">
  8. <MAppBar Elevation=0 App Height="100" Class="default-app-bar mx-6">
  9. <div class="default-app-bar__actions @PageModeClass">
  10. <Favorite />
  11. <MSpacer />
  12. <Search />
  13. <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3">mdi-message-processing-outline</MIcon>
  14. <MIcon Size=20 Class="ml-5" Color="neutral-lighten-3" OnClick="() => _showSetting = true">mdi-cog-outline</MIcon>
  15. <Language OnLanguageChanged="OnLanguageChanged" />
  16. <MButton OnClick="ClickSwitchTheme">切换</MButton>
  17. <Login />
  18. </div>
  19. <div class="default-app-bar__nav @PageModeClass">
  20. @if (_pageTab == PageModes.PageTab)
  21. {
  22. <PageTabs @ref="_pageTabs" SelfPatterns="@s_selfPatterns" />
  23. }
  24. else
  25. {
  26. <Breadcrumb />
  27. }
  28. </div>
  29. </MAppBar>
  30. <Navigation />
  31. <MMain Class="fill-lighten-1">
  32. <div class="pa-6">
  33. @if (_pageTab == PageModes.PageTab)
  34. {
  35. <PPageContainer PageTabs="@_pageTabs?.PPageTabs" SelfPatterns="@s_selfPatterns">
  36. @Body
  37. </PPageContainer>
  38. }
  39. else
  40. {
  41. @Body
  42. }
  43. </div>
  44. </MMain>
  45. <Settings @bind-PageModel="_pageTab" @bind-Show=_showSetting />
  46. </CascadingValue>
  47. </PPageTabsProvider>
  48. </MApp>
  49. @code {
  50. private DotNetObjectReference<MainLayout>? objRef;
  51. private bool dark = false;
  52. private static readonly string[] s_selfPatterns =
  53. {
  54. "/app/todo"
  55. };
  56. private bool? _showSetting;
  57. private string? _pageTab;
  58. private PageTabs? _pageTabs;
  59. private string PageModeClass => _pageTab == PageModes.PageTab ? "page-mode--tab" : "page-mode--breadcrumb";
  60. protected override void OnInitialized()
  61. {
  62. objRef = DotNetObjectReference.Create(this);
  63. }
  64. protected override async Task OnAfterRenderAsync(bool firstRender)
  65. {
  66. await base.OnAfterRenderAsync(firstRender);
  67. if (firstRender)
  68. {
  69. await GlobalConfig.InitFromStorage();
  70. }
  71. }
  72. void OnLanguageChanged(CultureInfo culture)
  73. {
  74. GlobalConfig.Culture = culture;
  75. }
  76. private void ClickSwitchTheme(MouseEventArgs args)
  77. {
  78. _ = JsRuntime.InvokeVoidAsync("switchTheme", objRef, args.ClientX, args.ClientY);
  79. }
  80. [JSInvokable]
  81. public void SwitchTheme()
  82. {
  83. dark = !dark;
  84. MasaBlazor.ToggleTheme();
  85. }
  86. }

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

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

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

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

技术交流群:

BlazorQQ群:452761192

来自token的分享。

原文链接:https://www.cnblogs.com/hejiale010426/p/17662123.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号