【Onsen UI】modifierを使ってデザインをカスタマイズする方法

Onsen UI のデザインをベースとして実装したあと、デザインをCSSでカスタマイズしていく方法メモ。

1. タグに「modifier」属性をつける

「ons-button」や「ons-toast」など、「ons-**」タグに属性 「modifier="***"」を設定します。*** の部分は自由に設定してOK。

例）「ons-modal」で modifier属性を"loading"として設定した場合：

<ons-modal id="modal" modifier="loading" direction="up">
    <div style="text-align: center">
        <p>
            <ons-icon icon="md-spinner" size="28px" spin></ons-icon> Loading...
        </p>
    </div>
</ons-modal>

引用 ons-modal - Onsen UI

2. CSSでカスタマイズする

1. タグ「ons-***」の***の部分
2. 属性modiferの値（「modifier="***"」の***の部分）

とした時、.[1]--[2]{} としてCSSでカスタマイズすることができます。

例）「ons-modal」で、modifier属性が「loading」の時、背景色を透過した水色に変更する：

.modal--loading {
    background-color:  rgba(74, 183, 255, 0.6);
}