有没有办法在ionic 2 toast中样式文本消息？
我已经尝试过这个：
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，所以我猜我的问题的答案是否定的？
您必须在您的 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类中，那么您可以在默认页面之外使用它们。例如：
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
我通过在烤面包机创建时添加自定义类，成功实现了烤面包机颜色的更改。
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
.toast-success {
> div{
background-color:#32db64!important;
}
}
我说这是 hacky 的，因为你必须在其上使用 !important。你可以通过将 .toast-success 包裹在 .md,.ios,.wp{... 中来避免使用 !important。
您可以通过在 theme/variables.scss 文件中覆盖主要的烤面包机变量来覆盖样式默认值。
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
这只会覆盖默认值，而不是自定义值。还有一些其他的变量也可以进行样式设置。
.toast-message中定义的background-color，才能让自定义的cssClass背景可见。 - A.W.首先，从ionic-angular中导入toast控制器，并在构造函数中创建该对象。
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;
}
或者您可以查看来自此链接的最佳示例。我认为它会对您有所帮助。 :)
否则，请检查此链接上的答案。
> div{。.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
border-radius: 5px;和text-align: center;？当宽度不为100％时，我们如何将toast对齐以显示在屏幕中央？ - Hamid Araghi$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
您应该能够使用.toast-message选择器在css中更改任何消息的样式：
.toast-message {
font-family: Helvetica,
color: red
}
或者，如果您查看文档(http://ionicframework.com/docs/v2/api/components/toast/Toast/)，您可以使用cssClass属性为您的提示框分配特定的类，然后进行样式设置。
更改烤面包背景颜色和不透明度：
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一起使用。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;
}
不确定旧版Ionic，但在Ionic 5中，您无法直接更改内部CSS，因为它被封装在阴影中。
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
所以，如果要更改 .toast-container（例如）中的 cssClass，您应该使用：
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
<br />将不起作用。 - Ari!important来使text-align:center生效：text-align:center !important;否则它将不起作用！ - Hamid Araghi