test/BootstrapBlazor3
1
0
Fork 0
mirror of https://gitee.com/LongbowEnterprise/BootstrapBlazor.git synced 2024-11-30 02:58:37 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: 弹出框增加位置属性

Browse Source
This commit is contained in:
Argo-PD 2020-04-13 20:02:27 +08:00
parent 9012913eb8
commit f4b9d09841
6 changed files with 113 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/BootstrapBlazor/Components/Popover/PopoverConfirm.razor
View File

@ -1,7 +1,7 @@
@namespace BootstrapBlazor.Components
@inherits PopoverConfirmBase
<div @attributes="@AdditionalAttributes" class="@ClassName" role="tooltip" id="@Id" aria-hidden="false" tabindex="0" @ref="ConfirmPopover" style="@StyleName">
<div @attributes="@AdditionalAttributes" class="@ClassName" role="tooltip" id="@Id" aria-hidden="false" tabindex="0" @ref="ConfirmPopover" style="@StyleName" placement="@PlacementString">
@if (!string.IsNullOrEmpty(Title))
{
<h3 class="popover-confirm-header">@Title</h3>

26
src/BootstrapBlazor/Components/Popover/PopoverConfirmBase.cs
View File

@ -32,23 +32,32 @@ namespace BootstrapBlazor.Components
.Build();
/// <summary>
/// 获得/设置 图标样式
/// 获得 图标样式
/// </summary>
protected string? IconClass => CssBuilder.Default("fa")
.AddClass(Icon)
.Build();
/// <summary>
/// 获得/设置 组件样式信息
/// 获得 组件样式信息
/// </summary>
protected string? StyleName => CssBuilder.Default()
.AddClass($"left: -{MarginX:f2}px", MarginX.HasValue)
.AddClass($"left: {Offset?.MarginX}px;", Offset != null)
.AddClass($"top: {Offset?.MarginY}px;", Offset != null)
.Build();
/// <summary>
/// 获得/设置 X 轴偏移量
/// 获得 确认框位置信息
/// </summary>
protected float? MarginX { get; set; }
protected string? PlacementString => CssBuilder.Default()
.AddClass("bottom", Placement == Placement.Bottom)
.AddClass("top", Placement != Placement.Bottom)
.Build();
/// <summary>
/// 获得/设置 确认框偏移位置信息
/// </summary>
protected Offset? Offset { get; set; }
/// <summary>
/// 获得/设置 确认弹框实例
@ -70,6 +79,11 @@ namespace BootstrapBlazor.Components
/// </summary>
[Parameter] public string Content { get; set; } = "Popover Confirm";
/// <summary>
/// 获得/设置 确认框弹出位置 默认为 top 上方
/// </summary>
[Parameter] public Placement Placement { get; set; } = Placement.Top;
/// <summary>
/// 获得/设置 关闭按钮显示文字
/// </summary>
@ -114,7 +128,7 @@ namespace BootstrapBlazor.Components
// 计算位移量
if (JSRuntime != null)
{
MarginX = await JSRuntime.Confirm(ConfirmPopover);
Offset = await JSRuntime.Confirm(ConfirmPopover);
IsShow = true;
await InvokeAsync(StateHasChanged);
}

18
src/BootstrapBlazor/Enums/Offset.cs Normal file
View File

@ -0,0 +1,18 @@
namespace BootstrapBlazor.Components
{
/// <summary>
/// 物体偏移量类
/// </summary>
public class Offset
{
/// <summary>
/// 获得/设置 X 轴偏移量
/// </summary>
public int MarginX { get; set; }
/// <summary>
/// 获得/设置 Y 轴偏移量
/// </summary>
public int MarginY { get; set; }
}
}

2
src/BootstrapBlazor/Extensions/JSRuntimeExtensions.cs
View File

@ -75,6 +75,6 @@ namespace BootstrapBlazor.Components
/// </summary>
/// <param name="jsRuntime"></param>
/// <param name="element"></param>
public static async ValueTask<float> Confirm(this IJSRuntime jsRuntime, ElementReference element) => await jsRuntime.InvokeAsync<float>("$.confirm", element);
public static async ValueTask<Offset> Confirm(this IJSRuntime jsRuntime, ElementReference element) => await jsRuntime.InvokeAsync<Offset>("$.confirm", element);
}
}

58
src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.css vendored
View File

@ -913,6 +913,7 @@ a {
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
word-break: break-all;
z-index: 10;
outline: none;
}
.popover-confirm-body {
@ -932,4 +933,61 @@ a {
.popover-confirm-buttons .btn:last-child {
margin-left: 0.5rem;
}
.popover-confirm-arrow {
border-width: 6px;
filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
}
.popover-confirm-arrow:after {
content: " ";
border-width: 6px;
}
.popover-confirm-arrow, .popover-confirm-arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover-confirm[placement^=bottom] {
margin-top: 8px;
}
.popover-confirm[placement^=bottom] .popover-confirm-arrow {
top: -6px;
left: 50%;
margin-right: 3px;
border-top-width: 0;
border-bottom-color: #ebeef5;
}
.popover-confirm[placement^=bottom] .popover-confirm-arrow:after {
top: 1px;
margin-left: -6px;
border-top-width: 0;
border-bottom-color: #fff;
}
.popover-confirm[placement^=top] {
margin-top: -8px;
}
.popover-confirm[placement^=top] .popover-confirm-arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border-top-color: #ebeef5;
border-bottom-width: 0;
}
.popover-confirm[placement^=top] .popover-confirm-arrow:after {
bottom: 1px;
margin-left: -6px;
border-top-color: #fff;
border-bottom-width: 0;
}
/*end confirm*/

18
src/BootstrapBlazor/wwwroot/js/bootstrap.blazor.js vendored
View File

@ -288,11 +288,23 @@
// 获得 button 大小
var width = $button.outerWidth();
var height = $button.outerHeight();
// check top or bottom
var placement = $ele.attr('placement');
// 设置自己位置
var margin = ($ele.outerWidth() - width) / 2;
console.log(margin);
return margin;
var marginX = 0;
var marginY = 0;
if (placement === 'top') {
marginX = 0 - Math.ceil(($ele.outerWidth() - width) / 2);
marginY = 0 - $ele.outerHeight();
}
else if (placement === 'bottom') {
marginX = 0 - Math.ceil(($ele.outerWidth() - width) / 2);
marginY = height;
}
return { MarginX: marginX, MarginY: marginY };
}
});