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; }
}
组件效果
组件参数
参数名 | 类型 | 说明 | 默认值 |
---|---|---|---|
Text |
string? | 滚动文本 | null |
Color |
string? | 文本颜色 | #000 |
BackgroundColor |
string? | 背景颜色 | #fff |
Duration |
int | 持续时间(s) | 14 |
Direction |
enum | 滚动方向 | LeftToRight |
FontSize |
int | 字体大小(px) | 72 |