Angular - Как использовать индивидуальные значки PrimeNG - PullRequest
Новая
       79

Angular - Как использовать индивидуальные значки PrimeNG

0 голосов
/ 12 октября 2018

Я использую primeNG в одном из моих проектов.Я использовал таблицу с сортировкой от PrimeNG.Я хочу использовать настраиваемые значки для сортировки.

Любая идея, как переопределить существующие значки primeNG.

Версия PrimeNG - 6.1.4

1 Ответ

0 голосов
/ 12 октября 2018

Создайте класс для вашей таблицы, как я создал test-data : 

<p-table #tt [value]="testdata" class="test-data" selectionMode="single" [lazy]="true"
        [lazyLoadOnInit] = "false" (onLazyLoad)="loadDataLazily($event)">
<ng-template pTemplate="header">
                <tr>
                    <th *ngFor="let col of cols" [pSortableColumn]="col.header">
                        {{col.header}}
                        <p-sortIcon [field]="col.header" ariaLabel="Activate to sort"></p-sortIcon>
                    </th>
                </tr>
            </ng-template>

Теперь переопределите ниже CSS в вашем style.css и используйте свой собственный код типа контента: 

.test-data .pi-sort:before {
    content: "\02C4"
    }
    .test-data .pi-sort-down:before {
        content: "\02C5";
    }
    .test-data .pi-sort-up:before {
        content: "\e914";
    }

Это изменит значок вашей таблицы, где бы вы ни использовали class = "test-data".Больше кода типа контента здесь код типа контента и здесь

...