Bubbleでのボトムシート作成手順を解説!

ノーコードツールBubbleで、スマホアプリでよく見かける添付のような最下部ボックス(オーバーレイ)を作る方法をご紹介します。

ボトムシート

このコンポーネントの名前はあまり聞き慣れないかもしれませんが、ボトムシート(bottom sheets)といいます。

今回の記事ではボトムシートをBubbleのFloatingGroupを使い、キレイに再現する方法を解説するので、Bubbleでの実装の引き出しを増やしたい方はぜひチャレンジしてみてくださいませ!

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

もっと知る →

実装イメージ

ページ内の何かしらのボタンをクリックしたときに、一番下からにゅるっとスライドアップインのアニメーションでボトムシートを表示させるのが今回の実装イメージです。

黒マスク部分をタップしたときにボトムシートを閉じたり、ページをスクロールできなくするところまでは解説しないのでご了承くださいませ。

Bubbleでボトムシートをする実装手順

以下の手順で実装します。

  1. FloatingGroupの背景色の設定で黒マスクを再現
  2. FloatingGroupのLayout設定をする
  3. FloatingGroup直下のGroupを作る(中身の部分)
  4. FloatingGroupをアニメーション表示するワークフローを組む

完成形は添付のようなエレメントツリーとなります。

FloatingGroupの背景色の設定で黒マスクを再現

まずは画面にFloatingGroupを設置し、背景色(Background color)を黒(#000000)の透明度50%程度で設定することボトムシートの背景の黒マスクを再現しましょう。

FloatingGroupのLayout設定をする

同じくFloatingGroupのLayout設定を行います。このあと設置するGroupエレメントを最下部に表示するために、ColumnのContainer alignmentを「Bottom-aligned」に設定します。

また、画面いっぱいに広げたいのでwidthとheight両方100%で設定します。

FloatingGroup直下のGroupを作る

次に主役のボトムシートの中身をGroupエレメントで作ります。この中身はよしなにお好みで構築していただきたいので、ポイントだけご紹介します。

以下2点がポイントです!

  • 背景色(Background color)を白に設定する
  • 左上と右上だけに角丸を設定する

「Define each border independently」にチェックを入れると、左上・右上・右下・左下の個々のRoundness(border-radius)を設定できるようになるので、左上の「Top-left」と、右上の「Top-right」に8pxなど入力しましょう。

FloatingGroupをアニメーション表示するワークフローを組む

仕上げです。何かしらのボタンクリック時にデフォルトでは非表示にしているボトムシートを軽くアニメーションさせながら表示するためのワークフローを組みましょう。

Element ActionsのAnimateを選択し、Animationの種類は「Transition SlideUpIn」にします。デフォルトのアニメーション速度がちとスローすぎるので、「Define a custom duration」にチェックを入れて、200msくらいで設定するとちょうどいいアニメーションになります。

無料で資料をダウンロード

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsの会社概要・特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細

    お問い合わせでご入力頂いた個人情報のお取り扱いについて

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    目次