Как поместить значок Fontawesome на кнопку DataTable? - угловой - PullRequest
Новая
       18

Как поместить значок Fontawesome на кнопку DataTable? - угловой

0 голосов
/ 05 мая 2018

Я использую angular-fontawesome и datatables , и я хочу создать кнопку в таблице, но вместо текста я хочу разместить значок, используя fontawesome . У меня есть следующий код: 

this.dtOptions = {
    //...
    buttons: [
        //...
        {
            extend: 'pdf',
            text: '<fa-icon [icon]="faDownload"></fa-icon>'
        }
    ]           
};

Я знаю, что не буду загружать компонент иконки таким образом, но есть ли способ сделать это без необходимости использовать fontawesome css?

Ответы [ 4 ]

0 голосов
/ 13 мая 2018

В качестве простого решения вы можете добавить все нужные значки в скрытый div и назначить каждому id, чтобы их элемент svg отображался, и вы могли назначить значок соответствующей кнопке. текст.

enter image description here

<div id="icons" style="visibility: hidden;">
  <fa-icon id="faCoffee" [icon]="faCoffee"></fa-icon>
  <fa-icon id="faPrint" [icon]="faPrint"></fa-icon>
  <fa-icon id="faDownload" [icon]="faDownload"></fa-icon>
  <fa-icon id="faUser" [icon]="faUser"></fa-icon>
</div>

Назначить текст кнопки для отображаемого значка HTML 

buttons: [{
  text: $("#faCoffee").html()
}, {
  text: $("#faPrint").html()
}, {
  text: $("#faUser").html()
}, {
  text: $("#faDownload").html()
}]

Кроме того, вы можете удалить этот временный dev и значки после рендеринга таблицы, чтобы очистить ваш HTML 

$('#example').on('init.dt', function () {
  $("#icons").remove();
});
0 голосов
/ 08 мая 2018

Если вы хотите использовать угловой компонент вместо необработанного HTML, вам придется предварительно визуализировать угловой компонент где-нибудь в скрытом контейнере (то есть динамически создавать компонент fa-icon с использованием фабрики компонентов), а затем вручную скопировать визуализированный HTML-файл в кнопку конфигурации. Это гораздо более сложный процесс с небольшими преимуществами.

  • новые угловые элементы, вероятно, сделают немного проще.
0 голосов
/ 08 мая 2018

Пока у вас загружен fontawesome, вы можете просто манипулировать свойством className. Я порекомендую вам сбросить настройки макета кнопки по умолчанию через свойство dom. Как указывают другие, не смешивайте угловые (+2) директивы с этой частью кода. Это, вероятно, не будет работать (я в angular1, но это то же самое дело) и действительно не нужно в любом случае. Вот пример: 

buttons: {
  //reset class and change the rendered tag 
  //from <button> to <i>
  dom: {
    button: {
      tag: 'i',
      className: ''
    }
  },
  //since we now have completely unstyled icons add
  //some space between them trough a .custom-btn class
  buttons: [
   {
     titleAttr: 'Download as PDF',
     extend: 'pdfHtml5',
     className: 'custom-btn fa fa-file-pdf-o',
     text: ''
   },
   {
     titleAttr: 'Download as Excel',     
     extend: 'excelHtml5',
     className: 'custom-btn fa fa-file-excel-o',
     text: ''
   },
   {
     titleAttr: 'Download as CSV',     
     extend: 'csvHtml5',
     className: 'custom-btn fa fa-file-text-o',
     text: ''
   },
   {
     titleAttr: 'Print',     
     extend: 'print',
     className: 'custom-btn fa fa-print',
     text: ''
   }
 ]
}    

.custom-btn {
  cursor: pointer;
  margin-right: 5px;
}

https://jsfiddle.net/r47ao4h3/

У меня нет работающего plunkr, использующего DT и Angular2, но я могу создать пример Angular1, если хотите. Для всех это одна и та же сделка, разницы нет.

0 голосов
/ 07 мая 2018

Я думаю, что единственный вариант - использовать html. API говорит, что вы можете использовать html в text свойстве кнопки config. Например, вы можете использовать что-то вроде этого: <i class="fas fa-download"></i>

...