首页 > 其他分享 >BootstrapBlazor组件库,Marquee文字滚动组件

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

时间:2023-10-07 09:46:01浏览次数:34  
标签:set string get Marquee private BootstrapBlazor 组件

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; }
}

组件效果

img

组件参数

参数名 类型 说明 默认值
Text string? 滚动文本 null
Color string? 文本颜色 #000
BackgroundColor string? 背景颜色 #fff
Duration int 持续时间(s) 14
Direction enum 滚动方向 LeftToRight
FontSize int 字体大小(px) 72

标签:set,string,get,Marquee,private,BootstrapBlazor,组件
From: https://www.cnblogs.com/codecopier/p/17745556.html

相关文章

  • 安卓开发组件开发示例
    系统原生下拉刷新<androidx.swiperefreshlayout.widget.SwipeRefreshLayoutandroid:id="@+id/swipe_refresh_layout"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:android="http://sc......
  • Spring-Boot 整合 J2EE Web组件
    一,整合Servlet1,通过注解扫描完成Servlet组件的注册1.1编写servlet/***SpringBoot整合Servlet方式一**<servlet>*<servlet-name>FirstServlet</servlet-name>*<servlet-class>com.bjsxt.servlet.FirstServlet</servlet-class>*</servlet>**<servlet-......
  • 深入了解iPhone 15 Pro内部结构和技术组件338500537、TPS6565780、338500843、SN300
    TechInsights团队正在拆解iPhone15Pro,以揭示其中的创新,包括使用台积电3nm工艺的全新A17芯片,提供了深入了解iPhone15Pro内部结构和技术组件。NXPNFC控制器安全元件SN300:(SN300VUK)Apple/Cirrus逻辑音频放大器338500537TiAMOLED显示器电源TPS6565780KIOXIA256GBNAND闪存App......
  • Minecraft个人服务器搭建自己的皮肤站并实现外置登录更换自定义皮肤组件
    Minecraft个人服务器搭建自己的皮肤站并实现外置登录更换自定义皮肤组件大家好,我是艾西有不少小伙伴非常喜欢我的世界Minecraft游戏,今天小编跟大家分享下Minecraft个人服务器怎么设置皮肤站。Minecraft皮肤站是什么?其实官网就有皮肤站,在正版用户选择正版的登录后,MC客户端就会到官方......
  • 2023-10-06 Warning: [antd: Switch] `value` is not a valid prop, do you mean `che
    该报错意思是你用的这个switch组件对应的属性应该是checked而不是value,后者应该是antd默认设置的属性,可以通过valuePropName来手动指定对应的属性值。如:<FormItemname="status"label="状态"valuePropName="checked"rules={[{required:true}]}><Switch/></FormIte......
  • Vue在main.js全局引入scss文件,组件里使用scss变量报错问题
    问题描述在写组件样式的时候,普通样式都没问题,一碰到$变量就errorModulebuildfailed(from./node_modules/sass-loader/dist/cjs.js):color:$normal-active-color;^Undefinedvariable.╷22│color:$normal-active-color;│......
  • 【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器
    【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器@State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态......
  • 【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器
    【中秋国庆不断更】OpenHarmony组件内状态变量使用:@State装饰器@State装饰的变量,或称为状态变量,一旦变量拥有了状态属性,就和自定义组件的渲染绑定起来。当状态改变时,UI会发生对应的渲染改变。在状态变量相关装饰器中,@State是最基础的,使变量拥有状态属性的装饰器,它也是大部分状态......
  • Vue扩展组件系列
    ---注意日期范围都是要日期/时间两种格式(date/datetime,默认值:date)1、日期范围快选【当前日期-7天,当前日期】近期三天、一个周、一个月、三个月、一年v-model= {FieldName:'CTime',FieldValue:[]} 2、快速筛选2截至日期【选择字段】+日期框v-model= {FieldNam......
  • QFluentWidgets: 基于 C++ Qt 的 Fluent Design 组件库
    简介QFluentWidgets是一个基于Qt的FluentDesigner组件库,内置超过150个开箱即用的FluentDesigner组件,支持亮暗主题无缝切换和自定义主题色。搭配所见即所得的FluentDesigner软件,只需拖拖拽拽,不用编写一行QSS,就能快速搭建现代化软件界面。官网地址:https://qfluentw......