首页 > 编程语言 >BootstrapBlazor组件库,在你的Blazor应用程序中添加一个看板娘

BootstrapBlazor组件库,在你的Blazor应用程序中添加一个看板娘

时间:2023-07-11 20:46:30浏览次数:67  
标签:看板娘 应用程序 BootstrapBlazor 添加 组件 Blazor

BootstrapBlazor组件库,在你的Blazor应用程序中添加一个看板娘

效果如图
img

这里主要用到了BootstrapBlazor组件库的Live2D 插件,本插件基于pixi-live2d-display,并且支持所有版本的 Live2D 模型。

使用时只需要在nuget安装BootstrapBlazor.Live2DDisplay组件包,在MainLaout.razor中,添加以下代码,就可以全局生效了!

@inherits LayoutComponentBase

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
    <Live2DDisplay Source="https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json"
                   Scale="0.2" 
                   Position=LivePosition.BottomLeft 
                   BackgroundAlpha="false"/>
</div>

img

标签:看板娘,应用程序,BootstrapBlazor,添加,组件,Blazor
From: https://www.cnblogs.com/codecopier/p/17545870.html

相关文章

  • Blazor前后端框架Known-V1.2.3
    V1.2.3Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。Gitee:https://gitee.com/known/KnownGithub:https://github.com/known/Known概述基于C#和Blazor实现的快速开发框架,前后端分离,开箱即用。跨平台,单页应用,混合桌面应用,Web和桌面......
  • Blazor学习之旅(3)实现一个Todo应用
    最近在学习Blazor做全栈开发,因此根据老习惯,我会将我的学习过程记录下来,一来体系化整理,二来作为笔记供将来翻看。本篇,我们通过一个简单的Todo示例应用来介绍如何实现基础的数据绑定和事件。添加Todo组件在Pages目录下,新增一个Razor组件,命名:Todo.razor@page"/todo"<h3>Todo<......
  • Blazor学习之旅(2)第一个Blazor应用
    本篇我们来构建第一个BlazorWeb应用,这里我们选择BlazorServer类型,后面我们再学习BlazorWebAssembly类型。话外音:有人问我西门子在用Blazor吗?是的,西门子德国的两家数字化工厂都有在用Blazor开发Web应用,特别用到了MudBlazor这个UI组件库并封装一个完整的内部系统开发模板,值得关......
  • Blazor学习之旅(1)初步了解Blazor
    2022年9月以来在学习Blazor做全栈开发,因此根据老习惯,我会将我的学习过程记录下来,一来体系化整理,二来作为笔记供将来翻看。作为第一篇,我们先来了解一下这个Blazor到底是个什么鬼。什么是Blazor?Blazor是微软近年来主推的,基于C#、HTML与CSS来构建交互式WebUI的框架。 借助Blaz......
  • MAUI Blazor Android 输入框软键盘遮挡问题2.0
    前言关于MAUIBlazorAndroid输入框软键盘遮挡问题,之前的文章已经有了答案,MAUIBlazorAndroid输入框软键盘遮挡问题但是这个方案一直存在一点小的瑕疵在小窗模式下,界面的高度始终不正确所以本篇文章重点解决这个问题特别感谢这篇文章AndroidwebView输入框软键盘遮挡问题......
  • MAUI Blazor获取内存使用情况
    varrunTime=Java.Lang.Runtime.GetRuntime();varmaxMemory=runTime.MaxMemory();vartotalMemory=runTime.TotalMemory();varfreeMemory=runTime.FreeMemory();//获取可用内存ActivityManager.MemoryIn......
  • MongoDB从入门到实战之.NET Core使用MongoDB开发ToDoList系统(8)-Ant Design Blazor前端
    前言前面的章节我们介绍了一些值得推荐的BlazorUI组件库,通过该篇文章的组件库介绍最终我选用AntDesignBlazor这个UI框架作为ToDoList系统的前端框架。因为在之前的工作中有使用过AntDesignVue、AntDesignAngular习惯并且喜欢AntDesign设计规范和风格,废话不多说今天我......
  • 庆军之blazor动态组件的研究与总结
    只上代码:rootcontrol.ControlParams=newDictionary<string,object>();rootcontrol.ControlParams["a"]="ssss";rootcontrol.Children.Add(newMControlParam(){ControlType=typeof(Layout),......
  • 搞了个Blazor工具站,域名一次性买了10年!
    大家好,我是沙漠尽头的狼。在Dotnet9上线在线小工具和小游戏后,服务器的压力感觉挺大的,打开25个页面,内存占用170MB左右,CPU保持在60~70%,看来Server真不适合搞这类交互较多的程序(服务器配置:2核4G内存),所以站长加急上线BlazorWasm版本网站,便于大家直观对比了解两种模式的区别,下面......
  • 如何【一句话】取消Blazor Server烦人的重新连接?
    本篇文章是基于: 如何取消BlazorServer烦人的重新连接?的改进版 在_Host.cshtml的<body>里定义一下div1<style>#components-reconnect-modal{display:none;}</style><divid="components-reconnect-modal"></div>  原理,直接在css里将对应重新连接的div的dis......