ブロックサンプル：アコーディオンパネル（4/4）

アコーディオンパネル（4/4）

ブロックの設定を比較するサンプルです。各例の直前に変更設定と値を記載しています。

画像等は同梱素材を使用します。コピー用コードと書かれた例は、説明に従って必要なデータ・編集場所を用意してください。

sample-04134 / core/accordion-panel　余白の組み合わせ：style.spacing.padding={"top":"2rem","right":"2rem","bottom":"2rem","left":"2rem"} / style.spacing.blockGap="2rem"

sample-04135 / core/accordion-panel　枠線の組み合わせ：style.border.color="#19448e" / style.border.width="1px" / style.border.style="solid" / style.border.radius="0px"

sample-04136 / core/accordion-panel　枠線の組み合わせ：style.border.color="#fff3ce" / style.border.width="3px" / style.border.style="dashed" / style.border.radius="12px"

sample-04137 / core/accordion-panel　枠線の組み合わせ：style.border.color="#a82d46" / style.border.width="6px" / style.border.style="dotted" / style.border.radius="36px"

sample-04138 / core/accordion-panel　影：style.shadow="4px 4px 12px #00000033"

sample-04139 / core/accordion-panel　影：style.shadow="0 0 0 4px #19448e33"

sample-04140 / core/accordion-panel　layout：layout={"type":"constrained"}

sample-04141 / core/accordion-panel　layout：layout={"type":"flex","flexWrap":"wrap","justifyContent":"center"}

sample-04142 / core/accordion-panel　layout：layout={"type":"flex","orientation":"vertical","justifyContent":"left"}

sample-04143 / core/accordion-panel　layout：layout={"type":"grid","columnCount":2}

sample-04144 / core/accordion-panel　extraBottomMargin：extraBottomMargin=""

sample-04145 / core/accordion-panel　extraBottomMargin：extraBottomMargin="0"

sample-04146 / core/accordion-panel　extraBottomMargin：extraBottomMargin="2"

sample-04147 / core/accordion-panel　extraBottomMargin：extraBottomMargin="10"

sample-04148 / core/accordion-panel　extraBottomMargin：extraBottomMargin="20"

sample-04149 / core/accordion-panel　組み合わせ：濃い背景と白い文字