amplify-icon, amplify-icon-button / Amplify UI Components のドキュメントに無いコンポーネント紹介4

こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 11日目の記事です。

今回は amplify-iconamplify-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-label, amplify-(checkbox|form-field|radio-button) / Amplify UI Components のドキュメントに無いコンポーネント紹介3

amplify-icon

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

画面

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

アイコンサイズがバラバラ

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

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

幅の統一

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

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

パディングの存在を確認

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

photoPlaceholder が表示されない

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

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

いくつかのアイコンの色は変わらず

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

amazonauth0facebookgoogle あたりはサービスロゴなのでそうなのかな、と思いますが、 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

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

amplify-icon-button

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

画面

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

やはり photoPlaceholder は縦にパディングが

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

そして、 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

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

少しまとめ

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

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

tacck
  • tacck
  • 北の大地の普通のソフトウェアエンジニア。
    インフラ・バックエンド・フロントエンドと、色々やります。

    初心者・若手向けのメンターも希望あればお受けします。

    勉強会運営中
    * ゆるWeb勉強会@札幌
    * スマートスピーカーで遊ぼう会@札幌

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください