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

ボタン（2/2）

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

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

sample-00910 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-c" / borderColor="ex-c"

sample-00911 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-d" / borderColor="ex-d"

sample-00912 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-e" / borderColor="ex-e"

sample-00913 / cocoon-blocks/button-1　プリセットの前景色：textColor="ex-f" / borderColor="ex-f"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sample-00942 / cocoon-blocks/button-1　anchor：anchor="sample-anchor"

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

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

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

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

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

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

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

sample-00950 / cocoon-blocks/button-1　extraBottomMargin：extraBottomMargin=""

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

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

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

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

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

sample-00956 / cocoon-blocks/button-1　長文と装飾の組み合わせ