Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Popover popup component

Click/mouse into the element to pop up a bubble-like card overlay

Basic usage

Click the text input box to pop up the Popover pop-up box, Placement set the position of the pop-up box, close the pop-up box when clicking the second time

Demo

<div class="d-flex flex-column w-100 popover-demo">
    <div class="d-flex justify-content-center">
        <Popover Placement="Placement.Bottom" Title="@Title" Content="@Content" IsHtml="true">
            <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
        </Popover>
    </div>
    <div class="d-flex justify-content-between align-items-center flex-fill">
        <Popover Placement="Placement.Right" Title="@Title" Content="@Content" IsHtml="true">
            <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
        </Popover>
        <Popover Placement="Placement.Left" Title="@Title" Content="@Content" IsHtml="true">
            <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
        </Popover>
    </div>
    <div class="d-flex justify-content-center">
        <Popover Placement="Placement.Top" Title="@Title" Content="@Content" IsHtml="true">
            <BootstrapInput Value="@ValueString" aria-label="@ValueString" />
        </Popover>
    </div>
</div>

@code {
    private static readonly string ValueString = "Pop-up box";

    private static readonly string Title = "popup title";

    private static readonly string Content = "Here is the text of the pop-up box, the <code>html</code> tag is supported here, or a <code>Table</code> can be built-in";
}

button activates popup

Popover pop-up box pops up after clicking the button

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Popovers> Localizer

<Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click">
    <Button Text="@Localizer["PopoversButtonButtonText"]" />
</Popover>

@code {
    private static readonly string Title = "popup title";

    private static readonly string Content = "Here is the text of the pop-up box, the <code>html</code> tag is supported here, or a <code>Table</code> can be built-in";
}

custom style

Customize the pop-up window by setting the Popover parameter CssClass

Demo

set up Popover parameter CssClass="custom-popover" make custom styles

.custom-popover {
    --bs-popover-border-color: var(--bs-primary);
    --bs-popover-header-bg: var(--bs-primary);
    --bs-popover-header-color: var(--bs-white);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
}

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Popovers> Localizer

<Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click" CustomClass="custom-popover">
    <Button Text="@Localizer["PopoversCssClassButtonText"]" />
</Popover>

@code {
    private static readonly string Title = "popup title";

    private static readonly string Content = "Here is the text of the pop-up box, the <code>html</code> tag is supported here, or a <code>Table</code> can be built-in";
}

Attributes

B station related video link

交流群

QQ Group：BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion

Popover popup component

Click/mouse into the element to pop up a bubble-like card overlay

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01