在 Ant Designs Blazor (DescriptionsItem) 的 title 属性中添加图标

Question

Ant Design Blazor 有一个 descriptions component for generating key/value pair elements. I'd like to add an icon and tooltip 作为 key/title。问题是，标题设置为这样的属性：

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

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

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

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

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

但我希望标题中有图标。有办法实现吗？

Answer 1

你走运了！ The source says the developers thought of this and added a 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>

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

在 Ant Designs Blazor (DescriptionsItem) 的 title 属性中添加图标

Adding icons to a title attribute of Ant Designs Blazor (DescriptionsItem)

asp.net-core

blazor

blazor-server-side

asp.net-core-5.0

ant-design-blazor