Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bee-alert with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. require("prop-types/package.json"); // prop-types is a peer dependency. var beeAlert = require("bee-alert")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bee-alert v2.0.0

alert ui component for react

bee-alert

npm version Build Status Coverage Status

页面内部针对用户行为操作的区域性提醒。根据信息类型不同提供相应的以背景颜色区分的alert。若需背景颜色加深需加dark类。

使用

使用单独的bee-alert包

组件引入

先进行下载bee-alert包

npm install --save bee-alert

组件调用

import Alert from 'bee-alert';

React.render(<div>
    <Alert />
    <Alert colors="info" className="dark" closeLabel="close" />
</div>, document.getElementById('target'));

样式引入

  • 可以使用link引入dist目录下bee-alert.css
<link rel="stylesheet" href="./node_modules/build/bee-alert.css">
  • 可以在js中import样式
import "./node_modules/src/Alert.scss"
//或是
import "./node_modules/build/bee-alert.css"

API

参数说明类型默认值
className类名string
colorsoneOf:info news success danger warningstringwarning
controlLabel关闭按钮文字string
onDismiss关闭alert触发的方法func
dark显示颜色深度boolfalse

开发调试

$ git clone https://github.com/tinper-bee/bee-alert
$ cd bee-alert
$ npm install
$ npm run dev
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free