Adaloに画像を表示できるImage List【イメージリスト設定方法】

当ページのリンクには広告が含まれています。

ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。

Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。

プログラムコードを知らなくてもアプリ製作が可能なツールです。

ここでは、「AdaloのImage List(イメージリスト)」を紹介します。

Adalo

Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/

Adaloを使用するには登録が必要です。

登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面

Image List(イメージリスト)

Image List(イメージリスト)は、画像をリスト状に表示することができるコンポーネントです。 

Image Listは、画像を表示できるリストです。

リストは、複数の物を一つにまとめて表示するときに役立ちます。

Adaloのエディタ画面の+からコンポーネントを追加することができます。

リストコンポーネントは全部で7つあります。


ここでは、「Image List(イメージリスト)」を紹介します。

Image List(イメージリスト)の使い方

Image Listは、画像のリストです。

Image List(イメージリスト)を使用するには、Image Listを使用したいスクリーンへ移動させます。

左サイドバーでイメージリストの設定をすることができます。

イメージリストには、以下のような項目があります。

  • Image List:イメージリスト
  • Text:テキスト
  • Image Style:イメージスタイル
  • icon:アイコン


メインのデータ設定は、Image Listから行います。

Image Listの設定

【Image Listの設定項目】

  • What is this a list of?:何のリストか?
  • Filter:フィルタ
  • Sorting:並べ替え
  • Maximum number of items:アイテムの最大数
  • image:画像
  • If there ‘s no image:画像がない場合
  • Columns:カラム


まず、What is this a list of?にリストを入力します。

独学ノーコード
ここでは、イメージのデータを表示させるためimageを指定しました。

データベース内の表示するデータを指定します。

データを指定すると、フィルタ、並べ替え、アイテム数の変更が可能。


Columnsは、画像のカラム数を変更できます。

クリックしたときのアクションを付けたい時は、+アクション追加で設定が可能です。

Text設定

テキストでは、タイトルテキストを設定できます。

  • Subtitle:字幕
  • Subtitle position:字幕の位置
  • Text position:テキストの位置
  • Background effect:背景効果


テキストの詳細設定を行えます。

Image Style

【Image Style設定】

  • shape:形状
  • Rounding:丸み
  • Shadow:影


丸みは、画像の丸みを付ける設定です。 

画像に関する設定ができます。

icon設定

iconでは、カラーやデザイン設定を行えます。

  • icon:アイコン
  • position:位置
  • Color:カラー
  • +ADD Action:アクション追加

アイコンを変えることも可能です。

アイコンをクリックしたときのアクションも追加できます。

まとめ

AdaloのリストコンポーネントにはImage List(イメージリスト)があります。

イメージリストは、アプリに画像を表示できるリストです。

表示したデータはプレビューで確認しないと分からないので、プレビューを使用して確認します。

アプリにリスト表示を使用したいときに役に立つコンポーネントです。

adaloのリストコンポーネントは全部で7つあります。


今回は、「AdaloのImage List(イメージリスト)」を紹介しました。

ノーコードツールのAdaloを使用する時の参考になればと思います。

⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定

スポンサードリンク



コメントを残す

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