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

feat(module: auto-complete): add disabled and placeholder properties (#655)

Browse Source 
* feat: add Disabled Placeholder

* fix: api doc

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
TimChen 2020-10-09 16:32:40 +08:00 committed by GitHub
parent 542b66d383
commit 35b5029117
10 changed files with 73 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,7 @@
<CascadingValue Value="this">
@if (ChildContent == null)
{
<AutoCompleteInput @bind-Value="@CurrentValue" />
<AutoCompleteInput @bind-Value="@CurrentValue" Placeholder="@Placeholder" Disabled="@Disabled"/>
}
else
{

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

@ -16,6 +16,12 @@ namespace AntDesign
{
#region Parameters
[Parameter]
public string Placeholder { get; set; }
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public bool DefaultActiveFirstOption { get; set; } = true;
[Parameter]
@ -31,6 +37,9 @@ namespace AntDesign
[Parameter]
public EventCallback<ChangeEventArgs> OnInput { get; set; }
[Parameter]
public EventCallback<bool> OnPanelVisibleChange { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
@ -84,18 +93,12 @@ namespace AntDesign
_inputComponent = input;
}
#region 子控件触发事件
public async Task InputFocus(FocusEventArgs e)
{
this.OpenPanel();
}
public async Task InputBlur(FocusEventArgs e)
{
//this.ClosePanel();
}
public async Task InputInput(ChangeEventArgs args)
{
SelectedValue = args.Value;
@ -287,9 +290,20 @@ namespace AntDesign
this.ClosePanel();
}
private void OnOverlayTriggerVisibleChange(bool visible)
bool _parPanelVisible = false;
private async void OnOverlayTriggerVisibleChange(bool visible)
{
this.ShowPanel = visible;
if (OnPanelVisibleChange.HasDelegate && _parPanelVisible != visible)
{
_parPanelVisible = visible;
await OnPanelVisibleChange.InvokeAsync(visible);
}
if (this.ShowPanel != visible)
{
this.ShowPanel = visible;
}
}
private string _minWidth = "";

7
components/auto-complete/AutoCompleteInput.cs
View File

@ -28,13 +28,6 @@ namespace AntDesign
}
internal override async Task OnBlurAsync(FocusEventArgs e)
{
if (AutoComplete != null) await AutoComplete?.InputBlur(e);
await base.OnBlurAsync(e);
}
protected override async Task OnkeyDownAsync(KeyboardEventArgs args)
{
await base.OnkeyDownAsync(args);

7
components/auto-complete/AutoCompleteSearch.cs
View File

@ -28,13 +28,6 @@ namespace AntDesign
}
internal override async Task OnBlurAsync(FocusEventArgs e)
{
if (AutoComplete != null) await AutoComplete?.InputBlur(e);
await base.OnBlurAsync(e);
}
protected override async Task OnkeyDownAsync(KeyboardEventArgs args)
{
await base.OnkeyDownAsync(args);

2
components/auto-complete/IAutoCompleteRef.cs
View File

@ -13,8 +13,6 @@ namespace AntDesign
Task InputFocus(FocusEventArgs e);
Task InputBlur(FocusEventArgs e);
Task InputInput(ChangeEventArgs args);
Task InputKeyDown(KeyboardEventArgs args);

4
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/Basic.razor
View File

@ -1,4 +1,4 @@
<AutoComplete @bind-Value="@value" Options="@options" OnInput="OnInput" OnSelectionChange="OnSelectionChange" OnActiveChange="OnActiveChange"/>
<AutoComplete @bind-Value="@value" Options="@options" OnInput="OnInput" OnSelectionChange="OnSelectionChange" OnActiveChange="OnActiveChange" Placeholder="input here"/>
<Divider></Divider>
<span>bind-Value:@value</span>
<br />
@ -38,4 +38,4 @@
{
activeItem = item;
}
}
}

22
site/AntBlazor.Docs/Demos/Components/AutoComplete/demo/Property.razor
View File

@ -1,11 +1,18 @@
<AutoComplete @bind-Value="@value" Options="@options" Backfill="switchBackfill" DefaultActiveFirstOption="switchDefaultActiveFirstOption" Width="120"/>
<Divider Text="属性"></Divider>
<AutoComplete @bind-Value="@value"
Options="@options"
Backfill="@switchBackfill"
DefaultActiveFirstOption="@switchDefaultActiveFirstOption"
Width="120"
OnPanelVisibleChange="OnPanelVisibleChange"
Disabled="@disabled" />
<Divider Text="Properties"></Divider>
<div>
<Switch @bind-Value="switchBackfill" />Backfill
<br />
<Switch @bind-Value="switchDefaultActiveFirstOption" />DefaultActiveFirstOption
<br />
<Switch @bind-Value="disabled" />Disabled
</div>
<Divider></Divider>
@ -26,4 +33,11 @@
bool switchDefaultActiveFirstOption { get; set; } = true;
}
bool disabled { get; set; } = false;
private void OnPanelVisibleChange(bool visible)
{
Console.WriteLine(visible);
}
}

8
site/AntBlazor.Docs/Demos/Components/AutoComplete/doc/index.en-US.md
View File

@ -18,13 +18,15 @@ When there is a need for autocomplete functionality.
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| `Backfill` | backfill selected item the input when using keyboard | `boolean` | `false` |
| `DataSource` | Data source for autocomplete | `AutocompleteDataSource` | - |
| `Options` | Data source for autocomplete | `AutocompleteDataSource` | - |
| `Disabled` | Set disabled | `bool` | - |
| `Placeholder` | Placeholder text | `string` | - |
| `DefaultActiveFirstOption` | Whether active first option by default | `boolean` | `true` |
| `Width` | Custom width, unit px | `int` | 触发元素宽度 |
| `Width` | Custom width, unit px | `int` | auto |
| `OverlayClassName` | Class name of the dropdown root element | `string` | - |
| `OverlayStyle` | Style of the dropdown root element | `object` | - |
| `CompareWith` | `(o1: object, o2: object) => bool` | `(o1: object, o2: object) => o1===o2` |
| `PopupContainerSelector` | The selector of the container for dropdown element. | `string` | `'body'` |
### AutoCompleteOption

7
site/AntBlazor.Docs/Demos/Components/AutoComplete/doc/index.zh-CN.md
View File

@ -19,12 +19,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| `Backfill` | 使用键盘选择选项的时候把选中项回填到输入框中 | `boolean` | `false` |
| `DataSource` | 自动完成的数据源 | `AutocompleteDataSource` | - |
| `Options` | 自动完成的数据源 | `AutocompleteDataSource` | - |
| `Disabled` | 是否禁用 | `bool` | - |
| `Placeholder` | 占位符文本 | `string` | - |
| `DefaultActiveFirstOption` | 是否默认高亮第一个选项。 | `boolean` | `true` |
| `Width` | 自定义宽度单位 px | `number` | 触发元素宽度 |
| `Width` | 自定义宽度单位 px | `number` | auto |
| `OverlayClassName` | 下拉根元素的类名称 | `string` | - |
| `OverlayStyle` | 下拉根元素的样式 | `object` | - |
| `CompareWith` | `(o1: object, o2: object) => bool` | `(o1: object, o2: object) => o1===o2` |
| `PopupContainerSelector` | 菜单渲染父节点的选择器。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | `string` | `'body'` |
### AutoCompleteOption

32
site/AntBlazor.Docs/Demos/Components/Form/demo/Size.razor
View File

@ -1,11 +1,11 @@
@using System.Text.Json;
<Form Model="@model"
LabelCol="new ColLayoutParam { Span = 8 }"
WrapperCol="new ColLayoutParam { Span = 16 }"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"
Size="@model.Size">
LabelCol="new ColLayoutParam { Span = 8 }"
WrapperCol="new ColLayoutParam { Span = 16 }"
OnFinish="OnFinish"
OnFinishFailed="OnFinishFailed"
Size="@model.Size">
<FormItem Label="Form Size">
<RadioGroup @bind-Value="@context.Size">
<Radio RadioButton Value="@AntSizeLDSType.Small">Small</Radio>
@ -43,11 +43,16 @@
<Radio RadioButton Value="@("Chengdu")">Chengdu</Radio>
</RadioGroup>
</FormItem>
<FormItem Label="AutoComplete">
<AutoComplete @bind-Value="@context.AutoComplete" Options="@autoCompleteOptions" Placeholder="Input here" />
</FormItem>
<FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }">
<Button HtmlType="submit">
Submit
</Button>
</FormItem>
</Form>
@code
@ -63,29 +68,32 @@
public double Number { get; set; } = 1;
public bool Switch { get; set; } = true;
public string Radio { get; set; } = "Beijing";
public string AutoComplete { get; set; }
}
private Model model = new Model();
private List<CascaderNode> districts = new List<CascaderNode>
{
{
new CascaderNode()
{
Value = "1",
Label = "浙江",
Label = "Zhejianng",
Children = new []
{
new CascaderNode {Value = "11", Label = "杭州"},
new CascaderNode {Value = "12", Label = "温州"},
{
new CascaderNode {Value = "11", Label = "Hangzhou"},
new CascaderNode {Value = "12", Label = "Wenzhou"},
}
},
new CascaderNode()
{
Value = "2",
Label = "上海",
Label = "Shanghai",
}
};
private List<string> autoCompleteOptions = new List<string> { "Primary", "Junior", "Senior", "Undergraduate", "Master", "Doctor" };
private void OnFinish(EditContext editContext)
{
Console.WriteLine($"Success:{JsonSerializer.Serialize(model)}");
@ -96,4 +104,4 @@
Console.WriteLine($"Failed:{JsonSerializer.Serialize(model)}");
}
}
}