amplify-icon, amplify-icon-button / Amplify UI Components のドキュメントに無いコンポーネント紹介4
![](https://blog.tacck.net/wp-content/uploads/2020/04/4aab834b9b2492990f3a9f760c800fef.png)
こちらは、 “ゆるWeb勉強会@札幌 Advent Calendar 2020” の 11日目の記事です。
今回は amplify-icon
と amplify-icon-button
の紹介です。
amplify-icon
でアイコン表示をし、 amplify-icon-button
がそれをボタン化する、というものです。
前回はこちら。
![amplify-label, amplify-(checkbox|form-field|radio-button) / Amplify UI Components のドキュメントに無いコンポーネント紹介3](https://blog.tacck.net/wp-content/uploads/2020/04/4aab834b9b2492990f3a9f760c800fef.png)
目次
amplify-icon
特定のアイコンを表示できるようになります。アイコンによってデフォルトのサイズがバラバラなようなので、幅や高さを CSS プロパティで指定して使うことになります。
画面
まずは、 CSS プロパティを指定しない場合です。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121001.png)
このように、サイズがアイコンによって異なっています。
次に、幅 (width) を指定した場合です。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121002.png)
幅が統一されたことで、だいぶ見やすくなりました。
が、 photoPlaceholder
だけ見た目以上に上下に隙間があります。実際、大きくパディングが入っていますね。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121003-1024x594.png)
今度は、縦幅 (height) を指定してみます。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121004.png)
photoPlaceholder
が消えてしまいました。。。
最後に、アイコンの色を黒にしてみます。(幅も指定します。)
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121005.png)
いくつかのアイコンには反映されていませんね。
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
![amplify-js/packages/amplify-ui-components/src/components/amplify-icon at master ツキ aws-amplify/amplify-js](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/github.com.png)
amplify-icon-button
次は amplify-icon-button
です。上記の amplify-icon
をコンポーネント内で使ったボタンとなります。
画面
こちらもまずは、 CSS プロパティを指定しない場合です。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121006.png)
ボタン化されたことで、サイズは均一になりました。が、逆にサイズを指定することができなくなっているようです。
そして、 photoPlaceholder
のアイコンに問題があったために、ボタンになってもパディングが入ったままになっていますね。
マウスフォーカスを合わせると、背景色が表示され、しばらく待つとツールチップが表示されます。
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121007.png)
が、見ての通り位置ずれしてますね。
あと、別の問題として、ツールチップをうまく表示できませんでした。
次に、ボタンの色を青、背景色を赤、としてみます。 ( ban
にマウスフォーカスを合わせています。)
![](https://blog.tacck.net/wp-content/uploads/2020/12/2020121008.png)
背景色は変わりましたが、アイコンの色は変わらなかったですね。
コード
コードは下記です。(画面の確認中は 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-js](https://blog.tacck.net/wp-content/uploads/yahman_addons_cache/github.com.png)
少しまとめ
一部使えない機能もありそうですが、使えるところでは気軽に使えそうですね。
ボタンもサイズと色を調整できると、だいぶ使いやすいものになりそうです。