0.1.25 • Published 6 years ago
uxcore-notice-icon v0.1.25
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且按如下定义
```js
<NoticeIcon
...
bottomAction = { text: string, action: function }
>
```
如果是使用自定义的方式,需要传入 render function
```js
// Example
<NoticeIcon
...
bottomAction ={ _ => <div>custom action bar</div> }
>
```
0.1.25
6 years ago
0.1.24
7 years ago
0.1.23
7 years ago
0.1.22
7 years ago
0.1.21
7 years ago
0.1.20
7 years ago
0.1.19
7 years ago
0.1.18
7 years ago
0.1.17
7 years ago
0.1.16
7 years ago
0.1.15
7 years ago
0.1.14
7 years ago
0.1.13
7 years ago
0.1.12
7 years ago
0.1.11
7 years ago
0.1.10
7 years ago
0.1.9
7 years ago
0.1.8
7 years ago
0.1.7
7 years ago
0.1.6
7 years ago
0.1.5
7 years ago
0.1.4
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago