首页 文章

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

提问于
浏览 次
2

我无法在Chrome和IE中更改 signpost 元素的图标，即 clr-signpost 的Clarity Design System（版本：0.9.0） . 路标显示默认信息（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>
angular primeng primeng-datatable vmware-clarity

2 回答

  • 3

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

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

    回复于
  • 0

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

    回复于

相关问题