Bubble ちょっと嬉しいアップデート Button&Icon

こんにちは！

今回は、Bubbleのちょっと嬉しいアップデートの情報をお知らせします！

Webアプリでボタンをデザインする時どんなボタンにしますか？

例えば「検索」ボタンを用意する時、

のいずれかからデザインすることが多いかと思います。

Bubbleで実装するには、

で実装することが多いのではないでしょうか。

アイコンのみや、アイコン＋文字の場合、配置するのが若干面倒ですよね。

しかし、Button エレメントがアップデートされ、どれも簡単にできるようになりました！！

実際に見てみましょう。

ButtonのAppearanceのButton typeが、下図のように選択できるようになっています。

例えば、以下のようなボタンが作れます。

Button type	説明	例
Label	テキストのみ表示（今までと同様）
Icon	アイコンのみ表示
Icon and label	アイコン＋テキストを表示アイコンの位置も上下左右に変更可能

アイコンとテキストはそれぞれ色や大きさが設定できます。

また、アイコンの位置については、LayoutのIcon placement で指定できるようになっています。

Buttonと同時にIcon エレメントもアップデートされています。

今までBubble標準のIcon エレメントではFont Awesome v4 が使えるようになっていました。

他のWebアイコンを利用したい場合は、プラグイン（例：Google Material Icons）をインストールしたりしていた方もいらっしゃるのではないでしょうか。

標準Iconエレメントがアップデートされ、なんと！

以下新しく6種類のフォントが追加され、全部で7種類のWebフォントから選択できるようになりました！

IconエレメントからIconを選択しようとすると、下図のように、アイコンフォントの種類の選択ができ、さらに細かい種類まで選択できるようになっています。

アイコンを使用するとき、同じエレメントで色々なアイコンから選択できるようになり、便利になりましたね！エレメントが同じなので、スタイルも同じものが利用できるようになりますね。

もちろん、buttonエレメントで設定できるアイコンも同じように7種類のフォントから設定できるようになっています。

１点、注意があります。アイコンフォントはテキストやテキストエリアで[fa] XXXX [/fa]と入力してアイコン表示されますが、こちらは、残念ながら新しく追加したアイコンフォントは非対応です。

今までと同様にFont Awesome v4 のみ対応となっていますのでご注意ください。

Buttonの設計、アイコンの設計がラクになりましたね！

これからもBubbleがより使いやすくなるアップデートされるていくのが楽しみです！

ノーコードラボ