将图标添加到 Ant Designs Blazor 的标题属性（DescriptionsItem）答案

【问题标题】：Adding icons to a title attribute of Ant Designs Blazor (DescriptionsItem)将图标添加到 Ant Designs Blazor 的标题属性（DescriptionsItem）
【发布时间】：2021-05-27 18:52:30
【问题描述】：

Ant Design Blazor 有一个 descriptions component 用于生成键/值对元素。我想添加一个icon 和tooltip 作为键/标题。问题是，标题被设置为这样的属性：

<DescriptionsItem Title="Billing Mode">Prepaid</DescriptionsItem>

我尝试将Title 设置为子元素，因为这将允许我在其中添加任何其他组件：

<DescriptionsItem>
    <Title>My title</Title>
    My Text
</DescriptionsItem>

但这不起作用，<Title> 是像h1, h2, ... 这样的 html 标题的独立组件，这意味着两者都在没有任何标题的值部分呈现：

我找不到在 title 属性中呈现其他组件的方法，它只能在 body/value 中像这样工作：

<DescriptionsItem Title="Created">
    <Tooltip Placement="@PlacementType.Bottom" Title="creationIconTitle">
        <Icon Type="plus-circle" Theme="outline" />
    </Tooltip>
    @Community.Created.ToLocalTime().ToString("G")
</DescriptionsItem>

但我想在标题中添加图标。有没有办法实现这一点？

【问题讨论】：

标签： asp.net-core blazor blazor-server-side asp.net-core-5.0 ant-design-blazor

【解决方案1】：

你很幸运！ The source 表示开发人员想到了这一点并添加了TitleTemplate RenderFragment。因此，您可以执行以下操作：

<Descriptions Title="Descriptions">
    <DescriptionsItem>
        <TitleTemplate>
            <AntDesign.Tooltip Placement="@PlacementType.Bottom">
                <AntDesign.Icon Type="plus-circle" Theme="outline" />
            </AntDesign.Tooltip>
            31.10.2008 17:04:32
        </TitleTemplate>
    </DescriptionsItem>
</Descriptions>

如果已定义 source，则此 TitleTemplate 将用于标题上

【讨论】：