HtmlAttribute 特性

快速通过参数来设置 HTML 的属性

示例

Anchor.razor

@inherits BlazorComponentBase

<a @attributes="AdditionalAttributes">@ChildContent</a>

@code{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][HtmlAttribute]public string? Title { get; set; }
    [Parameter][HtmlAttribute("href")]public string? Link { get; set; }
    [Parameter][HtmlAttribute]public LinkTarget Target { get; set; } = LinkTarget.Blank;
    
    public enum LinkTarget
    {
        [HtmlAttrbute("_blank")]Blank,
        [HtmlAttrbute("_parent")]Parent,
        [HtmlAttrbute("_top")]Top,
    }
}

Anchor.cs

public class Anchor : BlazorComponentBase, IHasChildContent
{
    [Parameter]public RenderFragment? ChildContent { get; set; }
    [Parameter][HtmlAttribute]public string? Title { get; set; }
    [Parameter][HtmlAttribute("href")]public string? Link { get; set; }
    [Parameter][HtmlAttribute]public LinkTarget Target { get; set; } = LinkTarget.Blank;
    
    public enum LinkTarget
    {
        [HtmlAttrbute("_blank")]Blank,
        [HtmlAttrbute("_parent")]Parent,
        [HtmlAttrbute("_top")]Top,
    }
}

Index.razor

<Anchor Link="https://github.com" Title="github" Target="LinkTarget.Top">Go Github</Anchor>

<a href="https://github.com" title="github" target="_top">Go Github</a>

bool 类型

当参数值是 true 时可以固定 HTML 属性的值

[Parameter][HtmlAttribute("collapse","toggle")]public bool Collapse { get; set; }

<Component Collapse/>
<div collapse="toggle"></div>

当参数值是 true 时设置 HTML 属性的值是 true 字符串

[Parameter][HtmlAttribute("toggle")]public bool Collapse { get; set; }

<Component Collapse/>
<div toggle="true"></div>

其他数据类型

参数的值会是 HTML 属性的值

[Parameter][HtmlAttribute("href")]public string? Link { get; set; }

<Component Link="www.github.com"/>
<a href="www.github.com"></a>