2

I am unable to change the icon of the signpost element i.e. clr-signpost of Clarity Design System (Version: 0.9.0), both in Chrome & IE. The signpost is showing the default info (i) icon. No error is displayed in console.

In my Angular 4 project I am using the signpost element inside a column of a datatable of PrimeNG (Version: 4.1.1).

Does anyone have any ideas in this issue?

Here is the 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>
iPaul
  • 423
  • 1
  • 7
  • 22

2 Answers2

3

We added custom signpost triggers in an alpha release of v10. It looks like you are using v9 and Signposts only have a default trigger. If you upgrade to v10 or later you will enable the custom trigger declaration on your component.

hippeelee
  • 1,788
  • 1
  • 10
  • 21
  • Yes! This was the reason...I have upgraded the version to v.10, and now it is running with whatever icon / button link I wanted. Great help. – iPaul Apr 02 '18 at 19:41
1

I think you should add the class attribute to the to the clr-icon and give it the icon class you want. Also I found this code at the Clarity that describies how to use custom triggers

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

you will find more examples under the Custom Triggers section

H.Hinn
  • 73
  • 2
  • 7
  • if the problem remains the same try adding this code to your angular component encapsulation: ViewEncapsulation.None under the component decorator – H.Hinn Apr 01 '18 at 19:46
  • Thanks for your reply. But the class your are talking about will introduce some added features (like, solid & badge info) to the icon... though I have tried all of these, nothing was working. Its seems the 'clrSignpostTrigger' is not working some how as i think. – iPaul Apr 02 '18 at 06:38