美文网首页ionic4
修改toast默认样式

修改toast默认样式

作者: 追逐繁星的阿忠 | 来源:发表于2018-10-08 16:43 被阅读194次

效果图:


toast样式调整.png

第一步:在app.scss文件中引入公共样式,文字居中:

//修改文字显示的字体大小和距离顶部高度
.toast-message {

  display:flex;

  justify-content:center;

  font-size: .8em;

  padding-top: 8px;

}

第二步:找到variables.scss文件,然后随便找个位置加入下面的样式代码:

//修改toast样式

$toast-max-width: 300px;

$toast-md-background: #FF5F40;

$toast-wp-background:#FF5F40;

$toast-ios-background: #FF5F40;

$toast-md-title-color:#ffffff;

$toast-ios-title-color:#ffffff;

$toast-wp-title-color:#ffffff;

第三步:调用说明:这里只做测试用法展示:

    showToast(){
        let toast = this.toastCtrl.create({
            message: '今天会下雨吗',
            duration: 30000,
            position: 'middle',

        })
        toast.present()
    }

相关文章

  • 修改toast默认样式

    效果图: 第一步:在app.scss文件中引入公共样式,文字居中: 第二步:找到variables.scss文件,...

  • ionic toast字体居中问题

    toast组件字体默认居左 效果图如下: 通过 dangers来修改样式;dangers类要写在app.scss中...

  • Ionic3全局修改toast样式

    背景 在ionic3中toast的样式默认是黑底白字,客户感觉黑底白字不太吉利,所以要修改一下背景色。 修改方法 ...

  • Toast(自定义Toast)

    默认的Toast: 自定义Toast(自定义图标样式\显示时间\位置): 效果图: 代码:

  • 修改默认样式

    点击,聚焦input不出现框 取消select默认样式 只允许输入字符 取消input提示栏 jQuery选中被选...

  • 修改文本显示样式为Linux

    默认样式: # 修改Linux样式: 效果:image.png

  • css默认样式处理

    浏览器双击选中文字 a标签默认样式 input默认样式 默认checkbox样式修改 button的disable...

  • 修改checkbox默认样式

    利用CSS3伪类修改CheckBox样式 下面是html代码 CSS 代码 实现原理,将checkbox隐藏.用l...

  • select默认样式修改

    select默认样式中的小三角不能删掉,要修改它的样式,只能使用图片将其隐藏掉。示例: 推荐一个好用的图标下载网站...

  • 修改ElementUI默认样式

    不加 scoped /deep/ .demo包裹避免污染

网友评论

    本文标题:修改toast默认样式

    本文链接:https://www.haomeiwen.com/subject/zusjaftx.html