ブロックサンプル：囲みボタン（2/2）

囲みボタン（2/2）

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

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

sample-01037 / cocoon-blocks/button-wrap-1　customBackgroundColor：customBackgroundColor="#19448e"

sample-01038 / cocoon-blocks/button-wrap-1　customBackgroundColor：customBackgroundColor="#fff3ce"

sample-01039 / cocoon-blocks/button-wrap-1　customBackgroundColor：customBackgroundColor="#a82d46"

sample-01040 / cocoon-blocks/button-wrap-1　customTextColor：customTextColor="#19448e"

sample-01041 / cocoon-blocks/button-wrap-1　customTextColor：customTextColor="#fff3ce"

sample-01042 / cocoon-blocks/button-wrap-1　customTextColor：customTextColor="#a82d46"

sample-01043 / cocoon-blocks/button-wrap-1　customBorderColor：customBorderColor="#19448e"

sample-01044 / cocoon-blocks/button-wrap-1　customBorderColor：customBorderColor="#fff3ce"

sample-01045 / cocoon-blocks/button-wrap-1　customBorderColor：customBorderColor="#a82d46"

sample-01046 / cocoon-blocks/button-wrap-1　fontSize：fontSize="small"

sample-01047 / cocoon-blocks/button-wrap-1　fontSize：fontSize="medium"

sample-01048 / cocoon-blocks/button-wrap-1　fontSize：fontSize="large"

sample-01049 / cocoon-blocks/button-wrap-1　fontSize：fontSize="huge"

sample-01050 / cocoon-blocks/button-wrap-1　customFontSize：customFontSize="短いサンプル"

sample-01051 / cocoon-blocks/button-wrap-1　customFontSize：customFontSize="長いサンプルの文章で折り返し方と余白の見え方を確認します。"

sample-01052 / cocoon-blocks/button-wrap-1　width：width="25"

sample-01053 / cocoon-blocks/button-wrap-1　width：width="50"

sample-01054 / cocoon-blocks/button-wrap-1　width：width="75"

sample-01055 / cocoon-blocks/button-wrap-1　width：width="100"

sample-01056 / cocoon-blocks/button-wrap-1　justifyContent：justifyContent="left"

sample-01057 / cocoon-blocks/button-wrap-1　justifyContent：justifyContent="center"

sample-01058 / cocoon-blocks/button-wrap-1　justifyContent：justifyContent="right"

sample-01059 / cocoon-blocks/button-wrap-1　justifyContent：justifyContent="space-between"

sample-01060 / cocoon-blocks/button-wrap-1　verticalAlignment：verticalAlignment="top"

sample-01061 / cocoon-blocks/button-wrap-1　verticalAlignment：verticalAlignment="center"

sample-01062 / cocoon-blocks/button-wrap-1　verticalAlignment：verticalAlignment="bottom"

sample-01063 / cocoon-blocks/button-wrap-1　lock：lock={"move":false,"remove":false}

sample-01064 / cocoon-blocks/button-wrap-1　lock：lock={"move":true,"remove":false}

sample-01065 / cocoon-blocks/button-wrap-1　lock：lock={"move":false,"remove":true}

sample-01066 / cocoon-blocks/button-wrap-1　lock：lock={"move":true,"remove":true}

sample-01067 / cocoon-blocks/button-wrap-1　anchor：anchor="sample-anchor"

sample-01068 / cocoon-blocks/button-wrap-1　className：className="block-gallery-example"

sample-01069 / cocoon-blocks/button-wrap-1　文字色の自由指定：style.color.text="#19448e"

sample-01070 / cocoon-blocks/button-wrap-1　文字色の自由指定：style.color.text="#fff3ce"

sample-01071 / cocoon-blocks/button-wrap-1　文字色の自由指定：style.color.text="#a82d46"

sample-01072 / cocoon-blocks/button-wrap-1　背景色の自由指定：style.color.background="#fff3ce"

sample-01073 / cocoon-blocks/button-wrap-1　背景色の自由指定：style.color.background="#e8f0fa"

sample-01074 / cocoon-blocks/button-wrap-1　背景色の自由指定：style.color.background="#19448e"

sample-01075 / cocoon-blocks/button-wrap-1　extraBottomMargin：extraBottomMargin=""

sample-01076 / cocoon-blocks/button-wrap-1　extraBottomMargin：extraBottomMargin="0"

sample-01077 / cocoon-blocks/button-wrap-1　extraBottomMargin：extraBottomMargin="2"

sample-01078 / cocoon-blocks/button-wrap-1　extraBottomMargin：extraBottomMargin="10"

sample-01079 / cocoon-blocks/button-wrap-1　extraBottomMargin：extraBottomMargin="20"

sample-01080 / cocoon-blocks/button-wrap-1　組み合わせ：濃い背景と白い文字