Dataeye-ui NPM

readme

dataeye UI 组件库

按钮 (button)
主题配置 (theme-config)
封面（cover）— bob
多选项（selector）- 汤明
菜单（menu）— 汤明
下拉选择框(select) — 李钢
下拉框(dropdown) — bob
表格 (table) — 李钢
图标（icon）— 汤明
弹窗 (modal) — 李钢
分页(page) — 李钢
输入框 (input) — 李钢
多选框（checkbox）— 汤明
时间选择框（datepick）— bob
单选框（radio）—李钢
图片 (image) —汤明
加载（loading）—李钢
间距（space）— bob
面包屑（breadcrumb）—汤明
微标数 (badge) — bob
标签页（Tabs）— 李钢
标签（TAG）— 汤明
全局提示（message）— bob
消息提示框（Notification）— bob
空数据(empty) — 李钢
骨架屏（skeleton）— 李钢
提示 (tooltip) — 李钢
级联选择（casader）— bob
筛选组件 (filter) — bob
表单（from）— bob
卡片 (card) — bob
描述信息 (descriptions) - bob
时间线 (time-line) - bob
长列表 (list) - bob
瀑布流 (Masonry) - bob
分割线 (Divider) - bob
排版 (Typography) - bob
日历 (Calendar) - bob

安装

npm install dataeye-ui

使用

import React from 'react'
import { createRoot } from 'react-dom/client'
import { Button, ThemeProvider } from 'dataeye-ui'

const App = () => {
  return (
    <ThemeProvider>
      <Button type="primary" loading>按钮</Button>
      <Button type="default" loading>按钮</Button>
    </ThemeProvider>
  )
}

const RootDom = document.getElementById('root')
const root = createRoot(RootDom as Element)

root.render(<App />)

组件

ThemeProvider

全局主题配置

属性	说明	类型	默认值
theme	全局主题配置	ThemeType	-
prefixCls	设置统一样式前缀	string	de
components	设置组件主题配置	ComponentThemeType	-
locale	国际化配置	Locale	zh-CN

Button

属性	说明	类型	默认值
block	将按钮宽度调整为其父宽度的选项	boolean	false
ghost	幽灵属性，使按钮背景透明	boolean	false
radius	设置按钮形状	default \| circle \| round	round
size	设置按钮大小	default \| large \| medium \| small	medium
icon	设置按钮的图标组件	ReactNode	-
loading	设置按钮载入状态	boolean	false
disabled	设置按钮失效状态	boolean	false
type	设置按钮类型	default \| primary \| secondary \| success \| error \| info \| warning	default
onClick	点击按钮时的回调	(event: MouseEvent) => void	-

Cover

属性	说明	类型	默认值	required
poster	图片地址	string[] \| string	-	true
videoUrl	视频地址	string	-	false
alt	图片说明	string	-	false

Dropdown

属性	说明	类型	默认值	required	版本
open	下拉弹框是否显示	boolean	-	false
disabled	是否禁用	boolean	-	false
trigger	触发下拉的行为	Array<click \| hover \| contextMenu>	hover	false
placement	弹出位置	bottomLeft \| bottomRight \| topLeft \| topRight	bottomLeft	false
content	弹出层	ReactElement \| () => React.ReactElement	-	true
menu	弹出菜单	-	-	-	暂不支持
dropdownRender	自定义下拉框内容	(Node: ReactNode) => ReactNode	-	false
onOpenChange	弹出层显示状态改变时调用	(open: boolean) => void	-	false

Filter

属性	说明	类型	默认值	required
filter	经 Filter.useFilter() 创建的 filter 控制实例，不提供时会自动创建	待补充	-	-
layout	触发下拉的行为	'horizontal' \| 'vertical' \| 'inline'	horizontal	false
onChange	筛选后的回调事件	function(values)	-	false
beforeChange	执行筛选之前的钩子，参数为筛选的结果，若返回 false 则停止筛选	function(values)	-	false
disabled	是否禁用	boolean	-	false
showResult	是否展示筛选结果	boolean	-	true

Filter.Item

属性	说明	类型	默认值	required	版本
initialValue	默认值	any	-	-

Modal

属性	说明	类型	默认值	required
open	可控的弹窗展示	boolean	-	true
onClose	点击关闭回调方法	function()	-	false
onOk	如果没有传footer，按钮的确定回调	function()	-	false
title	弹窗标题	string/number/ReactNode	-	false
className	设置弹窗内部的className	string	-	false
width	弹窗的宽度	number/string	500px	false
style	设置弹窗的css	object	-	false
maskClosable	是否可以点击空白处关闭弹窗	boolean	true	false
keyboard	是否可以通过esc按钮关闭弹窗	boolean	true	false
closeIcon	弹窗右上角的关闭图标，如果传false，则直接不展示默认的，可以自定义	false/ReactNode	ReactNode	false
footer	设置弹窗的footer	boolean/ReactNode	ReactNode	false
icon	设置confirm的icon	string/ReactNode	ReactNode	false
destroyOnClose	设置弹窗是否需要消除Dom	boolean	false	false

Tooltip

属性	说明	类型	默认值	required
title	展示标题	string/number/ReactNode	-	true
children	内容	ReactNode	-	true
placement	默认展示位置	'left' / 'right' / 'top' / 'bottom' / 'topLeft' / 'topRight' / 'bottomLeft' / 'bottomRight' / 'rightTop' / 'rightBottom' / 'leftTop' / 'leftBottom'	-	false
mouseEnterDelay	鼠标移入多少秒后展示	number	0	false
mouseLeaveDelay	鼠标移开之后多少秒消失	number	0	false
getTooltipContainer	在哪个dom上展示，默认是body，(还没来得及测试展示先不动这里)	ReactNode	document.body	false
destroyTooltipOnHide	隐藏的时候是否销毁dom	boolean	false	false
trigger	触发方式，包括两种点击和hover	'click','hover'	'hover'	false
overlayClassName	最外层的className	string	-	false
overlayStyle	最外层的style	object	-
maxWidth	弹窗的最大宽度	number	260	false
showArrow	是否展示小三角号	boolean	true	false
overlayInnerStyle	里面的style	object	-	false
zIndex	tooltip的层级，默认是1070	number	1070	false

DatePicker

属性	说明	类型	默认值	required	版本
value	日期	dayjs	-	false
defaultValue	默认日期	dayjs	-	false
open	控制弹层是否展开	boolean	-	false
disabled	禁用	booleane	-	false
showTime	增加时间选择功能	Object \| boolean	-	false	暂不支持
disabledDate	不可选择的日期	(currentDate: dayjs) => boolean	-	false
picker	设置选择器类型	date \| week \| month \| quarter \| year	date	false
format	展示的日期格式	formatType	YYYY-MM-DD	false
use12Hours	使用12小时制	boolean	false	false
placeholder	输入框提示文字	string	-	false
onChange	时间发生变化的回调	unction(date: dayjs)	-	false
onOpenChange	弹出日历和关闭日历的回调	function(open)	-	false

DatePicker.RangePicker

属性	说明	类型	默认值	required	版本
value	日期	RangeValue	-	false
defaultValue	默认日期	RangeValue	-	false
open	控制弹层是否展开	boolean	-	false
disabled	禁用	booleane	-	false
showTime	增加时间选择功能	Object \| boolean	-	false	暂不支持
disabledDate	不可选择的日期	(currentDate: dayjs) => boolean	-	false
picker	设置选择器类型	date	date	false	目前只支持date
format	展示的日期格式	formatType	YYYY-MM-DD	false
dateMaxRange	选择不超过的范围	{ days: number, message: string }	{ days: Infinity, message: '' }	false
innerPresets	预设时间面板范围快捷选择	RangePresetDate[]	false	false
presets	预设时间框范围快捷选择	RangePresetDate[]	false	false
use12Hours	使用12小时制	boolean	false	false
placeholder	输入框提示文字	string, string	-	false
separator	设置分隔符	React.ReactNode	-	至
onChange	时间发生变化的回调	unction(date: RangeValue)	-	false
onOpenChange	弹出日历和关闭日历的回调	function(open)	-	false

Tag

属性	说明	类型	默认值	required
closable	可关闭	boolean	-	true
onClose	点击关闭回调方法	function()	-	false
bordered	是否有边框	boolean	-	true
icon	自定义关闭图标	ReactNode	-	false
className	设置className	string	-	false
style	设置css	object	-	false

Tag.CheckabTag 可选择tag

属性	说明	类型	默认值	required
checked	选中状态	boolean	-	false
onChange	选中状态变化事件	function()	-	false
onClick	点击事件	function()	-	false

Checkbox

属性	说明	类型	默认值	required
defaultChecked	默认选中状态	boolean	-	false
checked	选中状态	function()	-	false
onChange	选则变化事件	function()	-	false
className	设置className	string	-	false
style	设置css	object	-	false

Selector

属性	说明	类型	默认值	required
itemWidth	列宽	number-string	120	false
itemhasMaxWidth	是否有最大列宽，不与itemWidth 同时使用，不设最大宽度，item宽度自动撑开	number-string	120	false
multiple	是否多选	boolean	false	false
onChange	选则变化事件	function()	-	false
className	设置className	string	-	false
title	选项标题	string	-	true
tooltip	选项标题解释性tooltip（跟在标题后面）	string	-	false
datalist	数据	Array	-	true
selectedValue	选中值	单选string-多选Array	-	false
group	是否分组	boolean	-	false
disabled	禁用	boolean	-	false
open	当前是否是活动状态-配合shouldCloseSelector使用	boolean	-	false
onOpenChange	多个筛选项同时存在，点其中一个展开或多选时，将其他展开的收起来事件-open	function()	-	false
new	新增筛选项new 角标	boolean	-	false
newContent	new 角标内容	ReactNode	'NEW'	false
tagRimless	列表项是否无框	boolean	-	false