无法更改 Clarity Design System 的路标图标

Question

我无法更改 signpost 元素的图标，即 Clarity Design System 的 clr-signpost（版本: 0.9.0)，都在 Chrome 和 IE 中。路标显示默认信息 (i) 图标。控制台中没有显示错误。

在我的 Angular 4 项目中，我在 PrimeNG（版本：4.1.1）的数据表的列中使用路标元素。

有人对这个问题有什么想法吗？

这里是 HTML:

<!-- PrimeNG Datatable -->
<p-datatable>
   ....
   ....
   <p-column field="story" [style]="{'overflow':'visible', 'text-align':'center'}" header="Story" styleClass="col-button">
       <ng-template let-item="rowData" pTemplate="body">
           <div style="padding: 0px; margin: 0px; text-align:center;">                                
                <clr-signpost>
                    <clr-icon clrSignpostTrigger shape="avatar"></clr-icon>
                    <clr-signpost-content *clrIfOpen>
                       <p><code class="clr-code">{{item.story}}</code></p>
                    </clr-signpost-content>
                </clr-signpost>
           </div>                                                    
      </ng-template>
   </p-column>               
</p-dataTable>

Answer 1

我认为您应该将 class 属性添加到 clr-icon 并为其提供您想要的图标 class。我还在 Clarity 上找到了这段代码，它描述了如何使用自定义触发器

<div class="signpost-item">
        <h6>Clarity Icon</h6>
        <clr-signpost>
            <clr-icon shape="avatar" 
                      class="is-solid has-badge-info" 
                      clrSignpostTrigger>
            </clr-icon>
            <clr-signpost-content [clrPosition]="'bottom-middle'" *clrIfOpen>
                Lorem ipsum...
            </clr-signpost-content>
        </clr-signpost>
</div>

您将在自定义触发器下找到更多示例部分

Answer 2

我们在 alpha release of v10 中添加了自定义路标触发器。看起来您使用的是 v9，而 Signposts 只有默认触发器。如果您升级到 v10 或更高版本，您将在您的组件上启用自定义触发器声明。

无法更改 Clarity Design System 的路标图标

Unable to change signpost icon of Clarity Design System

primeng

angular

primeng-datatable

vmware-clarity