Ag-girdのFloatingFilterデザインを変える

2489 ワード
Angular2 TypeScript CSS CSS テキストリンク

Ag-gridは機能がリッチでいいですよね。倉庫内管理システムにFloatingFilterを付けたところ、現場から”もっとデザインをかっちょよくしてほしい"と要望を貰ったので、手順をまとめます。

FloatingFilterは<GridOptions>にfloatingFilter: trueと付けるのみです。

〇スタート時点

無地で、角ばっていて、殺風景。「...」のボタンを押すと、検索条件(含むとか、等しいとか)と一緒に入力バーがまた出ちゃう

現場の要望は、
・どこに入力すればいいのか一目でわかるように薄い色を付けてほしい
・角ばった感じをなくしてほしい
・検索条件と一緒に出る入力バーを消してほしい

〇HTMLを変更

まずHTMLでag-grid-angularでclassを指定します。 class="ag-material-××××"の部分ですね

次にChrome DevToolsのElementでFloatingFilterのinput要素を探します。

〇デザインを変える

CSSで先頭に.をつけてclass="ag-material-××××".input要素を書き、好みのデザインを指定します

.ag-material-×××× .ag-floating-filter-inputの部分です。

結果として以下のようになりました。
少しまともな見た目になりましたかね！

ちなみに、

.ag-material-×××× .ag-filter-body{
  display:none;
}

でフィルターも非表示にできました。
ちょっとした違いで印象は変わりますもんね、多少は使いやすくなればいいのですが、以上です。