ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、「AdaloのHorizontal Card List（ホリゾンタルカードリスト）」を紹介します。
目次
Adalo
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Horizontal Card List（横型のカードリスト）
Horizontal Card List（ホリゾンタルカードリスト）は、カード状に表示することができるコンポーネントです。
リストは、複数の物を一つにまとめて表示するときに役立ちます。
Adaloのエディタ画面の＋からコンポーネントを追加することができます。
リストコンポーネントは全部で７つあります。
- Simple List：シンプルリスト
- Card List：カードリスト
- Image List：イメージリスト
- Avatar List：アバターリスト
- Horizontal Card List：ホリゾンタルカードリスト
- Horizontal Chip List：ホリゾンタルクリップリスト
- Custom List：カスタムリスト
ここでは、「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：影
画像の形を選択し、サイズ調整を行います。
画像の形状は、スクエア、ポートレイト、ランドスケープ（風景）の３種類。
サイズ調整で、表示数をコントロールできます。
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のリストコンポーネントは全部で７つあります。
- Simple List：シンプルリスト
- Card List：カードリスト
- Image List：イメージリスト
- Avatar List：アバターリスト
- Horizontal Card List：ホリゾンタルカードリスト
- Horizontal Chip List：ホリゾンタルクリップリスト
- Custom List：カスタムリスト
今回は、「AdaloのHorizontal Card List（ホリゾンタルカードリスト）」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定
コメントを残す