BootstrapBlazor组件库,Marquee文字滚动组件

发布时间 2023-10-07 09:38:48作者: 代码搬运工lee

BootstrapBlazor组件库,Marquee 文字滚动组件

介绍

本Blazor组件依赖于BootstrapBlazor组件库。

使用该组件之前需要先安装BootstrapBlazor组件库。

可以通过nuget命令行安装

dotnet add package BootstrapBlazor --version 7.x

或者双击项目名称直接添加ItemGroup

<ItemGroup>
    <PackageReference Include="BootstrapBlazor" Version="7.x" />
</ItemGroup>

默认示例

Razor 代码

<Marquee Text="@Text" 
         Color="@TextColor" 
         BackgroundColor="@BackgroundColor"
         Duration="@Duration" 
         DirecTion="@Direction" 
         FontSize="@FontSize" />

@code{
    private string BackgroundColor { get; set; } = "#000000";

    private string TextColor { get; set; } = "#ff0000";

    private string Text { get; set; } = "BootstrapBlazor 组件库,基于 Bootstrap 样式库精心打造,为您快速开发项目带来飞一般的感觉";

    private int FontSize { get; set; } = 72;

    private int Duration { get; set; } = 20;

    private MarqueeDirection Direction { get; set; }
}