Question

我无法更改路标元素的图标，即 Clarity Design System （版本：0.9.0）的clr-signpost Chrome＆amp; IE浏览器。路标显示默认信息（i）图标。控制台中没有显示错误。

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

有没有人对此问题有任何想法？

这是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

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

Answer 2

我认为你应该将class属性添加到clr-icon并为它提供你想要的图标类。我还在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>

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

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

2 个答案: