AdaloのHorizontal Card List(横型のカードリスト)設定方法

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

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

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

ここでは、「AdaloのHorizontal Card List(ホリゾンタルカードリスト)」を紹介します。

Adalo

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

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

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

Horizontal Card List(横型のカードリスト)

Horizontal Card List(ホリゾンタルカードリスト)は、カード状に表示することができるコンポーネントです。

ホリゾンタルカードリストは、横型に表示できるカードリストです。

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

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

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


ここでは、「Horizontal Card List(ホリゾンタルカードリスト)」を紹介します。

Horizontal Card List(横型のカードリスト)の使い方

Horizontal Card Listは、横型のカードリストです。

横型カードリストを使用するには、ホリゾンタルカードリストを使用したいスクリーンへ移動させます。

左サイドバーでホリゾンタルカードリストの設定をすることができます。

ホリゾンタルカードリストには、以下のような項目があります。

  • Horizontal Card List
  • Image options:画像オプション
  • Image overlay:画像のオーバーレイ
  • Bottom Bar Text:下部のバーテキスト
  • Bottom Bar Buttons:下部のバーボタン
  • Bottom Bar Style:ボトムバースタイル


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

Horizontal Card Listの設定

【Horizontal Card Listの設定項目】

  • What is this a list of?:何のリストか?
  • Avatar image:アバター画像
  • If there’s no image:画像がない場合
  • List items spacing:リストアイテムの間隔
  • Click Actions:アクションをクリック


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

データベース内の表示するデータを指定します。フィルタ、並べ替え、アイテム数の変更が可能。

List items spacingは、リストアイテムの間隔を調整でき、画像の隙間を調整できます。

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

Image options設定

【Image options設定】

  • Image Shape:画像の形
  • Size:サイズ
  • Rounding:丸み
  • Shadow:影


画像の形を選択し、サイズ調整を行います。

画像の形状は、スクエア、ポートレイト、ランドスケープ(風景)の3種類。

サイズ調整で、表示数をコントロールできます。

Image overlay設定

【Image overlay設定】

  • Text Position:テキストの位置
  • Background Effect:背景の効果
  • Title:タイトル
  • Subtitle:字幕
  • Subtitle Position:字幕の位置


表示画像のタイプ、画像の表示方法を選択します。

画像がない場合の表示もここで行います。

Bottom Bar 設定

【Bottom Bar 設定】

  • Bottom Bar Text:下部のバーのテキスト
  • Bottom Bar Button:下部のバーボタン
  • Bottom Bar Style:ボトムのバースタイル


それぞれの設定を行うことができ、枠を付けて、ボタン、ボタンカラーの設定を行いました。

まとめ

AdaloのリストコンポーネントにはHorizontal Card List(横型のカードリスト)があります。

アバター画像を表示できるシンプルなリストです。

ユーザーをアイコンと名前で表示する時に役立ちます。

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

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

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


今回は、「AdaloのHorizontal Card List(ホリゾンタルカードリスト)」を紹介しました。

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

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

スポンサードリンク



コメントを残す

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