14852


[ons-alert-dialog](http://ja.onsen.io/reference/ons-alert-
dialog.html)を使用して表示されるアラートダイアログのスタイルを変更したいです。

ブラウザからサンプルを開くと、アラートダイアログはiOSのようなデザインで表示されるのですが、Android上で同じスクリプトを実行するとアラートダイアログはAndroidのようなデザインで表示されてしまいます。

onsenUIのドキュメントによるとmodifierでandroidと指定することで、iOSのデザインをAndroidのデザインにする方法は書かれているのですが、その逆は書かれていません。

どうすればiOSのデザインをAndroidで利用できるでしょうか？  
(ons-toolbarにおけるfixed-styleのようなことをしたい。)


CC BY-SA 3.0
2015-08-22T09:26:11.657
14726
2015-08-26T04:53:44.973
2015-08-22T09:53:52.013
5337
11028
question
monaca onsen-ui
ons-alert-dialogの表示スタイルを変更したい


`<ons-alert-dialog>`をandroidで開くとandroid用のmodifierが自動で設定されて以下のCSSが効いてしまいます。

[code]

    .alert-dialog--android {
      -webkit-border-radius: 2px;
      border-radius: 2px;
      padding: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .alert-dialog-title--android {
      border-bottom: 1px solid #ddd;
      height: 52px;
      line-height: 52px;
      padding: 0 12px;
      margin-bottom: 8px;
      text-align: left;
    }
    .alert-dialog-content--android {
      text-align: left;
      padding: 8px 12px;
    }
    
[/code]

これを上書きするCSSを自分で書いてやればOKです。

`modifier="ios"`とでもして、`onsen-css-components.css`の`.alert-
dialog`の辺りを読みつつお好みで以下のようにCSSを設定してください。

[code]

    .alert-dialog--ios{
      -webkit-border-radius: 8px;
      border-radius: 8px;
      padding: 16px 0 0 0;
      -webkit-box-shadow: 0 2px 12px rgba(0,0,0,0.07);
      box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    }
    .alert-dialog-title--ios{
      border-bottom: none;
      height: initial;
      line-height: normal;
      padding: 0px 8px 0px 8px;
      margin-bottom: 0;
      text-align: center;
    }
    .alert-dialog-content--ios{
      text-align: center;
      padding: 4px 12px 8px 12px;
    }
    
[/code]


CC BY-SA 3.0
2015-08-26T04:46:37.970
14852
2015-08-26T04:53:44.973
2015-08-26T04:53:44.973
8532
8532
14726
answer