mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-02 03:57:38 +08:00
fix(module: avatar): code cleaning, doc update (#808)
Co-authored-by: Lars Diederich <diederich@evodata.de> Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
ElDiddi
GitHub
parent
221ff173c2
commit
ca35485370
@ -53,7 +53,7 @@ namespace AntDesign
|
||||
public string Icon { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<ErrorEventArgs> Error { get; set; }
|
||||
public EventCallback<ErrorEventArgs> OnError { get; set; }
|
||||
|
||||
[CascadingParameter]
|
||||
public AvatarGroup Group { get; set; }
|
||||
@ -66,9 +66,9 @@ namespace AntDesign
|
||||
/// </summary>
|
||||
internal bool Overflow { get; set; }
|
||||
|
||||
private bool _hasText = false;
|
||||
private bool _hasText;
|
||||
private bool _hasSrc = true;
|
||||
private bool _hasIcon = false;
|
||||
private bool _hasIcon;
|
||||
|
||||
private string _textStyles = "";
|
||||
|
||||
@ -86,19 +86,17 @@ namespace AntDesign
|
||||
{
|
||||
base.OnInitialized();
|
||||
|
||||
|
||||
Group?.AddAvatar(this);
|
||||
|
||||
|
||||
SetClassMap();
|
||||
SetSizeStyle();
|
||||
}
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
this._hasText = string.IsNullOrEmpty(this.Src) && (!string.IsNullOrEmpty(this._text) || _childContent != null);
|
||||
this._hasIcon = string.IsNullOrEmpty(this.Src) && !string.IsNullOrEmpty(this.Icon);
|
||||
this._hasSrc = !string.IsNullOrEmpty(this.Src);
|
||||
_hasText = string.IsNullOrEmpty(Src) && (!string.IsNullOrEmpty(_text) || _childContent != null);
|
||||
_hasIcon = string.IsNullOrEmpty(Src) && !string.IsNullOrEmpty(Icon);
|
||||
_hasSrc = !string.IsNullOrEmpty(Src);
|
||||
|
||||
base.OnParametersSet();
|
||||
}
|
||||
@ -116,17 +114,17 @@ namespace AntDesign
|
||||
|
||||
private async Task ImgError(ErrorEventArgs args)
|
||||
{
|
||||
await Error.InvokeAsync(args);
|
||||
this._hasSrc = false;
|
||||
this._hasIcon = false;
|
||||
this._hasText = false;
|
||||
if (!string.IsNullOrEmpty(this.Icon))
|
||||
await OnError.InvokeAsync(args);
|
||||
_hasSrc = false;
|
||||
_hasIcon = false;
|
||||
_hasText = false;
|
||||
if (!string.IsNullOrEmpty(Icon))
|
||||
{
|
||||
this._hasIcon = true;
|
||||
_hasIcon = true;
|
||||
}
|
||||
else if (!string.IsNullOrEmpty(this._text))
|
||||
else if (!string.IsNullOrEmpty(_text))
|
||||
{
|
||||
this._hasText = true;
|
||||
_hasText = true;
|
||||
}
|
||||
|
||||
_waitingCaclSize = true;
|
||||
@ -136,22 +134,21 @@ namespace AntDesign
|
||||
{
|
||||
ClassMapper.Clear()
|
||||
.Add(_prefixCls)
|
||||
.GetIf(() => $"{_prefixCls}-{this._sizeMap[this.Size]}", () => _sizeMap.ContainsKey(Size))
|
||||
.GetIf(() => $"{_prefixCls}-{this.Shape}", () => !string.IsNullOrEmpty(Shape))
|
||||
.GetIf(() => $"{_prefixCls}-{_sizeMap[Size]}", () => _sizeMap.ContainsKey(Size))
|
||||
.GetIf(() => $"{_prefixCls}-{Shape}", () => !string.IsNullOrEmpty(Shape))
|
||||
.If($"{_prefixCls}-icon", () => !string.IsNullOrEmpty(Icon))
|
||||
.If($"{_prefixCls}-image", () => _hasSrc)
|
||||
;
|
||||
.If($"{_prefixCls}-image", () => _hasSrc);
|
||||
}
|
||||
|
||||
private void SetSizeStyle()
|
||||
{
|
||||
if (decimal.TryParse(this.Size, out var pxSize))
|
||||
if (decimal.TryParse(Size, out var pxSize))
|
||||
{
|
||||
var size = StyleHelper.ToCssPixel(pxSize.ToString(CultureInfo.InvariantCulture));
|
||||
Style += $";width:{size};";
|
||||
Style += $"height:{size};";
|
||||
Style += $"line-height:{size};";
|
||||
if (this._hasIcon)
|
||||
if (_hasIcon)
|
||||
{
|
||||
Style += $"font-size:calc(${size} / 2)";
|
||||
}
|
||||
@ -160,18 +157,18 @@ namespace AntDesign
|
||||
|
||||
private async Task CalcStringSize()
|
||||
{
|
||||
if (!this._hasText)
|
||||
if (!_hasText)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var childrenWidth = (await this.JsInvokeAsync<Element>(JSInteropConstants.GetDomInfo, this.TextEl))?.offsetWidth ?? 0;
|
||||
var avatarWidth = (await this.JsInvokeAsync<DomRect>(JSInteropConstants.GetBoundingClientRect, this.Ref))?.width ?? 0;
|
||||
var childrenWidth = (await JsInvokeAsync<Element>(JSInteropConstants.GetDomInfo, TextEl))?.offsetWidth ?? 0;
|
||||
var avatarWidth = (await JsInvokeAsync<DomRect>(JSInteropConstants.GetBoundingClientRect, Ref))?.width ?? 0;
|
||||
var scale = childrenWidth != 0 && avatarWidth - 8 < childrenWidth ? (avatarWidth - 8) / childrenWidth : 1;
|
||||
this._textStyles = $"transform: scale({scale}) translateX(-50%);";
|
||||
if (decimal.TryParse(this.Size, out var pxSize))
|
||||
_textStyles = $"transform: scale({scale}) translateX(-50%);";
|
||||
if (decimal.TryParse(Size, out var pxSize))
|
||||
{
|
||||
this._textStyles += $"lineHeight:{pxSize}px;";
|
||||
_textStyles += $"lineHeight:{pxSize}px;";
|
||||
}
|
||||
|
||||
StateHasChanged();
|
||||
|
||||
@ -9,22 +9,24 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
### Avatar Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Shape | Set avatar shape | string | null |
|
||||
| Size | Set avatar size | `string|AntSizeLDSType{"default","large","small"}` | AntSizeLDSType.Default |
|
||||
| Src | Set resource address of the avatar image | string | |
|
||||
| SrcSet | Set responsive resource address where avatar type is image | string | |
|
||||
| Alt | Replace text when the image can't display | string | |
|
||||
| Icon | Set avatra icon | string | |
|
||||
| Error | Callback function when the image load faile,return false will close fallback action of default | function()=>ErrorEventArgs | |
|
||||
| Alt | This attribute defines the alternative text describing the image | string | - | |
|
||||
| Icon | Custom icon type for an icon avatar | string | - | |
|
||||
| OnError | Handler when img load error | EventCallback<ErrorEventArgs> | - | |
|
||||
| Shape | The shape of avatar | string | - | |
|
||||
| Size | The size of the avatar `default` \| `small` \| `large` | string | `default` | |
|
||||
| Src | The address of the image for an image avatar | string | - | |
|
||||
| SrcSet | A list of sources to use for different screen resolutions | string | - | |
|
||||
|
||||
### AvaterGroup
|
||||
> Tip: You can set `Icon` or `ChildContent` as the fallback for image load error, with the priority of `Icon` > `ChildContent`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| ChildContent | Additional Content | RenderFragment | - |
|
||||
| MaxCount | Group max show number | int | - |
|
||||
| MaxStyle | Group style when over the max show number | string | - |
|
||||
### AvatarGroup Props
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| MaxCount | Max avatars to show | int | - | |
|
||||
| MaxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
|
||||
| MaxStyle | The style of excess avatar style | string | - | |
|
||||
|
||||
@ -10,23 +10,24 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
|
||||
|
||||
## API
|
||||
|
||||
### Avatar
|
||||
### Avatar Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Shape | 指定头像的形状 | string | null |
|
||||
| Size | 设置头像的大小 | `string|AntSizeLDSType{"default","large","small"}` | AntSizeLDSType.Default |
|
||||
| Src | 图片类头像的资源地址 | string | |
|
||||
| SrcSet | 设置图片类头像响应式资源地址 | string | |
|
||||
| Alt | 图像无法显示时的替代文本 | string | |
|
||||
| Icon | 设置头像图标 | string | |
|
||||
| Error | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | function()=>ErrorEventArgs | |
|
||||
| Alt | 图像无法显示时的替代文本 | string | - | |
|
||||
| Icon | 设置头像的自定义图标 | string | - | |
|
||||
| OnError | 图片加载失败的事件 | EventCallback<ErrorEventArgs> | - | |
|
||||
| Shape | 指定头像的形状 | string | - | |
|
||||
| Size | 设置头像的大小 `default` \| `small` \| `large` | string | `default` | |
|
||||
| Src | 图片类头像的资源地址或者图片元素 | string | - | |
|
||||
| SrcSet |设置图片类头像响应式资源地址 | string | - | |
|
||||
|
||||
> Tip：你可以设置 `Icon` 或 `ChildContent` 作为图片加载失败的默认 fallback 行为，优先级为 `Icon` > `ChildContent`
|
||||
|
||||
### AvaterGroup
|
||||
### AvatarGroup Props
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| ChildContent | 自定义内容 | RenderFragment | - |
|
||||
| MaxCount | 组最大显示数量 | int | - |
|
||||
| MaxStyle | 组合并部分显示样式 | string | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| MaxCount | 显示的最大头像个数 | int | - | |
|
||||
| MaxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
|
||||
| MaxStyle | 多余头像样式 | string | - | |
|
||||
|
||||
Loading…
Reference in New Issue
Block a user