uxcore-notice-icon

React notice icon

Development

git clone https://github.com/uxcore/uxcore-notice-icon
cd uxcore-notice-icon
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-notice-icon
cd uxcore-notice-icon
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/notice-icon

Contribute

Yes please! See the CONTRIBUTING for details.

API

Props

Props

| Name | Type | Required | Default | Comments | |---|---|---|---|---| |icon|string|optional|xiaoxitixingfull| 通知图标; http://uxco.re/components/icon/| |dot|boolean|optional|false|是否显示通知数量；默认不展示数字，只有一个小红点| |count|number|optional|-|通知的数量| |overflowCount|number|optional|99|通知封顶的数字| |trigger|string|optional|hover|触发方式。枚举值: 'hover', 'click'| |title|string|optional|通知|通知标题| |placement|string|optional|bottomRight|箭头位置| |emptyIcon|string|optional|默认图标|其他可选: 'access_restriction','acitve_empty','request_error','search_empty','unknown_error';http://uxco.re/components/icon/| |emptyText|string|optional|暂无数据|占位文字| |onVisibleChange|function|optional|fuction(visible)|显隐状态的回调 |topAction|React Element|optional|-|右上角操作| |bottomAction|object / render function|optional|-|支持默认(详见说明1)和自定义形式 |className|string|opitonal|-|添加在icon上的class| |overlayClassName|string|opitonal|-|添加在Popover上的class| |enablePopover|bool|optional|-|false|是否使用弹窗| |onIconClick|function|optional|-|点击Icon触发的事件，但在trigger mode 是 'click' 且使用弹窗时不会触发| |themeType|string|optional|'default'|其他可选: 'dark'|

说明:

1. bottomAction如果使用默认样式渲染，propTypes 需为object且按如下定义

   <NoticeIcon
       ...
       bottomAction = { text: string, action: function }
   >

   如果是使用自定义的方式，需要传入 render function

   // Example
   
   <NoticeIcon
       ...
       bottomAction ={ _ => <div>custom action bar</div> }
   >