Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ac-toast

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ac-toast

react toast component

  • 0.0.9
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

ac-toast

npm version NPM downloads

1. 简介

一个基于react的提示组件,可以弹出文字,图片,图标,以及显示loading

2. 安装

npm install ac-toast -S

3. 使用

import Toast from 'ac-toast';
import 'ac-toast/dist/ac-toast.css';
Toast.info({
    msg: '提交成功',
    duration: 3000,
    transition: 'fade',
    icon: 'success',
    className: 'submit-success'
});

更多用法可以参考demo文件夹中的示例

4. 预览

基本消息 图标颜色 图片 loading 错误消息

5. 参数

ParameterTypeDefaultDescription
idstring随机字符串toast组件的id
msgstring组件中显示的文字
classNamestring组件顶层的class,用来自定义样式
horizontalstringcenter组件的水平位置。有3个预置选项: center,left,right
verticalstringmiddle组件的竖直位置。有3个预置选项: middle,top,bottom
durationnumber2000组件显示时间,单位毫秒
modestringoverride多个组件连续弹出显示模式。内置的模式有: override,queue,layoutoverride模式, 最后显示的toast会强制覆盖前面的。queue模式, toast排队显示,一个消失,才显示下一个。layout模式,toast会在竖直方向上排列,不覆盖
transitionstringfadetoast组件显示和消失的过渡效果,预置的过渡有: fade
zIndexnumber9999组件的层级
onClosefunction组件关闭后的回调

6. 方法

NameParameterreturn ValueDescription
infoabove默认的黑色背景弹出消息
successabove绿色背景弹出成功消息
warningabove黄色背景弹出警告消息
errorabove红色背景弹出错误消息
closeid:toast's id关闭指定id的toast
closeAll关闭所有的toast

FAQs

Package last updated on 12 Dec 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc