中安拓也のブログ

中安拓也がプログラミングについて書くブログ

【Ionic v5】[Shadow DOM]ボタンのレイアウトを変更する

f:id:l08084:20201004190825p:plain

はじめに

本記事では、Ionic v5のボタンのレイアウトを変更します。Ionic v5のボタン(ion-button)ではShadow DOMが適用されているため、Shadow DOMでないコンポーネントと同様のやり方でレイアウトを変更することができません。

ボタンのレイアウト変更を通して、Ionic v5のShadow DOMが適用されているコンポーネントのレイアウトの変更方法について説明します。

Shadow DOMって?

Shadow DOMとはDOMに対してカプセル化を提供する仕組みになります。

Shadow DOMによってカプセル化されたDOMは、特定の方法でしかその中身にアクセスできなくなります。

Ionic v5の例で言えば、Shadow DOM化されているボタン(ion-button)のレイアウトを変更するために、あらかじめ用意されたCSS変数経由でレイアウトを変更する必要があります。

Ionic v5では下記のコンポーネントがShadow DOM化されています。

  • ボタン
  • Card
  • Segment
  • Split Window

ボタンのレイアウトを変更する

続いて、Ionicのボタンのレイアウトを変更する具体的な方法について説明します。

今回は、例として下記のボタンに枠線を付けるレイアウト変更を実施します。

f:id:l08084:20201004193153p:plain
枠線がないボタンに枠線をつける

CSS変数の--border-style--border-widthを経由してボタンに枠線をつけていきます。

login.page.html

      <ion-button color="google" class="login-button google">
        <img class="g-icon" src="assets/icon/google-logo.png">Googleでログイン
      </ion-button>

login.page.scss

.login-button {
    font-weight: bold;
    margin-bottom: 18px;
    width: 100%;

    &.google {
        --border-style: solid;
        --border-width: 1px;
    }

    .g-icon {
        position: absolute;
        left: 15px;
        top: 25%;
        width: 1.4em;
    }
}

f:id:l08084:20201004200126p:plain
ボタンに枠線がついた

参考サイト

先取り、Shadow DOM - Shadow DOMが生まれた理由 | CodeGrid

(中級者向け)Ionic 4でのCSSカスタム変数の使い方 - Qiita

[翻訳]Ionic5がやってきた。Gifアニメーションつきで最新のWebモバイルUIフレームワークを紹介!|榊原昌彦|note

CSS変数 - Ionic Framework 日本語ドキュメンテーション

https://ionicframework.com/docs/api/button