CookBook

IM-BloomMaker ページのトップに戻るボタンの作り方

投稿日:

このCookBookでは、IM-BloomMaker でページのトップに戻るボタンの作り方について紹介しています。
今回紹介する方法は、intra-mart Accel Platform 2022 Spring 以前のバージョンでは動作しないので注意してください。

完成イメージ

画面の右下にページのトップに戻るボタンが表示されます。
ボタンをクリックすると、ページのスクロールが一番上に戻ります。
ボタンは、ページをスクロールしても画面右下に表示され続けます。

サンプル

この CookBook で使用するサンプルのインポートファイルです。
ダウンロードして IM-BloomMaker のインポート画面からインポートしてください。

im_cookbook_215561_im_bloommaker-data.zip

上記のサンプルは、intra-mart Accel Platform 2022 Winter の環境で動作することを確認しています。

レシピ

  1. ページのトップのエレメントに ID を指定する
  2. ボタンになる要素を配置する
  3. ボタンのプロパティを設定する
  4. ボタンの CSS を指定する
  5. 動作確認
  6. ボタンにアイコンをつける

1. ページのトップのエレメントに ID を指定する

  • 上記の「サンプル」のインポートファイルをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
  • IM-BloomMaker のコンテンツ一覧画面を表示してください。
  • 「intra-mart CookBook」>「im_cookbook_215561」>「im_cookbook_215561」のコンテンツを選択し、デザイナ画面を開いてください。
  • 「見出しレベル1」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「共通」>「ID」プロパティに「page-top」を入力してください。

2. ボタンになる要素を配置する

  • エレメントパレットの「レイアウト」>「ボックス」エレメントを、「見出しレベル1」エレメントの上に配置してください。
  • エレメントパレットの「汎用」>「ハイパーリンク」エレメントを、「ボックス」エレメントの中に配置してください。

3. ボタンのプロパティを設定する

  • 「ハイパーリンク」エレメントの中の「ラベル」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」>「textContent」プロパティに「Page top」を入力してください。
  • 「ハイパーリンク」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」>「href」プロパティに「#page-top」を入力してください。

    「パイパーリンク」エレメントの「href」プロパティに「# + (エレメントの「ID」プロパティの設定値)」を指定すると、アプリケーション画面でハイパーリンクをクリックした時にページ内の対象のエレメントにスクロールします。
    今回は「見出しレベル1」エレメントの「ID」プロパティの設定値を指定しています。
    ページのトップだけでなく、任意の位置にスクロールさせることも可能です。

4. ボタンの CSS を指定する

  • デザイナ画面のヘッダの「CSS編集」アイコンをクリックしてください。CSSエディタが表示されます。
  • CSS エディタに以下のテキストを貼り付けてください。

    上記の CSS を適用すると、プレビュー画面とアプリケーション画面の表示時のみ、ボタンが画面の右下に表示されるようになります。また、ボタンクリック時のスクロールがスムーズになります。
  • CSS エディタの「決定」ボタンをクリックしてください。
  • 「ボックス」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「CSSクラス」>「クラス名」プロパティに「page-top-button」を入力してください。

5. 動作確認

  • プレビュー画面を開いてください。
  • 画面の右下にボタンが表示されていることを確認してください。
  • ページを下にスクロールしてからボタンをクリックしてください。ページの一番上にスクロールします。
  • うまく動作しない場合は、「サンプル」のインポートデータに含まれている「im_cookbook_215561_final_version」コンテンツを参照してください。

6. ボタンにアイコンをつける

  • 「ハイパーリンク」エレメントの中に、「ボックス」エレメントを2個配置してください。
  • エレメントパレットの「パーツ(Bulma)」>「アイコン」エレメントを、「ハイパーリンク」エレメントの中の1個目の「ボックス」エレメントの中に配置してください。
  • 「ハイパーリンク」エレメントの中の「ラベル」エレメントを、2個目の「ボックス」エレメントの中に移動させてください。
  • 「ハイパーリンク」エレメントの中の1個目の「ボックス」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「テキストスタイル」>「横揃え」プロパティを「center」に変更してください。
  • 「アイコン」エレメントを選択し、右ペインの「プロパティ」タブを開いてください。
  • 「エレメント固有」>「iconClass」プロパティに「fas fa-chevron-up」を入力してください。
  • プレビュー画面を開いてください。画面右下のボタンに上向きの矢印が表示されます。

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

OAuth2.0 の アクセストークンを Google から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Google から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストー …

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

no image

PostgreSQL の Docker を作成する。

この CookBook では、PostgreSQL 検証用の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 PostgreSQL の Docker イメージを作成しま …

no image

CookBookからダウンロードしてきたプロジェクトのインポート方法

このCookBookでは、他のCookBookからダウンロードしてきたe Builderのモジュール・プロジェクトのインポートについて紹介しています。 プロジェクトをインポートし、プロジェクトの設定を …

面グラフの作り方とスプレッドシートとのデータ連携のやり方

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で面グラフを作成する方法と、グラフエレメントとスプレッドシートのデータ連携のやり方について紹介しています。 IM-B …