見出し画像

(Bubble)長いテキストの「もっと読む」機能

概要

長い文章を表示する際に、最初は短く折りたたんでおいて「もっと読む」をクリックしたら全文を表示したい場合があります。

画像1

実現方法(:truncated to)

文字列に「:truncated to 30」のように文字数を指定して、先頭の何文字かだけを表示することができます。
下記の例では、Custom State「isTrancated」を「Yes/No」型で作成して、下部の「もっと読む」を押すごとにYes/Noを切り替え、先頭30文字表示と全文表示を切り替えています。
・フラグがYesなら、下部ボタンをクリックしたら先頭30文字だけを表示して下部ボタンを「もっと読む」にする
・フラグがNoなら、下部ボタンをクリックしたら全文表示にして下部ボタンを「おりたたむ」にする

画像2

補足

「:truncated to」は(dynamic dataではない)固定の文字列には使用できないので、文字列を一旦DBに入れるなどする必要があります。

いいなと思ったら応援しよう!