GlideのInline Listを使用した表示方法【異なったスタイルの組み合わせ】

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

最近、注目を浴びているノーコード。

簡単にアプリが作れる人気のノーコードツールGlideなら、プログラミングなしでアプリが作れます。

ここでは、「GlideのInline List」を紹介します。

Glideって何?

Glide

Glide(グライド)は、ノーコードツールで、Googleのスプレッドシートを用いて、アプリを作成できるサービスです。

クリックアンドドラッグで操作ができ、テンプレートやスプレッドシートとの連携が容易にできるためプログラミングは必要ありません。


プログラムコードの入力をせずに画面を操作してアプリが作成が可能で、簡単にアプリを作成することができる人気ツール。

Glideは、無料で登録して使用することができます。⇒ Glideの登録

Glideの仕様が2021年2月に大きく変わり、以前のエディタとは異なっています。今後も変更する可能性があります。

随時変更していますが、一部以前のままの部分もありますので注意してください。

GlideのInline List

Inline List(インラインリスト)は、Glideのコンポーネントパーツです。

Inline Listは、詳細ページなどに追加することが可能。

Inline Listは、リストパーツをページ内に表示することができます。

独学ノーコード
他のスタイルを組み合わせて表示することが可能です。

下部の青い部分はInline ListのCompactを使用して表示しています。

Inline Listは、通常のスタイルと同じで、表示スタイルを変更できます。

Inline Listを使用することで、詳細ページを見やすくしたり、回遊性を向上させて、アプリを使いやすくすることが可能です。

Inline Listの設定方法

Inline Listは、詳細ページに設定することができます。

追加できるのはDetailsのスクリーンのみです。他のスタイルでは追加できません。

コンポーネントの中のInline Listを選択して追加します。

左サイド+の追加ボタンからInline Listを追加できます。

Inline Listは、詳細ページ(Details)に追加します。

設定時には、List、Title、Cardsなどスタイル(STYLE)の選択をします。

上の画像はList表示にしています。

スタイルで表示を変えることができます。

上部の画像はコンパクトを使用して表示しています。

表示内容はDATAで変更が可能です。

DATAは使用するスタイルによって異なります。

レイアウトのSTYLE(スタイル)は7つのタイプがあり、選択ができます。

スタイル設定は、通常のスタイル設定と同じです。


次に、組み合わせるスタイルを選択します。

もう一度Inline Listを追加します。

追加したInline Listの設定をします。

Inline Listを追加し、スタイルはCardにしました。


タイトルを周辺リストという名前に変更して、Card(カード)スタイルで表示しました。

上部がリストスタイルで下部がカードスタイルになりました。


このような形でInline Listを使用した表示を行うことができます。

Inline Listを使用すれば、他のスタイルを組み合わせることができます。


今回は、「GlideのInline List」を紹介しました。

アプリ制作の参考になればと思います。


そのほかのGlideの記事はこちら。

⇒ Glideの使い方【アプリダッシュボード】アプリ作成手順

⇒ ノーコードGlide【Googleのスプレッドシートを使用したアプリ作成編】

⇒ Glideの外観変更

⇒ Glideのログイン認証設定

⇒ GlideのアプリのTAB設定

⇒ GlideのChatの設定

スポンサードリンク



コメントを残す

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