Expandable

collapsed-height / expanded-height / expand-label / collapse-label / open

Preview

折りたたみ（初期）

長い利用規約テキストのサンプルです。折りたたみ時は領域内スクロール、展開で全体を表示します。

追加の段落。追加の段落。追加の段落。追加の段落。追加の段落。

さらに追加の段落。さらに追加の段落。さらに追加の段落。

末尾の段落までスクロールできます。コンテンツは DOM に残ります。

展開（open）

open 属性付きで初期展開されます。トグルで折りたたみに戻せます。

追加の段落。追加の段落。追加の段落。

さらに追加の段落。さらに追加の段落。

高さ・ラベル

collapsed-height / expanded-height とカスタムラベルの例です。

展開時も max-height でクリップされ、はみ出しはスクロールできます。

段落を重ねて高さを確保しています。段落を重ねて高さを確保しています。

HTML

<tw-expandable collapsed-height="6rem">
  <p>長い利用規約テキストのサンプルです。</p>
  <p>追加の段落。</p>
</tw-expandable>

<tw-expandable open collapsed-height="4rem">
  <p>open 属性付きで初期展開されます。</p>
</tw-expandable>

<tw-expandable
  collapsed-height="3rem"
  expanded-height="10rem"
  expand-label="続きを読む"
  collapse-label="折りたたむ"
>
  <p>高さ・ラベルのカスタム例です。</p>
</tw-expandable>

import "@b4moss/the-wheels";

import "@b4moss/the-wheels";