CSSフレームワーク Bulmaのデリートボタン Delete

Bulma ロゴ トップ バナー

WebページやWebシステムでは、しばしばメッセージボックスやモーダルダイアログボックスなどのユーザー対話型のUIを実装することがあります。

ユーザー対話型のUIでは、ユーザーが操作をキャンセルするための閉じるボタンや、表示を削除するためのボタンが配置されます。

Bulmaには、そういったボタンを表現するためのクラスが用意されています。

今回は、閉じるボタンや削除ボタンを配置するためのdeleteクラスを紹介します。

用途の広い削除ボタン(アイコン)を定義するdeleteクラス

deleteクラスを指定した要素は、様々なコンテキストで使用することができる独立した要素になります。

deleteクラスを適用したボタンなどの要素は、それ自体は単純な「×」マークのついた円形のアイコンボタンになります。

Bulmaのdeleteクラスを指定した基本サンプルのブラウザーでの実行結果

HTML

ボタンのサイズ

deleteクラスを指定した要素で表現できる削除ボタン(閉じるボタン)には、4種類のサイズが用意されています。

ボタンのサイズには

  • 小さいサイズ
  • 通常のサイズ(デフォルトサイズ)
  • 通常のサイズ
  • 大きいサイズ

があります。

Bulmaのdeleteクラスを指定した様々なサイズのサンプルのブラウザーでの実行結果

HTML

deleteクラスの使用例

ここでは、他の要素とdeleteクラスを使用して削除ボタン(閉じるボタン)を組み合わせて配置する例をいくつか示します。

タグにdeleteボタンを配置する

ここでは、タグ(tagクラス)に削除ボタンを配置します。

Bulmaのdeleteクラスを使用してボタンを配置するサンプルのブラウザーでの実行結果

HTML

3行目がdeleteクラスを使用したボタンになります。

通知ボックスにdeleteボタンを配置する

ここでは、通知ボックス(notificationクラス)に削除ボタンを配置します。

Bulmaのdeleteクラスを使用してボタンを配置するサンプルのブラウザーでの実行結果

HTML

2行目がdeleteクラスを使用したボタンになります。

メッセージボックスにdeleteボタンを配置する

ここでは、メッセージボックス(messageクラス)に削除ボタンを配置します。

Bulmaのdeleteクラスを使用してボタンを配置するサンプルのブラウザーでの実行結果

HTML

4行目がdeleteクラスを使用したボタンになります。

モーダルカードにdeleteボタンを配置する

ここでは、モーダルカード(modal-cardクラス)に削除ボタンを配置します。

Bulmaのdeleteクラスを使用してボタンを配置するサンプルのブラウザーでの実行結果

HTML

6行目がdeleteクラスを使用したボタンになります。

Bulma 入門 Tips 一覧