web-dev-qa-db-ja.com

FontawesomeアイコンをDataTableボタンに配置する方法は？ -Angular

angular-fontawesome と datatables を使用していて、テーブルにボタンを作成したいのですが、テキストの代わりに fontawesome）を使用してアイコンを配置したいと思います。 。私は次のコードを持っています：

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

この方法でアイコンのコンポーネントをロードしないことは知っていますが、fontawesome cssを使用せずにロードする方法はありますか？

angulardatatablesangular-clifont-awesome
13
Samir Llorente

唯一の選択肢はhtmlを使うことだと思います。 [〜＃〜] api [〜＃〜] は、ボタン設定のtextプロパティでhtmlを使用できることを示しています。たとえば、次のようなものを使用できます。<i class="fas fa-download"></i>

7
matejko219

Fontawesomeがロードされている限り、classNameプロパティを操作するだけです。 domプロパティからもデフォルトのボタンレイアウト設定をリセットすることをお勧めします。他の指摘として、angular（+ 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/

手元にDTとAngular2を使用する実用的なプランカーはありませんが、必要に応じてAngular1の例を作成できます。それはすべて同じ取引ですが、違いはありません。

7
davidkonrad

Rawhtmlの代わりにangularコンポーネントを使用する場合は、非表示のコンテナーのどこかにangularコンポーネントを事前にレンダリングする必要があります（つまり、_fa-icon_コンポーネントをコンポーネントファクトリを使用して動的に）し、レンダリングされたhtmlをボタン構成に手動でコピーします。これははるかに複雑なプロセスであり、メリットはほとんどありません。

  • new angular要素は、おそらく少し単純になります。
3
kemsky

簡単な解決策としてできることは、必要なすべてのアイコンを非表示の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()
}]

また、テーブルがレンダリングされた後、この一時的な開発とアイコンを削除して、HTMLをクリーンアップすることができます

$('#example').on('init.dt', function () {
  $("#icons").remove();
});
2
ElasticCode