Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

@page "/popconfirms"

<h3>Popconfirm 气泡确认框</h3>

<h4>点击元素,弹出气泡确认框。</h4>

<Block Title="基础用法" Introduction="<code>Popconfirm</code> 的属性与 <code>Popover</code> 很类似,因此对于重复属性,请参考 <a href='/popovers'><code>Popover</code><a> 的文档,在此文档中不做详尽解释。">
    <div class="d-flex justify-content-center border p-3 rounded">
        <div class="d-flex flex-column w-100" style="height: 240px;">
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Bottom" ConfirmButtonColor="Color.Danger" Text="下面弹框" Content="这是一段内容确定删除吗?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-between m-4 align-items-center flex-fill">
                <PopConfirmButton Placement="Placement.Right" Text="右侧弹窗" Content="这是一段内容确定删除吗?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
                <PopConfirmButton Placement="Placement.Left" Text="左侧弹窗" Content="这是一段内容确定删除吗?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
            <div class="d-flex justify-content-center">
                <PopConfirmButton Placement="Placement.Top" Text="上面弹窗" Content="这是一段内容确定删除吗?" OnConfirm="@OnConfirm" OnClose="@OnClose" />
            </div>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Content 更改确认弹窗显示文字" Introduction="通过设置<code>Content</code> 属性更改确认弹窗显示文字">
    <PopConfirmButton Placement="Placement.Top" Color="Color.Danger" ConfirmIcon="fa fa-exclamation-triangle text-danger" ConfirmButtonColor="Color.Danger" Text="删除确认按钮" Content="确定删除数据吗?" />
</Block>

<Tips class="mt-3">
    <p>
        <code>Popconfirm</code> 组件使用了全局组件,需要再使用本组件的页面或者全局组件中内置本组件,示例代码如下:
    </p>
</Tips>

<Pre>&lt;PopoverConfirm /&gt;</Pre>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

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