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

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

関連記事

BloomMakerでワークフロー処理モーダルを利用してWorkflowコンテンツを作成する

このCookBookでは、2020 Spring(8.0.25)でリリースした下記の機能を利用して、Workflowのコンテンツを作成する方法を紹介します。 IM-BloomMakerのアクションに、 …

他システムのデータベースに接続する方法

このCookBookでは、intra-mart 製品と関係の無いシステム等で利用されているデータベースに intra-mart Accel Platform から接続する方法についてご紹介します。 i …

no image

IM-BloomMaker ページネーションの利用方法

この CookBook では、2020 summer でリリースした コンテンツ種別「Bulma」 の 「ページネーション」エレメントについて紹介しています。 「ページネーション」エレメントとは、表示 …

IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法

このCookBookでは、IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法について紹介しています。 完成サンプル スクリプト適用前 指定した行数以上に改行できます。 スク …

ワークフローの参照者を動的に設定する

このCookbookでは、IM-Workflow 2018 Springから新たに追加された 処理対象者プラグイン「ロジックフロー(ユーザ)」 の設定方法を紹介いたします。 この機能を利用すると、申請 …