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

f:id:l08084:20201004190825p:plain

はじめに
Shadow DOMって？
ボタンのレイアウトを変更する
参考サイト

はじめに

本記事では、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;
    }
}