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

fix(module: dropdown): dropdown button missing properties & docs fix for Dropdown & Button (#1609)

Browse Source 
* fix:fix(module:dropdownbutton): add regular button behaviors and properties

* fix(module:button): add text type & docs

* docs(module:dropdown): version correction

* fix(module:overlay): re-add IsButton parameter

* fix: add xml comment to public methods

* fix(module:overlay): add xml documentation

* fix(module:dropdown): chrome block button force

* fix(module:button): remove Search parameter

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
Andrzej Bakun 2021-06-09 11:51:24 +02:00 committed by GitHub
parent dc02db39da
commit 4cac27f887
21 changed files with 685 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
components/button/Button.razor.cs
View File

@ -7,42 +7,6 @@ namespace AntDesign
{
public partial class Button : AntDomComponentBase
{
[Parameter]
public bool Block { get; set; } = false;
[Parameter]
public bool Ghost { get; set; } = false;
[Parameter]
public bool Search { get; set; } = false;
[Parameter]
public bool Loading
{
get => _loading;
set
{
if (_loading != value)
{
_loading = value;
UpdateIconDisplay(_loading);
}
}
}
[Parameter]
public string Type { get; set; } = ButtonType.Default;
[Parameter]
public string HtmlType { get; set; } = "button";
[Parameter]
public string Shape { get; set; } = null;
private bool _animating = false;
private string _btnWave = "--antd-wave-shadow-color: rgb(255, 120, 117);";
private string _formSize;
[CascadingParameter(Name = "FormSize")]
@ -60,31 +24,102 @@ namespace AntDesign
}
}
/// <summary>
/// Option to fit button width to its parent width
/// </summary>
[Parameter]
public string Size { get; set; } = AntSizeLDSType.Default;
[Parameter]
public string Icon { get; set; }
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public bool Danger { get; set; }
public bool Block { get; set; } = false;
/// <summary>
/// Content of the button.
/// </summary>
[Parameter]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// Set the danger status of button.
/// </summary>
[Parameter]
public bool Danger { get; set; }
/// <summary>
/// Whether the `Button` is disabled.
/// </summary>
[Parameter]
public bool Disabled { get; set; }
/// <summary>
/// Make background transparent and invert text and border colors
/// </summary>
[Parameter]
public bool Ghost { get; set; } = false;
/// <summary>
/// Set the original html type of the button element.
/// </summary>
[Parameter]
public string HtmlType { get; set; } = "button";
/// <summary>
/// Set the icon component of button.
/// </summary>
[Parameter]
public string Icon { get; set; }
/// <summary>
/// Show loading indicator. You have to write the loading logic on your own.
/// </summary>
[Parameter]
public bool Loading
{
get => _loading;
set
{
if (_loading != value)
{
_loading = value;
UpdateIconDisplay(_loading);
}
}
}
/// <summary>
/// Callback when `Button` is clicked
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
/// <summary>
/// Do not propagate events when button is clicked.
/// </summary>
[Parameter]
public bool OnClickStopPropagation { get; set; }
/// <summary>
/// Can set button shape: `circle` | `round` or `null` (default, which is rectangle).
/// </summary>
[Parameter]
public string Shape { get; set; } = null;
/// <summary>
/// Set the size of button.
/// </summary>
[Parameter]
public string Size { get; set; } = AntSizeLDSType.Default;
/// <summary>
/// Type of the button.
/// </summary>
[Parameter]
public string Type { get; set; } = ButtonType.Default;
public IList<Icon> Icons { get; set; } = new List<Icon>();
protected string IconStyle { get; set; }
private bool _animating = false;
private string _btnWave = "--antd-wave-shadow-color: rgb(255, 120, 117);";
private bool _loading = false;
protected void SetClassMap()
@ -99,10 +134,9 @@ namespace AntDesign
.If($"{prefixName}-lg", () => Size == "large")
.If($"{prefixName}-sm", () => Size == "small")
.If($"{prefixName}-loading", () => Loading)
.If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && !this.Search && this.ChildContent == null)
.If($"{prefixName}-icon-only", () => !string.IsNullOrEmpty(this.Icon) && this.ChildContent == null)
.If($"{prefixName}-background-ghost", () => Ghost)
.If($"{prefixName}-block", () => this.Block)
.If($"ant-input-search-button", () => this.Search)
.If($"{prefixName}-rtl", () => RTL)
;
}

8
components/button/ButtonType.cs
View File

@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace AntDesign
namespace AntDesign
{
public static class ButtonType
{
@ -11,5 +6,6 @@ namespace AntDesign
public const string Primary = "primary";
public const string Dashed = "dashed";
public const string Link = "link";
public const string Text = "text";
}
}

7
components/core/AntSizeLDSType.cs
View File

@ -1,9 +1,4 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace AntDesign
namespace AntDesign
{
public class AntSizeLDSType
{

8
components/core/Component/Overlay/Overlay.razor.cs
View File

@ -54,6 +54,14 @@ namespace AntDesign.Internal
[Parameter]
public int HorizontalOffset { get; set; } = 4;
/// <summary>
/// By default Overlay does not render its content if Overlay hasn't been
/// activated (shown at least once). Setting HiddenMode = true will
/// go through rendering process.
/// Use case: Select component, when using <SimpleOption> or <SelectOption>
/// needs HiddenMode = true, so the select options are initialized and
/// potential defaults can be rendered properly.
/// </summary>
[Parameter]
public bool HiddenMode { get; set; } = false;

207
components/core/Component/Overlay/OverlayTrigger.razor.cs
View File

@ -29,34 +29,17 @@ namespace AntDesign.Internal
}
}
/// <summary>
/// Overlay adjustment strategy (when for example browser resize is happening)
/// </summary>
[Parameter]
public string PopupContainerSelector { get; set; } = "body";
public TriggerBoundaryAdjustMode BoundaryAdjustMode { get; set; } = TriggerBoundaryAdjustMode.InView;
/// <summary>
/// Trigger (link, button, etc)
/// </summary>
[Parameter]
public string PlacementCls { get; set; }
[Parameter]
public string OverlayEnterCls { get; set; }
[Parameter]
public string OverlayLeaveCls { get; set; }
[Parameter]
public string OverlayHiddenCls { get; set; }
[Parameter]
public string OverlayClassName { get; set; }
[Parameter]
public string OverlayStyle { get; set; }
[Parameter]
public bool Disabled { get; set; }
[Parameter]
public bool Visible { get; set; } = false;
public void SetVisible(bool visible) => Visible = visible;
public RenderFragment ChildContent { get; set; }
/// <summary>
/// 自动关闭功能和Visible参数同时生效
@ -65,23 +48,101 @@ namespace AntDesign.Internal
[Parameter]
public bool ComplexAutoCloseAndVisible { get; set; } = false;
/// <summary>
/// Whether the trigger is disabled.
/// </summary>
[Parameter]
public bool IsButton { get; set; } = false;
[Parameter]
public bool InlineFlexMode { get; set; } = false;
public bool Disabled { get; set; }
/// <summary>
/// Property forwarded to Overlay component. Consult the Overlay
/// property for more detailed explanation.
/// </summary>
[Parameter]
public bool HiddenMode { get; set; } = false;
/// <summary>
/// (not used in Unbound) Sets wrapping div style to `display: inline-flex;`.
/// </summary>
[Parameter]
public TriggerType[] Trigger { get; set; } = new TriggerType[] { TriggerType.Hover };
public bool InlineFlexMode { get; set; } = false;
/*
* 通过参数赋值的placement，不应该通过其它方式赋值
* Placement set by Parameter, should not be change by other way
*/
private PlacementType _paramPlacement = PlacementType.BottomLeft;
/// <summary>
/// Behave like a button: when clicked invoke OnClick
/// (unless OnClickDiv is overriden and does not call base).
/// </summary>
[Parameter]
public bool IsButton { get; set; } = false;
/// <summary>
/// Callback when triggger is clicked
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
/// <summary>
/// Callback - equivalent of OnMouseUp event on the trigger trigger.
/// </summary>
[Parameter]
public EventCallback OnMaskClick { get; set; }
/// <summary>
/// Callback when mouse enters trigger boundaries.
/// </summary>
[Parameter] public Action OnMouseEnter { get; set; }
/// <summary>
/// Callback when mouse leaves trigger boundaries.
/// </summary>
[Parameter] public Action OnMouseLeave { get; set; }
/// <summary>
/// Callback when overlay is hiding.
/// </summary>
[Parameter]
public EventCallback<bool> OnOverlayHiding { get; set; }
/// <summary>
/// Callback when overlay visibility is changing.
/// </summary>
[Parameter]
public EventCallback<bool> OnVisibleChange { get; set; }
/// <summary>
/// Overlay content (what will be rendered after trigger is activated)
/// </summary>
[Parameter]
public RenderFragment Overlay { get; set; }
/// <summary>
/// Overlay container custom css class.
/// </summary>
[Parameter]
public string OverlayClassName { get; set; }
/// <summary>
/// Css class added to overlay when overlay is shown.
/// </summary>
[Parameter]
public string OverlayEnterCls { get; set; }
/// <summary>
/// Css class added to overlay when overlay is hidden.
/// </summary>
[Parameter]
public string OverlayHiddenCls { get; set; }
/// <summary>
/// Css class added to overlay when overlay is hiding.
/// </summary>
[Parameter]
public string OverlayLeaveCls { get; set; }
/// <summary>
/// Css style that will be added to overlay div.
/// </summary>
[Parameter]
public string OverlayStyle { get; set; }
/*
* 当前的placement，某些情况下可能会被Overlay组件修改（通过ChangePlacementForShow函数）
@ -89,6 +150,12 @@ namespace AntDesign.Internal
*/
private PlacementType _placement = PlacementType.BottomLeft;
/*
* 通过参数赋值的placement，不应该通过其它方式赋值
* Placement set by Parameter, should not be change by other way
*/
private PlacementType _paramPlacement = PlacementType.BottomLeft;
[Parameter]
public PlacementType Placement
{
@ -103,34 +170,29 @@ namespace AntDesign.Internal
}
}
[Parameter] public Action OnMouseEnter { get; set; }
[Parameter] public Action OnMouseLeave { get; set; }
/// <summary>
/// Override default placement class which is based on `Placement` parameter.
/// </summary>
[Parameter]
public EventCallback<bool> OnVisibleChange { get; set; }
public string PlacementCls { get; set; }
/// <summary>
/// Define what is going to be the container of the overlay.
/// Example use case: when overlay has to be contained in a
/// scrollable area.
/// </summary>
[Parameter]
public EventCallback<bool> OnOverlayHiding { get; set; }
public string PopupContainerSelector { get; set; } = "body";
/// <summary>
/// Trigger mode. Could be multiple by passing an array.
/// </summary>
[Parameter]
public RenderFragment Overlay { get; set; }
[Parameter]
public RenderFragment ChildContent { get; set; }
[Parameter]
public RenderFragment<ForwardRef> Unbound { get; set; }
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
[Parameter]
public EventCallback OnMaskClick { get; set; }
[Parameter]
public TriggerBoundaryAdjustMode BoundaryAdjustMode { get; set; } = TriggerBoundaryAdjustMode.InView;
public TriggerType[] Trigger { get; set; } = new TriggerType[] { TriggerType.Hover };
/// <summary>
/// Manually set reference to triggering element.
/// </summary>
[Parameter]
public ElementReference TriggerReference
{
@ -138,6 +200,18 @@ namespace AntDesign.Internal
set => Ref = value;
}
/// <summary>
/// ChildElement with ElementReference set to avoid wrapping div.
/// </summary>
[Parameter]
public RenderFragment<ForwardRef> Unbound { get; set; }
/// <summary>
/// Toggles overlay viability.
/// </summary>
[Parameter]
public bool Visible { get; set; } = false;
[Inject]
protected DomEventService DomEventService { get; set; }
@ -288,6 +362,11 @@ namespace AntDesign.Internal
}
}
/// <summary>
/// Handle the trigger click.
/// </summary>
/// <param name="args">MouseEventArgs</param>
/// <returns></returns>
public virtual async Task OnClickDiv(MouseEventArgs args)
{
if (!IsButton)
@ -458,14 +537,28 @@ namespace AntDesign.Internal
return await JsInvokeAsync<HtmlElement>(JSInteropConstants.GetFirstChildDomInfo, Ref);
}
/// <summary>
/// Will hide the overlay.
/// </summary>
/// <returns></returns>
public async Task Close()
{
await _overlay.Hide(true);
}
/// <summary>
/// Checks if overlay is currently in visible state.
/// </summary>
/// <returns></returns>
public bool IsOverlayShow()
{
return _overlay != null ? _overlay.IsPopup() : false;
}
/// <summary>
/// Toggle overlay visibility.
/// </summary>
/// <param name="visible">boolean: visibility true/false</param>
public void SetVisible(bool visible) => Visible = visible;
}
}

57
components/dropdown/Dropdown.razor
View File

@ -7,18 +7,37 @@
@if (IsButton)
{
<div class="@ClassMapper.Class"
style="display: inline-block; width: fit-content; @Style"
id="@Id"
@onclick="OnClickDiv"
style="display: inline-block; width: @(Block ? "100%" : "fit-content" ); @Style"
id="@Id"
>
<CascadingValue Value="this" IsFixed="@true">
<DropdownGroupButton>
<LeftButton>
<Button @key="1" Size="@_buttonSize" Type="@_buttonType" Disabled="@Disabled">@ChildContent</Button>
<Button @key="1"
Size="@_buttonSize"
Type="@_buttonTypeLeft"
Disabled="@Disabled"
Danger="@_danger"
Ghost="@_ghost"
OnClick="@OnClick"
Style="@(Block ? "flex: 1 0 auto;" : "" )"
>
@ChildContent
</Button>
</LeftButton>
<RightButton>
<span @ref="@Ref">
<Button @key="2" Size="@_buttonSize" Type="@_buttonType" Disabled="@Disabled" OnClick="OnTriggerClick" Class="ant-dropdown-trigger" Icon="@_rightButtonIcon" />
<Button @key="2"
Size="@_buttonSize"
Type="@_buttonTypeRight"
Disabled="@Disabled"
OnClick="OnTriggerClick"
Class="ant-dropdown-trigger"
Icon="@_rightButtonIcon"
Danger="@_danger"
Loading="@_isLoading"
Style="@(Block ? "flex: 0 0 auto;" : "" )"
Ghost="@_ghost"/>
</span>
</RightButton>
</DropdownGroupButton>
@ -30,7 +49,7 @@
<div class="@ClassMapper.Class"
style="display: inline-block; width: fit-content; @Style"
id="@Id"
@ref="@Ref"
@ref="@Ref"
@onclick="OnClickDiv"
@onmouseenter="OnTriggerMouseEnter"
@onmouseleave="OnTriggerMouseLeave"
@ -47,13 +66,33 @@
@if (IsButton)
{
<CascadingValue Value="this" IsFixed="@true">
<DropdownGroupButton>
<DropdownGroupButton Style=@Style>
<LeftButton>
<Button @key="1" Size="@_buttonSize" Type="@_buttonType" Disabled="@Disabled">@Unbound(default)</Button>
<Button @key="1"
Size="@_buttonSize"
Type="@_buttonTypeLeft"
Disabled="@Disabled"
Danger="@_danger"
Ghost="@_ghost"
OnClick="@OnClick"
Style="@(Block ? "flex: 1 0 auto;" : "" )"
>
@Unbound(default)
</Button>
</LeftButton>
<RightButton>
<span @ref="@Ref">
<Button @key="2" Size="@_buttonSize" Type="@_buttonType" Disabled="@Disabled" OnClick="OnTriggerClick" Class="ant-dropdown-trigger" Icon="@_rightButtonIcon" />
<Button @key="2"
Size="@_buttonSize"
Type="@_buttonTypeRight"
Disabled="@Disabled"
OnClick="OnTriggerClick"
Class="ant-dropdown-trigger"
Icon="@_rightButtonIcon"
Loading="@_isLoading"
Danger="@_danger"
Style="@(Block ? "flex: 0 0 auto;" : "" )"
Ghost="@_ghost"/>
</span>
</RightButton>
</DropdownGroupButton>

54
components/dropdown/Dropdown.razor.cs
View File

@ -1,21 +1,24 @@
using System;
using System.Threading.Tasks;
using AntDesign.Internal;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace AntDesign
{
public partial class Dropdown : OverlayTrigger
{
[Parameter]
public Func<RenderFragment, RenderFragment, RenderFragment> ButtonsRender { get; set; }
internal Func<RenderFragment, RenderFragment, RenderFragment> ButtonsRender { get; set; }
internal bool Block { get; set; }
private string _rightButtonIcon = "ellipsis";
private string _buttonSize = AntSizeLDSType.Default;
private string _buttonType = ButtonType.Default;
private RenderFragment _leftButton;
private RenderFragment _rightButton;
private bool _danger;
private bool _ghost;
private bool _isLoading;
private string _buttonTypeRight = ButtonType.Default;
private string _buttonTypeLeft = ButtonType.Default;
protected void ChangeRightButtonIcon(string icon)
{
_rightButtonIcon = icon;
@ -30,11 +33,46 @@ namespace AntDesign
StateHasChanged();
}
protected void ChangeButtonType(string type)
protected void ChangeButtonDanger(bool danger)
{
_buttonType = type;
_danger = danger;
StateHasChanged();
}
protected void ChangeButtonGhost(bool ghost)
{
_ghost = ghost;
StateHasChanged();
}
protected void ChangeButtonLoading(bool isLoading)
{
_isLoading = isLoading;
StateHasChanged();
}
protected void ChangeButtonType((string LeftButton, string RightButton) type)
{
(_buttonTypeLeft, _buttonTypeRight) = type;
StateHasChanged();
}
/// <summary>
/// Handle the trigger click.
/// </summary>
/// <param name="args">MouseEventArgs</param>
/// <returns></returns>
public override async Task OnClickDiv(MouseEventArgs args)
{
if (!IsButton)
{
await OnTriggerClick();
await OnClick.InvokeAsync(args);
}
}
}
}

186
components/dropdown/DropdownButton.cs
View File

@ -1,4 +1,5 @@
using System.Text.Json;
using System;
using System.Text.Json;
using System.Threading.Tasks;
using AntDesign.JsInterop;
using Microsoft.AspNetCore.Components;
@ -7,10 +8,130 @@ namespace AntDesign
{
public class DropdownButton : Dropdown
{
/// <summary>
/// Option to fit button width to its parent width
/// </summary>
[Parameter]
public new bool Block
{
get => base.Block;
set => base.Block = value;
}
/// <summary>
/// Fully customizable button.
/// </summary>
[Parameter]
public new Func<RenderFragment, RenderFragment, RenderFragment> ButtonsRender
{
get => base.ButtonsRender;
set => base.ButtonsRender = value;
}
/// <summary>
/// Set the danger status of button
/// </summary>
[Parameter]
public bool Danger
{
get => _danger;
set
{
_danger = value;
ChangeButtonDanger(value);
}
}
/// <summary>
/// Used in situations with complex background, home pages usually.
/// </summary>
[Parameter]
public bool Ghost
{
get => _ghost;
set
{
_ghost = value;
ChangeButtonGhost(value);
}
}
private string _icon = "ellipsis";
/// <summary>
/// Icon that will be rendered in the right
/// button.
/// </summary>
[Parameter]
public string Icon
{
get => _icon;
set
{
_icon = value;
ChangeRightButtonIcon(value);
}
}
/// <summary>
/// Indicates if loading icon is going to be included.
/// If set to true, then dropdown will not be active.
/// </summary>
[Parameter]
public bool Loading
{
get => _loading;
set
{
_loading = value;
ChangeButtonLoading(value);
}
}
private string _size = AntSizeLDSType.Default;
/// <summary>
/// Button size.
/// </summary>
[Parameter]
public string Size
{
get => _size;
set
{
_size = value;
ChangeButtonSize(value);
}
}
private (string LeftButton, string RightButton) _type = (ButtonType.Default, ButtonType.Default);
private bool _loading;
private bool _danger;
private bool _ghost = false;
/// <summary>
/// Button type is a tuple where first item refers to LeftButton type
/// and second item refers to RightButton type.
/// </summary>
[Parameter]
public (string LeftButton, string RightButton) Type
{
get => _type;
set
{
_type = value;
ChangeButtonType(value);
}
}
public DropdownButton() => IsButton = true;
protected override void OnInitialized()
{
string prefixCls = "ant-btn";
ClassMapper.Clear();
Placement = PlacementType.BottomRight;
base.OnInitialized();
ClassMapper.If($"{prefixCls}-block", () => Block);
}
/// <summary>
@ -58,68 +179,5 @@ namespace AntDesign
await _overlay.Show(overlayLeft, overlayTop);
}
}
[Parameter]
public bool Loading
{
get => _loading;
set
{
_loading = value;
if (value)
{
_preLoadingIcon = _icon;
Icon = "loading";
}
else
{
Icon = _preLoadingIcon;
}
}
}
private string _preLoadingIcon;
private string _icon = "ellipsis";
[Parameter]
public string Icon
{
get => _icon;
set
{
if (!_loading || value == "loading")
{
_icon = value;
ChangeRightButtonIcon(value);
}
}
}
private string _size = AntSizeLDSType.Default;
[Parameter]
public string Size
{
get => _size;
set
{
_size = value;
ChangeButtonSize(value);
}
}
private string _type = ButtonType.Default;
private bool _loading;
[Parameter]
public string Type
{
get => _type;
set
{
_type = value;
ChangeButtonType(value);
}
}
public DropdownButton() => IsButton = true;
}
}

2
components/dropdown/internal/DropdownGroupButton.razor
View File

@ -1,7 +1,7 @@
@namespace AntDesign.Internal
@inherits AntDomComponentBase
<ButtonGroup Class="ant-dropdown-button">
<ButtonGroup Class="ant-dropdown-button" Style="@(Dropdown.Block ? $"display:flex; flex-direction:row;{Style}": Style)">
@if (Dropdown.ButtonsRender != null)
{
@Dropdown.ButtonsRender(LeftButton, RightButton)

5
site/AntDesign.Docs/Demos/Components/Button/demo/Basic.razor
View File

@ -1,6 +1,7 @@
<div>
<Button Type="primary">Primary</Button>
<Button>Default</Button>
<Button Type="dashed">Dashed</Button>
<Button Type="link">Link</Button>
<Button Type="@ButtonType.Dashed">Dashed</Button>
<Button Type="@ButtonType.Text">Text</Button>
<Button Type="@ButtonType.Link">Link</Button>
</div>

11
site/AntDesign.Docs/Demos/Components/Button/demo/Danger.razor
View File

@ -3,10 +3,13 @@
Primary
</Button>
<Button Danger>Default</Button>
<Button Type="dashed" Danger>
link
<Button Type="@ButtonType.Dashed" Danger>
Dashed
</Button>
<Button Type="link" Danger>
link
<Button Type="@ButtonType.Text" Danger>
Text
</Button>
<Button Type="@ButtonType.Link" Danger>
Link
</Button>
</div>

27
site/AntDesign.Docs/Demos/Components/Button/demo/Disabled.razor
View File

@ -7,20 +7,25 @@
<Button>Default</Button>
<Button Disabled>Default(disabled)</Button>
<br />
<Button Type="dashed">Dashed</Button>
<Button Type="dashed" Disabled>
<Button Type="@ButtonType.Dashed">Dashed</Button>
<Button Type="@ButtonType.Dashed" Disabled>
Dashed(disabled)
</Button>
<br />
<Button Type="link">Link</Button>
<Button Type="link" Disabled>
<Button Type="@ButtonType.Text">Text</Button>
<Button Type="@ButtonType.Text" Disabled>
Text(disabled)
</Button>
<br />
<Button Type="@ButtonType.Link">Link</Button>
<Button Type="@ButtonType.Link" Disabled>
Link(disabled)
</Button>
<br />
<Button Type="link" Danger>
<Button Type="@ButtonType.Link" Danger>
Danger Link
</Button>
<Button Type="link" Danger Disabled>
<Button Type="@ButtonType.Link" Danger Disabled>
Danger Link(disabled)
</Button>
<br />
@ -28,6 +33,16 @@
<Button Danger Disabled>
Danger Default(disabled)
</Button>
<br />
<Button Type="@ButtonType.Text" Danger>Danger Text</Button>
<Button Type="@ButtonType.Text" Danger Disabled>
Danger Text(disabled)
</Button>
<br />
<Button Type="@ButtonType.Link" Danger>Danger Link</Button>
<Button Type="@ButtonType.Link" Danger Disabled>
Danger Link(disabled)
</Button>
<div class="site-Button-Ghost-wrapper">
<Button Ghost>Ghost</Button>
<Button Ghost Disabled>

2
site/AntDesign.Docs/Demos/Components/Button/demo/block.md
View File

@ -1,5 +1,5 @@
---
order: 0
order: 8
title:
zh-CN: Block 按钮
en-US: Block Button

2
site/AntDesign.Docs/Demos/Components/Button/demo/danger.md
View File

@ -1,5 +1,5 @@
---
order: 9
order: 7
title:
zh-CN: 危险按钮
en-US: Danger Buttons

2
site/AntDesign.Docs/Demos/Components/Button/demo/ghost.md
View File

@ -1,5 +1,5 @@
---
order: 8
order: 6
title:
zh-CN: 幽灵按钮
en-US: Ghost Button

23
site/AntDesign.Docs/Demos/Components/Button/doc/index.en-US.md
View File

@ -24,3 +24,26 @@ And 4 other properties additionally.
- `ghost`: used in situations with complex background, home pages usually.
- `disabled`: when actions is not available.
- `loading`: add loading spinner in button, avoiding multiple submits too.
## API
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| Block | Option to fit button width to its parent width | bool | false |
| ChildContent | Content of the button. | RenderFragment | - |
| Danger | Set the danger status of button | bool | false |
| Disabled | Whether the `Button` is disabled. | bool | false |
| Ghost | Make background transparent and invert text and border colors | bool | false |
| HtmlType | Set the original html `type` of `button`, see: [MDN]('https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type') | string | `button` |
| Icon | Set the icon component of button | string | - |
| Loading | Set the loading status of button | bool | false |
| OnClick | Callback when `Button` is clicked | Action | - |
| OnClickStopPropagation | Do not propagate events when button is clicked. | bool | false |
| Search | Adds class `ant-input-search-button` to the button. | bool | false |
| Shape | Can set button shape: `circle` &#124; `round` or `null` (default, which is rectangle). | string | null |
| Size | Set the size of `Button`. | AntSizeLDSType | `AntSizeLDSType.Default` |
| Type | Type of the button. | ButtonType | `ButtonType.Default` |

21
site/AntDesign.Docs/Demos/Components/Button/doc/index.zh-CN.md
View File

@ -25,3 +25,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。
- 禁用：行动点不可用的时候，一般需要文案解释。
- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
## API
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| Block | 将按钮宽度调整为其父宽度的选项 | bool | false |
| ChildContent | Content of the button. | RenderFragment | - |
| Danger | 设置危险按钮 | bool | false |
| Disabled | 按钮失效状态 | bool | false |
| Ghost | 幽灵属性，使按钮背景透明 | bool | false |
| HtmlType | 设置 button 原生的 type 值，可选值请参考 [HTML 标准]('https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type') | string | `button` |
| Icon | 设置按钮的图标组件 | string | - |
| Loading | 设置按钮载入状态 | bool | false |
| OnClick | Callback when `Button` is clicked | Action | - |
| OnClickStopPropagation | Do not propagate events when button is clicked. | bool | false |
| Search | Adds class `ant-input-search-button` to the button. | bool | false |
| Shape | Can set button shape: `circle` &#124; `round` or `null` (default, which is rectangle). | string | null |
| Size | 设置按钮大小 | AntSizeLDSType | `AntSizeLDSType.Default` |
| Type | 设置按钮类型 | ButtonType | `ButtonType.Default` |

5
site/AntDesign.Docs/Demos/Components/Dropdown/demo/Basic.razor
View File

@ -1,4 +1,7 @@
<Dropdown>
<Dropdown >
</Dropdown>
<Dropdown>
<Overlay>
<Menu>
<MenuItem>

46
site/AntDesign.Docs/Demos/Components/Dropdown/demo/DropdownButtonDemo.razor
View File

@ -1,4 +1,4 @@
<Divider Orientation="left" Plain>Div</Divider>
<Divider Orientation="left">Div</Divider>
<Space Direction="@DirectionVHType.Vertical" Style="width: 100%">
<SpaceItem>
<Space Size=@(("8", "16")) Wrap>
@ -13,7 +13,7 @@
</DropdownButton>
</SpaceItem>
<SpaceItem>
<DropdownButton Icon="user">
<DropdownButton Icon="user" Type="@((ButtonType.Dashed, ButtonType.Dashed))">
<Overlay>
@_overlayMenu
</Overlay>
@ -23,6 +23,36 @@
</DropdownButton>
</SpaceItem>
<SpaceItem>
<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Type="@((ButtonType.Primary, ButtonType.Default))">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
Primary
</ChildContent>
</DropdownButton>
</SpaceItem>
<SpaceItem>
<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Danger="true">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
Danger
</ChildContent>
</DropdownButton>
</SpaceItem>
<SpaceItem Class="site-button-ghost-wrapper">
<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Ghost="true">
<Overlay>
@_overlayMenu
</Overlay>
<ChildContent>
Ghost
</ChildContent>
</DropdownButton>
</SpaceItem>
<SpaceItem>
<DropdownButton OnClick='e => { Console.WriteLine("Click on left button."); }' Disabled="@true">
<Overlay>
@_overlayMenu
@ -47,7 +77,7 @@
</DropdownButton>
</SpaceItem>
<SpaceItem>
<Dropdown>
<Dropdown Trigger="@(new TriggerType[] { TriggerType.Click })" OnClick='e => { Console.WriteLine("Dropdown button clicked."); }'>
<Overlay>
@_overlayMenu
</Overlay>
@ -59,7 +89,7 @@
</Space>
</SpaceItem>
</Space>
<Divider Orientation="left" Plain>Unbound</Divider>
<Divider Orientation="left">Unbound</Divider>
<Space Direction="@DirectionVHType.Vertical" Style="width: 100%">
<SpaceItem>
<Space Size=@(("8", "16")) Wrap>
@ -122,7 +152,7 @@
</DropdownButton>
</SpaceItem>
<SpaceItem>
<Dropdown>
<Dropdown Trigger="@(new TriggerType[] { TriggerType.Click })" OnClick='e => { Console.WriteLine("Dropdown button clicked."); }'>
<Overlay>
@_overlayMenu
</Overlay>
@ -134,6 +164,12 @@
</Space>
</SpaceItem>
</Space>
<style>
.site-button-ghost-wrapper {
background: rgb(190, 200, 200);
padding: 26px 16px 16px;
}
</style>
@code
{
private RenderFragment _overlayMenu =@<Menu>

47
site/AntDesign.Docs/Demos/Components/Dropdown/doc/index.en-US.md
View File

@ -18,3 +18,50 @@ There are 2 rendering approaches for `Dropdown`:
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Dropdown>` and depending on the child element type (please refer to the first example):
- html tag: has to have its `@ref` set to `@context.Current`
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
## API
### Common API
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | `Dropdown` trigger (link, button, etc) | RenderFragment | - |
| Class | Specifies one or more class names for an DOM element. | string | - |
| ComplexAutoCloseAndVisible | Both auto-off and Visible control close | bool | false |
| Disabled | Whether the `Dropdown` is disabled. | bool | false |
| Id | (not used in Unbound) Id of the wrapping div. | string | - |
| InlineFlexMode | (not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | bool | false |
| IsButton | Behave like a button. For `DropdownButton` is always `true`. | bool | false |
| OnClick | Callback when `Dropdown` is clicked | Action | - |
| OnMaskClick | Callback - equivalent of OnMouseUp event on the `Dropdown` trigger. | Action | - |
| OnMouseEnter | Callback when mouse enters `Dropdown` boundaries. | Action | - |
| OnMouseLeave | Callback when mouse leaves `Dropdown` boundaries. | Action | - |
| OnOverlayHidding | Callback when overlay is hiding. | Action<bool> | - |
| OnVisibleChange | Callback when overlay visibility is changing. | Action<bool> | - |
| Overlay | Overlay content (what will be rendered after `Dropdown` is triggered, the dropdown menu). | RenderFragment | - |
| OverlayClassName | The class name of the dropdown root element | string | - |
| OverlayEnterCls | Css class added to overlay when overlay is shown. | string | - |
| OverlayHiddenCls | Css class added to overlay when overlay is hidden. | string | - |
| OverlayLeaveCls | Css class added to overlay when overlay is hiding. | string | - |
| OverlayStyle | The style of the dropdown root element. | string | - |
| Placement | The position of the `Dropdown` overlay relative to the target, which can be one of `Top` `Left` `Right` `Bottom` `TopLeft` `TopRight` `BottomLeft` `BottomRight` `LeftTop` `LeftBottom` `RightTop` `RightBottom` | PlacementType | `PlacementType.BottomLeft` | |
| PlacementCls | Override default placement class which is based on `Placement` parameter. | string | - |
| PopupContainerSelector | Define what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | string | "body" |
| Style | (not used in Unbound) Style of the wrapping div. | string | - |
| Trigger | `Dropdown` trigger mode. Could be multiple by passing an array | TriggerType[] | `TriggerType.Hover` | |
| TriggerReference | Manually set reference to element triggering `Dropdown`. | ElementReference | - | |
| Unbound | ChildElement with `ElementReference` set to avoid wrapping div. | RenderFragment<ForwardRef> | - |
| Visible | Whether the `Dropdown` menu is currently visible. | bool | false |
### DropdownButton
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| Block | Option to fit button width to its parent width | bool | false | 0.9
| ButtonsRender |Fully customizable button. | Func<RenderFragment, RenderFragment, RenderFragment> | - |
| Danger | Set the danger status of button | bool | false | 0.9
| Ghost | Make background transparent and invert text and border colors | bool | false | 0.9
| Icon | Icon (appears on the right) | string | `ellipsis` |
| Loading | Show loading indicator. You have to write the loading logic on your own. | bool | false | 0.9
| Size | Size of the button, the same as [`Button`](en-US/components/button) | AntSizeLDSType | `AntSizeLDSType.Default` |
| Type | Type of the button, the same as [`Button`](en-US/components/button). Left and right button type can be set independently. | Tuple<(ButtonType LeftButton, ButtonType RightButton)> | `(LeftButton: ButtonType.Default, RightButton: ButtonType.Default)` | 0.9

55
site/AntDesign.Docs/Demos/Components/Dropdown/doc/index.zh-CN.md
View File

@ -11,3 +11,58 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
## 何时使用
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
## Two types
There are 2 rendering approaches for `Dropdown`:
1. Wraps child element (content of the `Dropdown`) with a `<div>` (default approach).
2. Child element is not wrapped with anything. This approach requires usage of `<Unbound>` tag inside `<Dropdown>` and depending on the child element type (please refer to the first example):
- html tag: has to have its `@ref` set to `@context.Current`
- `Ant Design Blazor` component: has to have its `RefBack` attribute set to `@context`.
## API
### Common API
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| BoundaryAdjustMode | `Dropdown` adjustment strategy (when for example browser resize is happening) | TriggerBoundaryAdjustMode | TriggerBoundaryAdjustMode.InView |
| ChildContent | `Dropdown` trigger (link, button, etc) | RenderFragment | - |
| Class | Specifies one or more class names for an DOM element. | string | - |
| ComplexAutoCloseAndVisible | 自动关闭功能和Visible参数同时生效 | bool | false |
| Disabled | 菜单是否禁用 | bool | false |
| Id | (not used in Unbound) Id of the wrapping div. | string | - |
| InlineFlexMode | (not used in Unbound) Sets wrapping div style to `display: inline-flex;`. | bool | false |
| IsButton | Behave like a button. For `DropdownButton` is always `true`. | bool | false |
| OnClick | Callback when `Dropdown` is clicked | Action | - |
| OnMaskClick | Callback - equivalent of OnMouseUp event on the `Dropdown` trigger. | Action | - |
| OnMouseEnter | Callback when mouse enters `Dropdown` boundaries. | Action | - |
| OnMouseLeave | Callback when mouse leaves `Dropdown` boundaries. | Action | - |
| OnOverlayHidding | Callback when overlay is hiding. | Action<bool> | - |
| OnVisibleChange | Callback when overlay visibility is changing. | Action<bool> | - |
| Overlay | Overlay content (what will be rendered after `Dropdown` is triggered, the dropdown menu). | RenderFragment | - |
| OverlayClassName | 下拉根元素的类名称 | string | - |
| OverlayEnterCls | Css class added to overlay when overlay is shown. | string | - |
| OverlayHiddenCls | Css class added to overlay when overlay is hidden. | string | - |
| OverlayLeaveCls | Css class added to overlay when overlay is hiding. | string | - |
| OverlayStyle | 下拉根元素的样式 | string | - |
| Placement | The position of the `Dropdown` overlay relative to the target, which can be one of `Top` `Left` `Right` `Bottom` `TopLeft` `TopRight` `BottomLeft` `BottomRight` `LeftTop` `LeftBottom` `RightTop` `RightBottom` | PlacementType | `PlacementType.BottomLeft` | |
| PlacementCls | Override default placement class which is based on `Placement` parameter. | string | - |
| PopupContainerSelector | Define what is going to be the container of the overlay. Example use case: when overlay has to be contained in a scrollable area. | string | "body" |
| Style | (not used in Unbound) Style of the wrapping div. | string | - |
| Trigger | `Dropdown` trigger mode. Could be multiple by passing an array | TriggerType[] | `TriggerType.Hover` | |
| TriggerReference | Manually set reference to element triggering `Dropdown`. | ElementReference | - | |
| Unbound | ChildElement with `ElementReference` set to avoid wrapping div. | RenderFragment<ForwardRef> | - |
| Visible | 菜单是否显示 | bool | false |
### DropdownButton
| Property | Description | Type | Default Value | Version
| --- | --- | --- | --- |
| Block | 将按钮宽度调整为其父宽度的选项 | bool | false | 0.9
| ButtonsRender | 自定义左右两个按钮 | Func<RenderFragment, RenderFragment, RenderFragment> | - |
| Danger | 设置危险按钮 | bool | false | 0.9
| Ghost | 幽灵属性，使按钮背景透明 | bool | false | 0.9
| Icon | 右侧的 icon | string | `ellipsis` |
| Loading | 设置按钮载入状态 | bool | false | 0.9
| Size | 按钮大小，和 [`Button`](zh-CN/components/button) 一致 | AntSizeLDSType | `AntSizeLDSType.Default` |
| Type | Type of the button, the same as [`Button`](zh-CN/components/button). Left and right button type can be set independently. | Tuple<(ButtonType LeftButton, ButtonType RightButton)> | `(LeftButton: ButtonType.Default, RightButton: ButtonType.Default)` | 0.9