今回は amplify-icon と amplify-icon-button の紹介です。

amplify-icon でアイコン表示をし、 amplify-icon-button がそれをボタン化する、というものです。

前回はこちら。

amplify-label, amplify-(checkbox|form-field|radio-button) / Amplify UI Components のドキュメントに無いコンポーネント紹介3こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 10日目の記事です。 今回は amplify-label と、それを使ったコンポーネントである amplify-checkbox 、 amplify-form-field …

続きを読む

 blog.tacck.net

amplify-icon

特定のアイコンを表示できるようになります。アイコンによってデフォルトのサイズがバラバラなようなので、幅や高さを CSS プロパティで指定して使うことになります。

画面

まずは、 CSS プロパティを指定しない場合です。

このように、サイズがアイコンによって異なっています。

次に、幅 (width) を指定した場合です。

幅が統一されたことで、だいぶ見やすくなりました。

が、 photoPlaceholder だけ見た目以上に上下に隙間があります。実際、大きくパディングが入っていますね。

今度は、縦幅 (height) を指定してみます。

photoPlaceholder が消えてしまいました。。。

最後に、アイコンの色を黒にしてみます。(幅も指定します。)

いくつかのアイコンには反映されていませんね。

amazon 、 auth0 、 facebook 、 google あたりはサービスロゴなのでそうなのかな、と思いますが、 warning が変えられないのは何か問題があるのかも、と思います。

あと、もともと photoPlaceholder は黒のままなので、これも問題ありかもしれないですね。

コード

コードは下記です。(画面の確認中は CSS プロパティを調整していましたが、ここでは全部載せています。)

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="(name, index) in names"
        :key="index"
        cols="3"
        :class="
          Math.floor(index / 4) % 2 === 0
            ? index % 2 === 0
              ? 'grey lighten-1'
              : 'grey'
            : index % 2 === 0
            ? 'grey'
            : 'grey lighten-1'
        "
      >
        <amplify-label>{{ name }}</amplify-label
        ><br />
        <amplify-icon :name="name"></amplify-icon>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: function () {
    return {
      names: [
        'amazon',
        'auth0',
        'ban',
        'enter-vr',
        'exit-vr',
        'facebook',
        'google',
        'loading',
        'maximize',
        'microphone',
        'minimize',
        'photoPlaceholder',
        'send',
        'sound',
        'sound-mute',
        'warning',
      ],
    }
  },
}
</script>

<style scoped>
amplify-icon {
  --icon-fill-color: black;
  --width: 2rem;
  --height: 2rem;
}
</style>

GitHub

File not found ﾂｷ aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - File not found ﾂｷ aws-amplify/amplify-js

 github.com

amplify-icon-button

次は amplify-icon-button です。上記の amplify-icon をコンポーネント内で使ったボタンとなります。

画面

こちらもまずは、 CSS プロパティを指定しない場合です。

ボタン化されたことで、サイズは均一になりました。が、逆にサイズを指定することができなくなっているようです。

そして、 photoPlaceholder のアイコンに問題があったために、ボタンになってもパディングが入ったままになっていますね。

マウスフォーカスを合わせると、背景色が表示され、しばらく待つとツールチップが表示されます。

が、見ての通り位置ずれしてますね。

あと、別の問題として、ツールチップをうまく表示できませんでした。

次に、ボタンの色を青、背景色を赤、としてみます。 ( ban にマウスフォーカスを合わせています。)

背景色は変わりましたが、アイコンの色は変わらなかったですね。

コード

コードは下記です。(画面の確認中は CSS プロパティを調整していましたが、ここでは全部載せています。)

<template>
  <v-container>
    <v-row>
      <v-col
        v-for="(name, index) in names"
        :key="index"
        cols="3"
        :class="
          Math.floor(index / 4) % 2 === 0
            ? index % 2 === 0
              ? 'grey lighten-1'
              : 'grey'
            : index % 2 === 0
            ? 'grey'
            : 'grey lighten-1'
        "
      >
        <amplify-label>{{ name }}</amplify-label
        ><br />
        <amplify-icon-button :name="name" :tooltip="name"></amplify-icon-button>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: function () {
    return {
      names: [
        'amazon',
        'auth0',
        'ban',
        'enter-vr',
        'exit-vr',
        'facebook',
        'google',
        'loading',
        'maximize',
        'microphone',
        'minimize',
        'photoPlaceholder',
        'send',
        'sound',
        'sound-mute',
        'warning',
      ],
    }
  },
}
</script>

<style scoped>
amplify-icon-button {
  --button-color: blue;
  --button-background-hover: red;
}
</style>

GitHub

File not found ﾂｷ aws-amplify/amplify-jsA declarative JavaScript library for application development using cloud services. - File not found ﾂｷ aws-amplify/amplify-js

 github.com

少しまとめ

一部使えない機能もありそうですが、使えるところでは気軽に使えそうですね。

ボタンもサイズと色を調整できると、だいぶ使いやすいものになりそうです。