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

style: 调整弹出确认框弹出位置

Browse Source
This commit is contained in:
Argo-SHCX 2020-04-15 15:51:04 +08:00
parent 7f5332ab1f
commit d09f112831
5 changed files with 79 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/BootstrapBlazor.WebConsole/Pages/Tables.razor
View File

@ -96,7 +96,7 @@
<Block Title="分页表格" Introduction="设置 <code>IsPagination</code> 显示分页组件" CodeFile="table.7.txt">
<Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem"
IsPagination="true" PageItemsSource="@PageItemsSource" PageItems="2" OnQuery="@OnQuery">
IsPagination="true" PageItemsSource="@PageItemsSource" OnQuery="@OnQuery">
<HeaderTemplate>
<TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
<TableColumn TItem="string" @bind-Field="@context.Name" />
@ -112,7 +112,8 @@
<Block Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件" CodeFile="table.8.txt">
<Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(4)"
IsBordered="true" ShowCheckbox="true" ShowToolbar="true">
IsBordered="true"
ShowCheckbox="true" ShowToolbar="true" ShowDefaultButtons="false">
<HeaderTemplate>
<TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
<TableColumn TItem="string" @bind-Field="@context.Name" />
@ -127,8 +128,10 @@
</Block>
<Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" CodeFile="table.9.txt">
<Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(2)" IsBordered="true"
ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false">
<Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem"
IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
OnQuery="@OnQuery">
<HeaderTemplate>
<TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
<TableColumn TItem="string" @bind-Field="@context.Name" />

1
src/BootstrapBlazor.WebConsole/wwwroot/css/site.css
View File

@ -450,7 +450,6 @@ section {
width: 250px;
height: calc(100vh - 52px);
position: sticky;
z-index: 1000;
top: 52px;
}

2
src/BootstrapBlazor/Components/Table/Table.razor
View File

@ -104,7 +104,7 @@
<TableCellButton TItem="TItem" Size="Size.ExtraSmall" Item="@Items.ElementAt(index)" Color="Color.Danger" data-toggle="popover" OnClickCallback="@(e=> ClickButton("delete", e))">
<i class='fa fa-remove'></i>
<span>删除</span>
<PopoverConfirm @ref="@ButtonDeleteConfirm" OnConfirm="@Delete"></PopoverConfirm>
<PopoverConfirm OnConfirm="@Delete"></PopoverConfirm>
</TableCellButton>
@RowButtonTemplate?.Invoke(Items.ElementAt(index))
</div>

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

@ -968,7 +968,7 @@ a {
text-align: justify;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
word-break: break-all;
z-index: 50;
z-index: 1050;
outline: none;
}
@ -1010,7 +1010,7 @@ a {
}
.popover-confirm.bottom {
margin-top: 8px;
margin-top: 18px;
}
.popover-confirm.bottom .popover-confirm-arrow {
@ -1046,4 +1046,35 @@ a {
border-top-color: #fff;
border-bottom-width: 0;
}
.popover-confirm.left .popover-confirm-arrow {
top: 50%;
right: -6px;
margin-bottom: 3px;
border-left-color: #ebeef5;
border-right-width: 0;
}
.popover-confirm.left .popover-confirm-arrow:after {
bottom: -6px;
right: 1px;
border-left-color: #fff;
border-right-width: 0;
}
.popover-confirm.right .popover-confirm-arrow {
top: 50%;
left: -6px;
margin-bottom: 3px;
border-right-color: #ebeef5;
border-left-width: 0;
}
.popover-confirm.right .popover-confirm-arrow:after {
bottom: -6px;
left: 1px;
border-right-color: #fff;
border-left-width: 0;
}
/*end confirm*/

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

@ -323,6 +323,8 @@
var width = $button.outerWidth();
var height = $button.outerHeight();
var iHeight = $button.height();
// check top or bottom
var placement = 'top';
@ -331,11 +333,33 @@
var top = 0;
// 根据自身位置自动判断出现位置
var x = $button.offset().top;
var margin = x - $(window).scrollTop() - elHeight - height;
var y = $button.offset().top;
var x = $button.offset().left;
var margin = y - $(window).scrollTop() - elHeight - height;
if (margin < 0) placement = 'bottom';
$ele.removeClass('top bottom').addClass(placement);
if (margin < 0) {
// top 不可用
placement = 'bottom';
}
else {
// 判断左右侧是否位置够用
var marginRight = $(window).width() - elWidth - x > 0;
var marginLeft = x - elWidth > 0;
if (!marginLeft && marginRight) {
// 右侧空间满足
placement = "right";
}
else if (marginLeft && !marginRight) {
// 左侧空间不足
placement = 'left';
}
else if (!marginLeft && !marginRight) {
// 左右两侧空间都不够
placement = 'bottom';
}
}
$ele.removeClass('top bottom left right').addClass(placement);
if (placement === 'top') {
left = 0 - Math.ceil((elWidth - width) / 2);
@ -343,7 +367,16 @@
}
else if (placement === 'bottom') {
left = 0 - Math.ceil((elWidth - width) / 2);
top = height;
top = iHeight;
}
else if (placement === 'left') {
left = 0 - elWidth - 8;
top = 0 - Math.ceil((elHeight - iHeight) / 2);
console.log($button.height());
}
else if (placement === 'right') {
left = width + 8;
top = 0 - Math.ceil((elHeight - iHeight) / 2);
}
return { left, top };
@ -363,7 +396,6 @@
var $this = $(e.target);
var self = $this.attr('data-toggle') === "popover" || $this.parents('[data-toggle="popover"]').length > 0;
if (self) {
console.log($this);
return;
}
$ele.fadeHide();