今回はglideのスタイル【List】について徹底解説していきます。
glideのスタイル【List】の全容
glide公式リンクはこちら↓
glideの登録方法はこちら
glideのコンポーネント10種類の概要をまるっと解説はこちら
お悩み解決！オープンチャットのやり取りをまとめました。→オープンチャットＱ＆Ａ
今回使用するデータはみんな大好きワンピースのイラストを、こちらもみんな大好きいらすとやさんからお借りしました。このデータがどのように表示されるかをイメージしながら見てください！
General
まずGeneralタブにある項目から解説していきます。項目は５つ
- DATA
- DESIGN
- TEXT STYLE
- OPTIONS
- ACTION
となっています。
①DATA
DATAの設定できる項目は以下
- Title
- Details
- Caption
- Image
Title…一番目立つ太字のテキスト
Details…タイトル下のテキスト
Caption…一番下のテキスト
Image…画像を表示
Captionの欄を空白にするとなぜか画像が左側に。画像は丸型になります。
画像がない場合はShow title when image is not availableのチェックを外すと、画像無しで表示できます。
②DESIGN
表示方法をRegular、Compactの２種類から選べます。※画像はCompact
③TEXT STYLE
TEXT STYLE…Allow text wrappingにチェックを入れるとTitleとDetailsに挿入したテキストが全文表示されます。
④OPTIONS
OPTIONS…Only show a few itemsにチェックを入れ数字を入れると、指定した数だけ項目が表示されます。指定した数以上項目がある場合は、右上に「すべてを見る」と表示され、クリックで全項目が開きます。
⑤ACTION
ACTIONでは項目をタップした時に動作するアクションを設定できます。
アクションの概要は【glide】アクション24種類の概要をまるっと解説をご覧ください。
Options
Optionsの設定項目は以下、項目は6つ。
- SEARCH
- FILTER
- SORT
- GROUP
- IN-APP FILTER
- IN-APP SORT
①SEARCH
検索ボックスの設定を行う項目です。表示・非表示の切り替え、初期テキストの設定が行えます。
②FILTER
データの列を指定しフィルターをかけ表示項目を絞ります。カテゴリー別に表示したりするときに使います。
③SORT
データの列を指定して並べ替えを行います。ランダムやシートの並び順、各項目に沿った並び順を選択できます。
④GROUP
列を指定しグループごとに表示します。
⑤IN-APP FILTER
列を指定すると画面右上にアイコンが現れ、ユーザーが自身でカテゴリー検索ができるようになります。
⑥IN-APP SORT
列を指定すると、ユーザーが自身でカテゴリー別に並べ替えができるようになります。
Add Form
ユーザーが項目を追加できるフォームの設定。Allow users to add itemsにチェックを入れると画面右上に＋マークが表示され、入力フォームを開けるようになります。入力フォームの項目はコンポーネントを自由に組み替えることができます。
【glide】コンポーネント10種類の概要をまるっと解説はこちら
Add conditionで条件を指定すると、入力できるユーザーを限定したりできます。
知らないと損？作業効率爆上がりグッズ
アプリやツールを開発する際はどうしても作業時間が長くなり、疲れやストレスがたまりがちです。
そんな時にあったら嬉しいお役立ちグッズをまとめました！良いアイデアやツールを生かすため、まずは環境を整えましょう！
おすすめグッズの記事はこちら→PCの作業効率爆あがり！おすすめグッズ大特集！
ノーコードで稼げるの？
はい、可能です。
スキルを身に付けた後どうするか？
分かりやすくまとめました。興味がある方は読んでみてください。
個別相談はこちら
作りたいアプリがあるけどどうやっていいかわからない！というひとがいましたら、個別に相談に乗りますのでこちらへご連絡ください。
Listまとめ
いかがでしたでしょうか？今回はglideで使えるSTYLEの【List】について徹底解説しました。割と使用頻度の高い表示方法ですのでマスターしてアプリ制作に役立ててください。
glide専用ラインオープンチャット作りました！お気軽にご参加ください。イェイイェイ🐣
