【问题标题】:Can we customize ionic toast close button.?我们可以自定义离子吐司关闭按钮吗?
【发布时间】:2020-04-25 15:11:55
【问题描述】:

我正在尝试为离子吐司按钮添加背景颜色,但未能成功。我在 global.scss 中尝试了下面的 css。有人可以告诉我如何实现这一目标吗?

  .positive-toast-message {
       --min-width: 60%;
       --background: #bde7c3;
       --color: black;
       --button-color: black;
       .toast-button {
        --background: red !important;
        background: white !important;
        background-color: blue !important;
       }
   }

创建 Toast 后,它会正确应用 'positive-toast-message' css

【问题讨论】:

    标签: ionic-framework ionic2 ionic4


    【解决方案1】:

    在 IONIC 5 上,您可以简单地使用 CSS 阴影和 toast 部分来应用您的自定义。

    例如,为了更改按钮的颜色,您可以简单地使用以下代码:

    ion-toast::part(button) {
      --button-color: var(--ion-color-tertiary) !important;
      --color: var(--ion-color-tertiary) !important;
    }

    【讨论】:

      【解决方案2】:

      如果你想这样做,那么你应该使用 css 类。 像这样称呼吐司

      const toast = await this.toastCtrl.create({
          message: 'Please Fill all fields',
          duration: 30000,
          position: 'top',
          cssClass: 'toast-bg'
        });
      
        toast.present();
      

      然后转到 global.scss 文件并将这个类放在那里

      .toast-bg {
        --background: blue;
        --button-color: #ffffff;
      }
      

      这应该可行。在 global.scss 中的 css 类中将颜色更改为您想要的任何颜色

      【讨论】:

      • 感谢您的回答。这可以很好地更改 TOAST 的背景颜色。我希望覆盖 toast 的 BUTTON 背景颜色。
      • @Deepak 要更改按钮颜色,只需将按钮的背景样式更改为适合您的样式,如下所示: style="background: blue;"把它放在按钮标签中,或者你可以把“背景:蓝色;”在一个类中并在按钮标签内调用该类
      • @PraiseHart 您是否尝试过您建议的代码?你应该知道你不能“把它放在按钮标签中”。此外,“背景:班级内的蓝色”也不起作用。 Deepak 你解决了吗?
      • @afe 是的,我已经使用我建议的代码进行了祝酒,而且效果非常好。如果使用普通的 HTML 按钮标签,您可以按照我的建议为其添加样式属性,然后将背景颜色更改为您想要的任何颜色: 但是如果使用离子按钮标签,您可以使用我为 HTML 按钮标签展示的样式属性,或者您可以创建一个 css 类来更改背景颜色,然后将该类添加到 ion-buttons 标签跨度>
      • @Deepak 如果您指的是 toast 弹出窗口中的按钮,那么您可以通过添加来更改它: --button-color: #ffffff;到 toast-bg cssClass
      猜你喜欢
      • 2012-05-27
      • 1970-01-01
      • 1970-01-01
      • 2013-05-25
      • 1970-01-01
      • 2022-12-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多