将图标添加到 Ant Designs Blazor (DescriptionsItem) 的标题属性

问题描述

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

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

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

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

但这不起作用，<Title> 是 HTML 标题（如 h1,h2,...）的独立组件，这意味着它们都在没有任何标题的 value 部分中呈现：

我找不到在 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>

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

解决方法

你很幸运！ 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 用于标题之上