2

我无法在 Chrome 和 IE中更改路标元素的图标，即clr-signpostClarity Design System （版本：0.9.0）。路标显示默认信息 (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>
4

2 回答 2

3

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

于 2018-04-02T17:17:20.230 回答
1

我认为您应该将 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>

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

于 2018-04-01T19:44:27.157 回答