test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-12-02 12:07:44 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

docs(select&auto-complete): add popupContainerSelector demos (#607)

Browse Source 
* docs: add popupContainer

* docs(module: auto-complete): add popupContainer demo

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
笨木头 2020-09-17 10:37:47 +08:00 committed by GitHub
parent 128464c681
commit 6d0d8020a3
11 changed files with 189 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/auto-complete/AutoComplete.razor
View File

@ -10,6 +10,7 @@
IsButton="@true"
Disabled="false"
Trigger="new TriggerType[] { TriggerType.Click }"
PopupContainerSelector="@PopupContainerSelector"
OverlayEnterCls="slide-up-enter slide-up-enter-active slide-up"
OverlayLeaveCls="slide-up-leave slide-up-leave-active slide-up"
OverlayClassName="@OverlayClassName"

3
components/auto-complete/AutoComplete.razor.cs
View File

@ -52,6 +52,9 @@ namespace AntDesign
[Parameter]
public string OverlayStyle { get; set; }
[Parameter]
public string PopupContainerSelector { get; set; } = "body";
#endregion Parameters
private ElementReference _divRef;

8
components/core/Component/overlay/OverlayTrigger.razor.cs
View File

@ -55,6 +55,10 @@ namespace AntDesign.Internal
[Parameter]
public PlacementType Placement { get; set; } = PlacementType.BottomLeft;
[Parameter] public Action OnMouseEnter { get; set; }
[Parameter] public Action OnMouseLeave { get; set; }
[Parameter]
public EventCallback<bool> OnVisibleChange { get; set; }
@ -95,6 +99,8 @@ namespace AntDesign.Internal
await Show();
}
OnMouseEnter?.Invoke();
}
protected virtual async Task OnTriggerMouseLeave()
@ -107,6 +113,8 @@ namespace AntDesign.Internal
await Hide();
}
OnMouseLeave?.Invoke();
}
protected virtual async Task OnTriggerFocusIn()

6
components/select/Select.razor
View File

@ -10,10 +10,12 @@
Disabled="Disabled"
Trigger="new TriggerType[] { TriggerType.Click }"
HiddenMode
OnMouseEnter=@(() => { OnMouseEnter?.Invoke(); })
OnMouseLeave=@(() => { OnMouseLeave?.Invoke(); })
OnVisibleChange="OnVisibleChange"
PopupContainerSelector="@PopupContainerSelector"
OverlayEnterCls="slide-up-enter slide-up-enter-active slide-up"
OverlayLeaveCls="slide-up-leave slide-up-leave-active slide-up"
PopupContainerSelector="@PopupContainerSelector">
OverlayLeaveCls="slide-up-leave slide-up-leave-active slide-up">
<Overlay>
<div style="@_dropdownStyle">
<div role="listbox" id="@(Id)_list" style="height: 0px; width: 0px; overflow: hidden;">

8
components/select/internal/SelectBase.cs
View File

@ -1,4 +1,4 @@
using System;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
@ -56,7 +56,9 @@ namespace AntDesign.Internal
[Parameter] public string OptionFilterProp { get; set; } = "value";
[Parameter] public string PopupContainerSelector { get; set; }
[Parameter]
public string PopupContainerSelector { get; set; } = "body";
#endregion
#region Number(3)
@ -168,8 +170,6 @@ namespace AntDesign.Internal
[Parameter] public Func<Properties, RenderFragment> TagRender { get; set; }
[Parameter] public Func<ElementReference, ElementReference> GetPopupContainer { get; set; }
[Parameter] public Func<RenderFragment, Properties, RenderFragment> DropdownRender { get; set; }
[Parameter] public Action<OneOf<string, IEnumerable<string>, LabeledValue, IEnumerable<LabeledValue>>, OneOf<SelectOption, IEnumerable<SelectOption>>> OnChange { get; set; }

44
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/PopupContainer.razor Normal file
View File

@ -0,0 +1,44 @@
<div style="margin: 10px; overflow: scroll; height: 200px">
<div style="padding: 100px; height: 1000px; background: #eee; position: relative " id="area">
<AutoComplete PopupContainerSelector="#area"
@bind-Value="@value"
Options="@options"
OnInput="OnInput"
OnSelectionChange="OnSelectionChange"
OnActiveChange="OnActiveChange" />
</div>
</div>
@code
{
private string value;
List<string> options = new List<string>();
void OnInput(ChangeEventArgs e)
{
var v = e.Value.ToString();
if (string.IsNullOrWhiteSpace(v))
options = new List<string>();
else
options = new List<string>()
{
v, v + "1", v + "2"
};
}
private AutoCompleteOption selectItem;
void OnSelectionChange(AutoCompleteOption item)
{
selectItem = item;
}
private AutoCompleteOption activeItem;
void OnActiveChange(AutoCompleteOption item)
{
activeItem = item;
}
}

14
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/popup-container.md Normal file
View File

@ -0,0 +1,14 @@
---
order: 30
title:
zh-CN: 修复滚动区域的浮层移动问题
en-US: fix popup container
---
## zh-CN
修复滚动区域的浮层移动问题。
## en-US
Fix popup container.

73
site/AntBlazor.Docs/Demos/Components/Dropdown/demo/PopupContainer.razor Normal file
View File

@ -0,0 +1,73 @@
<div style="margin: 10px; overflow: scroll; height: 200px">
<div style="padding: 100px; height: 1000px; background: #eee; position: relative " id="area">
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.BottomLeft">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>BottomLeft</Button>
</ChildContent>
</Dropdown>
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.BottomCenter">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>BottomCenter</Button>
</ChildContent>
</Dropdown>
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.BottomRight">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>BottomRight</Button>
</ChildContent>
</Dropdown>
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.TopLeft">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>TopLeft</Button>
</ChildContent>
</Dropdown>
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.TopCenter">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>TopCenter</Button>
</ChildContent>
</Dropdown>
<Dropdown PopupContainerSelector="#area" Placement="@PlacementType.TopRight">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
<Button>TopRight</Button>
</ChildContent>
</Dropdown>
</div>
</div>
@code
{
private RenderFragment _overlayMenu =@<Menu>
<MenuItem>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
1st menu item
</a>
</MenuItem>
<MenuItem>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
2nd menu item
</a>
</MenuItem>
<MenuItem>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
3rd menu item
</a>
</MenuItem>
</Menu>;
}

14
site/AntBlazor.Docs/Demos/Components/Dropdown/demo/popup-container.md Normal file
View File

@ -0,0 +1,14 @@
---
order: 20
title:
zh-CN: 修复滚动区域的浮层移动问题
en-US: fix popup container
---
## zh-CN
修复滚动区域的浮层移动问题。
## en-US
Fix popup container.

10
site/AntBlazor.Docs/Demos/Components/Select/demo/PopupContainer.razor Normal file
View File

@ -0,0 +1,10 @@
<div style="margin: 10px; overflow: scroll; height: 200px">
<div style="padding: 100px; height: 1000px; background: #eee; position: relative " id="area">
<Select PopupContainerSelector="#area" DefaultValue=@("lucy") Style="width:120px">
<SelectOption Value="jack">Jack</SelectOption>
<SelectOption Value="lucy">Lucy</SelectOption>
<SelectOption Value="disabled" Disabled>Disabled</SelectOption>
<SelectOption Value="yaoming">YaoMing</SelectOption>
</Select>
</div>
</div>

14
site/AntBlazor.Docs/Demos/Components/Select/demo/popup-container.md Normal file
View File

@ -0,0 +1,14 @@
---
order: 30
title:
zh-CN: 修复滚动区域的浮层移动问题
en-US: fix popup container
---
## zh-CN
修复滚动区域的浮层移动问题。
## en-US
Fix popup container.