《Javascripts》SnackBarを非表示・削除にする方法を紹介

JavaScript

SnackBarとは

Toast系のライブラリ

普段の業務でSnackbarというものが出てきて、調べたところToast系のポップアップの機能を提供するライブラリであることがわかりました。以下のリンクが公式サイトです。

Snackbars
Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

自分が扱うことになったのはWebでしたが、IOSやAndroidもこのライブラリを扱えるようです。

SnackBarを非表示にする方法

業務の中でSnackBarを指定の条件で非表示or削除したいという場面がありました。しかしDOMごと削除してしまうと新たにSnackBarを生成する際にhtmlで書いたパーツが消えてしまっているため、DOMを無理やり追加するとかの方法しかなくかなりめんどくさい。ということではまってしまったが、解決方法を見つけたので共有します。

指定のCSSを当てる

上のCSSをDOMに直接突っ込むメソッドを実行すれば、SnackBarを削除することが可能です。この方法が記載されていた「StackOverFlow」では

aria-hiddenをtrueにしていましたがなくても消えました。このようにしてSnackBarを非表示にした場合に、再表示するためには先ほど取り除いたCSSを追加してあげれば表示されます。

https://stackoverflow.com/questions/41572352/hide-snackbar-when-another-one-is-clicked

エンジニアにおすすめのアイテム

記事の内容とは別に、僕自身が保有する業務効率アップ、スキルアップを後押しするお勧めアイテムを紹介します。割とガチでお勧めなのです。

目の保温マッサージ

エンジニアの1日の業務は大半がディスプレイと睨めっこ。帰宅すると目が疲労で非常に重くなります。ひどい時は軽い頭痛になったりと結構深刻。そこで僕自身が毎日使っているのが目元マッサージ機です。

アイマッサージャー 二年間保証 最新グラフェン加熱技術 目元マッサージャー

アイマッサージャーを使ってから、翌日の疲労感がだいぶ軽減されました。またマッサージ自体とっても気持ち良くて、布団に入るのが毎日楽しみになりました。コスパまじで最強アイテムです。

座椅子をゲーミングチェア風に

ディスプレイの長時間利用と同時にエンジニアは座椅子の上に何時間も座る運命にあります。椅子が快適だと疲労度が大きく変わると思った私は以下の2点のアイテムを購入しました。

IKSTAR クッション 低反発 座布団 第五世代 オフィス IKSTAR クッション 低反発【メーカー直営・1年保証付】 ランバーサポート

気に入りすぎて、オフィス用だけではなく、自宅用も購入してしまいました。導入してから長時間座ることでのお尻の痛みや、腰の痛みが激減しました。なので体の健康を考えるなら、導入するべきアイテムですね。

タイトルとURLをコピーしました