今回は amplify-label と、それを使ったコンポーネントである amplify-checkbox 、 amplify-form-field 、 amplify-radio-button を紹介します。

前回はこちら。

amplify-(amazon|auth0|facebook|oauth)-button / Amplify UI Components のドキュメントに無いコンポーネント紹介2こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 9日目の記事です。 前回は amplify-google-button の紹介でした。 https://blog.tacck.net/archives/947 もちろん、他の認証…

続きを読む

 blog.tacck.net

amplify-label

名前の通りラベルです。文字を表示します。

CSS カスタムプロパティによって、文字色を指定することができます。

画面

コード

<template>
  <v-container
    ><v-row>
      <v-col>
        <amplify-label>amplify-label</amplify-label>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
amplify-label {
  --label-color: #aaaaaa;
}
</style>

GitHub

amplify-js/packages/amplify-ui-components/src/components/amplify-label at master ﾂｷ aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - aws-amplify/amplify-js

 github.com

amplify-checkbox

名前の通りチェックボックスです。

画面

コード

<template>
  <v-container
    ><v-row>
      <v-col>
        <amplify-label>noraml</amplify-label>
        <amplify-checkbox label="amplify-checkbox"></amplify-checkbox>
      </v-col>
      <v-col>
        <amplify-label>checked</amplify-label>
        <amplify-checkbox label="amplify-checkbox" checked></amplify-checkbox>
      </v-col>
      <v-col>
        <amplify-label>disabled</amplify-label>
        <amplify-checkbox label="amplify-checkbox" disabled></amplify-checkbox>
      </v-col>
    </v-row>
  </v-container>
</template>

label で指定した部分が、コンポーネント内で amplify-label を使っているようです。

GitHub

amplify-js/packages/amplify-ui-components/src/components/amplify-checkbox at master ﾂｷ aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - aws-amplify/amplify-js

 github.com

amplify-form-field

名前の通りフォームで使うフィールドです。 input[type="text"] が生成されます。

画面

コード

<template>
  <v-container
    ><v-row>
      <v-col>
        <amplify-label>noraml</amplify-label>
        <amplify-form-field label="amplify-form-field"></amplify-form-field>
      </v-col>
      <v-col>
        <amplify-label>description</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          description="description"
        ></amplify-form-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>hint</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          hint="hint"
        ></amplify-form-field>
      </v-col>
      <v-col>
        <amplify-label>disabled</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          disabled
        ></amplify-form-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>placeholder</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          placeholder="placeholder"
        ></amplify-form-field>
      </v-col>
      <v-col>
        <amplify-label>required</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          :required="true"
        ></amplify-form-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>type date</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          type="date"
        ></amplify-form-field>
      </v-col>
      <v-col>
        <amplify-label>type password</amplify-label>
        <amplify-form-field
          label="amplify-form-field"
          type="password"
          value="1234"
        ></amplify-form-field>
      </v-col>
    </v-row>
  </v-container>
</template>

こちらも、 label で指定した部分がコンポーネント内で amplify-label を使っているようです。

GitHub

amplify-js/packages/amplify-ui-components/src/components/amplify-form-field at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - aws-amplify/amplify-js

 github.com

amplify-radio-button

名前の通りラジオボタンです。

画面

コード

<template>
  <v-container
    ><v-row>
      <v-col>
        <amplify-label>noraml</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
        ></amplify-radio-button>
      </v-col>
      <v-col>
        <amplify-label>checked</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
          checked
        ></amplify-radio-button>
      </v-col>
      <v-col>
        <amplify-label>disabled</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
          disabled
          checked
        ></amplify-radio-button>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>placeholder</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
          placeholder="placeholder"
        ></amplify-radio-button>
      </v-col>
      <v-col>
        <amplify-label>group</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
          checked
          name="group"
        ></amplify-radio-button>
        <amplify-radio-button
          label="amplify-radio-button"
          name="group"
        ></amplify-radio-button>
      </v-col>
    </v-row>
  </v-container>
</template>

こちらも、 label で指定した部分がコンポーネント内で amplify-label を使っているようです。

GitHub

amplify-js/packages/amplify-ui-components/src/components/amplify-radio-button at master · aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - aws-amplify/amplify-js

 github.com

ラベルの文字色設定した場合の挙動

いくつか紹介してきましたが、最初に紹介したように CSS カスタムプロパティ を使うことで、 amplify-label の文字色を変更することができます。

では amplify-checkbox 、 amplify-form-field 、 amplify-radio-button の中の amplify-label にも適用されるのでしょうか?

見てみましょう。

画面

どうやら、コンポーネント内の amplify-label には影響しないようですね。

コード

<template>
  <v-container
    ><v-row>
      <v-col>
        <amplify-label>amplify-checkbox</amplify-label>
        <amplify-checkbox label="amplify-checkbox"></amplify-checkbox>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>amplify-form-field</amplify-label>
        <amplify-form-field label="amplify-form-field"></amplify-form-field>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <amplify-label>amplify-radio-button</amplify-label>
        <amplify-radio-button
          label="amplify-radio-button"
        ></amplify-radio-button>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
amplify-label {
  --label-color: #ff3333;
}
</style>

GitHub で実装を覗く

実装を少し覗いてみます。

amplify-label の amplify-label.scss です。

/**
 * @prop --label-color: Text color within the label
 */
:host {
  --label-color: var(--amplify-secondary-color);
}

.label {
  color: var(--label-color);
  font-size: var(--amplify-text-sm);
  margin-bottom: 16px;
}

これを見ると、 --label-color を文字色に設定していることがわかります。

一方で、 amplify-checkbox の amplify-checkbox.scss はこのようになっています。(他も同様)

/**
 * @prop --font-family: Text font family
 */
:host {
  --font-family: var(--amplify-font-family);
}

.checkbox {
  margin-bottom: 22px;
  display: block;
  width: 100%;
  padding: 16px;
  font-size: var(--amplify-text-sm);
  font-family: var(--font-family);

  input {
    margin-right: 12px;
  }
}

ここでは --label-color が扱われていません。そのため、内部の amplify-label の方へ情報が継承されていないのかな、、、と考えています。

ただ、そうすると文字色を変える手段がなさそうなんですよね。

もしかしたら、もっと上位のコンポーネントや設定があるのかもしれません。

もうしばらく、探求してみます。