こんにちは！ゆかゆかです。
今日はAdaloのリスト表示で長い文を見やすく設定してみます。
View more を使った最終的なイメージ
最近話題の北京オリンピックのニュース記事をお借りして、
リスト表示させていただきました。
記事の本文は長いので、途中で切れるようになっています。
「View more」をクリックすると
続きの全文を読めます。
とっても簡単設定で見やすい感じになります♪
Adaloの設定
それではAdalo側の設定をやっていきます〜
データコレクションの設定
まずは表示させる情報を準備します。
- Database Collections を選択
- + ADD COLLECTION
お好きなデータを準備してください。
私はオリンピックのニュースをリスト表示させてみようと思います。
とりあえず、写真、タイトル、本文を用意してみました。
投稿日は並び順に使用して、新しいニュースから並ぶようにします。
（ニュースは自動連携ではありません。私が手作業でポチポチ登録しました）
Viewmorelibをインストール
続いて、View moreを表示させるコンポーネントをインストールします。
- 画面左上の＋マークを選択
- ADD COMPONENT > EXPLORE MARKETPLACE を選択
- viewmorelib をインストール
View More Text を画面に設定
インストールが終わると「ADD COMPONENT」の「Installed」に
View More Textが追加されます。
お好みの画面に配置してください。
私はこのように設定しました。
左側はImageコンポーネント
右側にタイトル用のTextコンポーネント、
本文用のView More Textコンポーネントを
置いています。
この後、リスト設定して、表示する値も設定してまいります〜
リスト設定
リスト化したいコンポーネントを範囲選択します。
左側に出てくる「Make List」を選択します。
選択したコンポーネントがリスト化されました。
うっすらと下に繰り返し表示されています。
左側に最初に作ったData Collectionを選択しています。
マジックテキスト設定
View more textに表示したい項目を設定します。
- View more text を選択
- T* を選択
- Data Collection名 > 表示したい項目名を選択
View moreボタンの表示名は変更可能
View more ボタンの表示名称はお好みで変更可能です。
よく見かける表現だと「続きを表示」とかでしょうか？
全文表示しているときは「View less」と表示されるようです。
色や文字サイズも変更可能
見た目を設定できたら、完成です〜
ImageコンポーネントとタイトルのTextコンポーネントも
表示する項目の設定ができたので、
早速、プレビューしてみます！
プレビュー
View more ボタン表示
文章の右下に「View more」と表示されています！
こちらをクリックしてみると・・・
全文を表示
本文が全て表示されました！
View less をクリックすれば短く切れた文章を表示します。
まとめ
簡単に長い文を見やすく表示する方法をご紹介しました。
記事や日記のリストなどに使えそうなコンポーネントですね。
みなさまのお役に立てれば嬉しいです。
▼無料でも意外と使える Nocode開発ツール Adalo
