web-dev-qa-db-ja.com

スタイリングionic 2トースト

ionic 2トースト内でテキストメッセージをスタイルする方法はありますか？

私はこれを試しました：

    let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true
    });

    toast.onDismiss(() => {
      console.log('Dismissed toast');
    });

    this.nav.present(toast);
  }

しかし、明らかにあなたはテキストでhtmlを使用できないので、私の質問への答えはノーだと思いますか？

toastionic2
20
Bill Noble

ToastCtrl関数に「cssClass： "yourCssClassName"」を追加する必要があります。

 let toast = Toast.create({
      message: "Some text on one line. <br /><br /> Some text on another line.",
      duration: 15000,
      showCloseButton: true,
      closeButtonText: 'Got it!',
      dismissOnPageChange: true,
      cssClass: "yourCssClassName",
    });

cssクラスに機能を追加することができます。しかし、css機能はデフォルトのpage'cssの外に出ました。 Exmp：

   page-your.page.scss.name {
     //bla bla
    }
 .yourCssClassName {
   text-align:center;
  }
29
Burhan Gül

トースター作成にカスタムクラスを追加することでトースターの色を変更することができました

let toast = this.toastCtrl.create({
    message: 'Foobar was successfully added.',
    duration: 5000,
    cssClass: "toast-success"
  });
  toast.present();
}

そのページのscssファイルでは、デフォルトのネストされたページ名の外に出ました（トースターは[〜＃〜] not [〜＃〜]イオンページ名事のルート内にあるため）。そして、これは少しハックですが、追加したカスタムクラスの次のdiv要素を明示的にターゲットにしただけです

.toast-success {
  > div{
       background-color:#32db64!important;
   }
}

!importantを使用する必要があるため、私はそのハックを言います。 .toast-successを.md,.ios,.wp{...でラップすることにより、！importantを回避できます

theme/variables.scssファイルのメイントースター変数をオーバーライドすることにより、スタイルのデフォルトをオーバーライドできます。

$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);

ただし、これはデフォルト値のみをオーバーライドし、カスタム値はオーバーライドしません。スタイルを設定できる変数がいくつかあります。

25
user1752532

最初に、ionic-angularからトーストコントローラーをインポートし、コンストラクターでそのオブジェクトを作成します。

import { ToastController } from "ionic-angular";

constructor(private _tc: ToastController) {
}

その後、トーストメッセージを表示したい場所に書き込みます。

let options = {
  message: "Your toast message show here",
  duration: 3000,
  cssClass: "toast.scss"
 };

this._tc.create(options).present();

これが私のscssです。

.toast-message {
  text-align: center;
}

または、この link から最良の例を確認できます。役立つと思います。 :)

または、この link の答えを確認してください。

7
Bhavsang Jam

App.scssで（page.scssではなく）独自のcssクラスを定義する場合、.toast-wrapperおよび.toast.messageでスタイルを設定できます> div{を使用する必要はありません

例：

.yourtoastclass {
  .toast-wrapper {
    background: blue;
    opacity: 0.8;
    border-radius: 5px;
    text-align: center;
  }
  .toast-message {
    font-size: 3.0rem;
    color: white;
  }
}

theme/variables.scssでデフォルトを作成できます

例（赤で透明度が低い）：

$toast-width:   75%;  /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
6
Ralf Viellieber

Ionic 2はコンポーネントスタイルをオーバーライドする非常に便利な方法を提供します。src/ theme/variables.scssのトースターSASS変数を追加することでオーバーライドできます。

$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;

これはデフォルトのスタイルをオーバーライドします。これを参照してください オーバーライドIonic Sass変数

4
Sherif A.Mounir

ただし、トーストコンポーネントテンプレート自体を変更する必要があります。

エクスプローラー経由：\ node_modules\ionic-angular\components\toast\toast.js

194行目（テンプレート）を変更：{{d.message}}から<div [innerHTML]='d.message'></div>

3
Mark

.toast-messageセレクターを使用して、CSSのメッセージスタイルを変更できるはずです。

.toast-message { 
    font-family: Helvetica,
    color: red
}

または、ドキュメント（ http://ionicframework.com/docs/v2/api/components/toast/Toast/ ）を見ると、トーストを割り当てるために使用できるcssClassプロパティがあります。特定のクラスを作成し、それをスタイルします。

2
Pat Murray

トーストの背景色と不透明度を変更します。

let toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom',
      cssClass: 'changeToast'
    });

app.scssを追加します：

.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};

.toast-messageで使用されます

1
Rajnikant

上記のすべてを試しましたが、まだ動作しませんでした。そのため、新しいソリューションに遭遇しました。ページcss宣言の外側にcssClassが必要です。

let toast = this.toastCtrl.create({
          message: msg,
          duration: 3000,
          position: 'bottom',
          cssClass: 'toastcolor'
        });

このようなpost-list.scss

page-post-list {

}
.toastcolor .toast-message {
    background-color:skyblue;
}
1
justnajm