Enterprise-level component library based on Bootstrap and BlazorPulseButton (heartbeat) button
It is suitable for highlighting function to attract users' attention. The default button is circular
Basic usage
The underlying button usage.
Demo
The heartbeat button component is inherited from the button, so a heartbeat ring is added on the basis of the original function of the button. Please refer to the switch style button in the lower right corner of the website.
@page "/pulsebuttons"
@inject IStringLocalizer<Buttons> Localizer
<h3>@Localizer["PluseButtonHeader"]</h3>
<h4>@Localizer["PluseButtonPara"]</h4>
<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
<p>@Localizer["PluseButtonPara2"]</p>
<div class="row g-3">
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-fw fa-heart fa-beat" Color="Color.Primary"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-fw fa-user fa-beat" Color="Color.Secondary"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Success"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Danger"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Warning"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Info"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Dark"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Light"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.Link"></PulseButton></div>
<div class="col-6 col-sm-4 col-md-3 col-lg-auto"><PulseButton Icon="fa-solid fa-user" Color="Color.None"></PulseButton></div>
</div>
</DemoBlock>
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class PulseButtons
{
}
