Как использовать PrimeIcons с пагинатором таблицы / сетки
Я пытаюсь создать отличный шрифт, поэтому я пытаюсь полностью заменить его на PrimeIcons.
<p-table #dt id='incidents-grid' [value]='incidents' [totalRecords]='totalRecords'
expandableRows='true' [responsive]='true' dataKey='IncidentId' *ngIf='visible'
[rows]='5' [paginator]='true' [rowsPerPageOptions]='[5,10,50]'
[lazy]='true' (onLazyLoad)='loadIncidentsLazy($event)' [loading]='loading'>
Документ paginator ничего не показывает.
Я использую Angular 6 и primeicons 1.0.0-beta.10 и primeng 5.2.4 для package.json. Я заменил 'fa fa.edit' на 'pi pi.pencil' и т. д. Я удалил @import "font-awesome / css / font-awesome.min.css"; из style.css, а затем пагинатор для приведенной выше p-таблицы имеет - 1 2 - (отсутствует <>), а во всех раскрывающихся списках отсутствует курсор вниз.
Ответы 2
Я создал ваш сценарий, я использовал primeNg 6:
- Шаг 1: npm install primeicons --save
- Шаг 2. Импортируйте основные значки в style.css или angular.json
Я добавил файл в style.css, как показано ниже:
@import '../node_modules/primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/omega/theme.css';
@import '../node_modules/primeicons/primeicons.css';
И используйте Icon в любом месте вашего приложения:
<p-tabView class = "tabdetail">
<p-tabPanel header = "Basic Info" leftIcon = "pi pi-calendar">
</p-tabPanel>
</p-tabView>
И он работает, как ожидалось. Убедитесь, что вы правильно импортируете путь primeicons в style.css. Думаю, вы можете пропустить импорт иконок.
В моем style.css есть следующее: @import "primeicons/primeicons.css"; @import "primeng/resources/themes/flick/theme.css"; @import "primeng/resources/primeng.min.css";
Привет, DirtyMind: Заявленные классы PrimeIcons, карандаш, плюс и мусор на кнопках отображаются нормально. Пагинатор и раскрывающиеся списки не отображают значки правильно. В элементах управления пагинатором и раскрывающимся списком значки не упоминаются.
Я могу правильно видеть значки на пейджере и в раскрывающемся списке. Возможно, из-за вашего Primeng vs ^ 5.2.4. Я понизил версию своего приложения до 5.2.4 и получил много ошибок, поэтому не смог воспроизвести
Обновлено до PrimeNG:
"primeng": "^6.1.4",
и проблема решена.
Привет, DirtyMind: Вы сослались на другую версию, и это привело к решению.
Я рад, что ты нашел решение :)
Объясните подробнее вашу проблему. Какой шаг вы делаете, чтобы использовать простые иконки? Любое изображение или код, которым вы можете поделиться?