（この記事はFran Diosが 2017年6月6日に英語版 Monaca x Onsen ブログに投稿した Creating Custom Modifiers の意訳です。）

Onsen UI を使用すれば、すべてのUIコンポーネントをネイティブアプリのような外見にすることができます。
デフォルトのスタイルでも十分本格的なUIを構築できますが、中にはスタイルやアニメーションのカスタマイズを希望される開発者様もおられるかと思います。
そこで、本記事では、「modifier」属性をカスタムしてOnsen UIコンポーネントのスタイルを変更する方法を解説します。

modifier属性とは？

Onsen UIが提供しているビジュアル系コンポーネントは、modifier属性を使用してスタイルを変更することができます。
modifierは、複数のコンポーネントの外見をまとめてカスタマイズする場合にも使用できます。

modifierの値はCSSクラスと紐づけられ、そのCSSクラスは記述元の要素だけではなく子要素にも適用されます。
これにより、要素毎のCSSクラス設定、煩雑になりがちなCSSセレクタ指定を手動で行う必要がなくなります。

たとえば、ons-input 要素に modifier="underbar" を指定した場合には .text-input--underbar と .text-input--underbar__label という2つのCSSクラスが、
対象の要素とその子要素に適用されます。

また、modifier="material" を指定した場合には、 .text-input—material と .text-input--material__label というCSSクラスが適用されます。
なお、Androidの場合は自動スタイリング機能によって modifier="material" が各要素にデフォルトで適用されます。

どの要素にどのクラスが適用されるかは、各要素 の宣言部に記述されている scheme オブジェクトを確認すればわかります。
たとえば、ons-back-button の scheme オブジェクトは こちら で確認できます。
この設定では、.back-button—* が記述元の要素に適用され、.back-button--*__icon と .back-button--*__label が関連する子要素に適用されます。
*には "underbar" や "material" といったプリセットのmodiferのほか、任意のmodifierを指定することもできます。

modifier のカスタム

それでは、modifierをカスタムしてみましょう。最近追加された ons-toast コンポーネントを使用して、modifierのカスタム方法を解説します。

ons-toast は、デフォルトではページ下部に横幅いっぱいにグレーで表示されます。

この ons-toast のスタイルをカスタムすることを目的として、独自の色、サイズ、位置などのスタイルを設定したmodifierを作成していきます。

まずは異常系メッセージ用のmodifierとして、「danger」を作成します（メッセージの表示位置は右揃えになります）。

.toast--danger {
  left: auto;
  background-color: hsl(348, 100%, 61%);
}

次に正常系メッセージ用のmodifierとして、「success」を作成します（メッセージの表示位置は中央揃え、形は楕円形にしています）。

.toast--success {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
  border-radius: 30px;
  background-color: hsl(141, 71%, 48%);
}
.toast--success__message {
  margin: 0;
  text-align: center;
}

フォントを変更するためのmodifier「thick」も追加します。

.toast--thick__message, .toast--thick__button {
  font-weight: 700;
}

上記のCSSクラスを記述しておけば、要素に対して modifier="danger" や modifier="success thick" 等と指定するだけで独自スタイルを適用することができます（他の組み合わせも自由にお試しください）。

こちらで結果を確認できます。

ons.notification では、次のような方法でも modifier をカスタムすることができます。

ons.notification.toast('Success!', {
  timeout: 1000,
  modifier: 'success thick',
  animation: 'fall'
});

プラットフォームに合わせた modifier を指定する場合には :not セレクタを使用します。
たとえば、iOS のみを対象とする「onlyios」modifierを作成する場合は、次のように指定します。

.toast--onlyios:not(.toast--material) {
  /* Only works when 'material' modifier is not applied */
}

Androidのみを対象とする「onlyandroid」modifierを作成する場合には次のように記述します。

.toast--onlyandroid.toast--material {
  /* Only works when 'material' modifier is applied */
}

Onsen UI は、ハイブリッドアプリ向けの UI を作成するためのオープンソースのライブラリーです。詳細は、GitHubページ をご確認ください。また、Onsen UIを応援してくれる方はぜひスター（★）をポチッとお願いいたします。

翻訳者紹介
渡部正和/Masakazu Watabe
フリーランスの翻訳家。インターネット・通信業界で10年ほど翻訳を経験したあと、2013年からフリーランスに。直訳ではない、わかりやすい翻訳を心がけています。校正など翻訳全般に関するご相談がありましたら watabe08@gmail.com（渡部） まで。