Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Popover 弹出窗组件

点击/鼠标移入元素,弹出气泡式的卡片浮层

基础用法

点击文本输入框弹出 Popover 弹出框,Placement 设置弹出框的位置 二次点击时关闭弹出框

Demo

Popover 按钮激活弹出框

点击按钮后弹出 Popover 弹出框

Demo

Attributes

Loading...
@page "/popovers"

<h3>Popover 弹出窗组件</h3>

<h4>点击/鼠标移入元素,弹出气泡式的卡片浮层</h4>

<Block Title="基础用法" Introduction=" 点击文本输入框弹出 Popover 弹出框,<code>Placement</code> 设置弹出框的位置 二次点击时关闭弹出框">
    <div class="d-flex flex-column w-100 popover-demo">
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Bottom" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Right" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Left" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@ValueString">
                <Popover Placement="Placement.Top" Title="@Title" Content="@Content" IsHtml="true" />
            </BootstrapInput>
        </div>
    </div>
</Block>

<Block Title="Popover 按钮激活弹出框" Introduction="点击按钮后弹出 Popover 弹出框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    <span>Click 激活/关闭</span>
                    <Popover Placement="Placement.Auto" Title="@Title" Content="@Content" IsHtml="true" Trigger="click" />
                </Button>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
网络错误

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload