ionic3 自定义toast样式

最新推荐文章于 2024-04-12 16:33:33 发布

ColourfulTiger

最新推荐文章于 2024-04-12 16:33:33 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ionic与angular 文章标签： toast ionic

本文链接：https://blog.youkuaiyun.com/ColourfulTiger/article/details/82984624

本文介绍了如何在Ionic3项目中实现自定义的Toast样式。通过在全局`app.scss`文件中添加特定样式，或者在组件的独立scss文件中进行设置，避免在组件内部嵌套。文中还给出了代码示例及应用效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件目录结构：

在使用ionic3来写toast效果时，会有各种各样对toast样式的需求，

在全局的app.scss中添加以下内容

备注：（这里的样式也可以放置在组件的scss文件中，但是是独立开来的，不要嵌套在组件的page-xxx中去）

//吐司颜色、大小
  .box {
    width: 200px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .toast-container {
    width: 100%;
  }
  .error {
    .toast-message {
      color: #a94442;
    }
    .toast-wrapper {
      background: #f2dede;
      @extend .box;
    }
  }
  .success {
    .toast-message {
      color: #3c763d;
    }
    .toast-wrapper {
      background: #dff0d8;
      @extend .box;
    }
  }
  .tip {
    .toast-message {
      color: #31708f;
    }
    .toast-wrapper {
      background: #d9edf7;
      @extend .box;
    }
  }
  .toast-md .toast-wrapper.toast-top {
    top: 47px;
    height: 33px;
  }
  .toast-md .toast-messag