0.4.34 • Published 10 months ago

dataeye-ui v0.4.34

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
10 months ago

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设置统一样式前缀stringde
components设置组件主题配置ComponentThemeType-
locale国际化配置Localezh-CN

Button

属性说明类型默认值版本
block将按钮宽度调整为其父宽度的选项booleanfalse
ghost幽灵属性，使按钮背景透明booleanfalse
radius设置按钮形状default | circle | roundround
size设置按钮大小default | large | medium | smallmedium
icon设置按钮的图标组件ReactNode-
loading设置按钮载入状态booleanfalse
disabled设置按钮失效状态booleanfalse
type设置按钮类型default | primary | secondary | success | error | info | warningdefault
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>hoverfalse
placement弹出位置bottomLeft | bottomRight | topLeft | topRightbottomLeftfalse
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'horizontalfalse
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设置弹窗内部的classNamestring-false
width弹窗的宽度number/string500pxfalse
style设置弹窗的cssobject-false
maskClosable是否可以点击空白处关闭弹窗booleantruefalse
keyboard是否可以通过esc按钮关闭弹窗booleantruefalse
closeIcon弹窗右上角的关闭图标，如果传false，则直接不展示默认的，可以自定义false/ReactNodeReactNodefalse
footer设置弹窗的footerboolean/ReactNodeReactNodefalse
icon设置confirm的iconstring/ReactNodeReactNodefalse
destroyOnClose设置弹窗是否需要消除Dombooleanfalsefalse

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鼠标移入多少秒后展示number0false
mouseLeaveDelay鼠标移开之后多少秒消失number0false
getTooltipContainer在哪个dom上展示，默认是body，(还没来得及测试展示先不动这里)ReactNodedocument.bodyfalse
destroyTooltipOnHide隐藏的时候是否销毁dombooleanfalsefalse
trigger触发方式，包括两种 点击和hover'click','hover''hover'false
overlayClassName最外层的classNamestring-false
overlayStyle最外层的styleobject-
maxWidth弹窗的最大宽度number260false
showArrow是否展示小三角号booleantruefalse
overlayInnerStyle里面的styleobject-false
zIndextooltip的层级，默认是1070number1070false

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 | yeardatefalse
format展示的日期格式formatTypeYYYY-MM-DDfalse
use12Hours使用12小时制booleanfalsefalse
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设置选择器类型datedatefalse目前只支持date
format展示的日期格式formatTypeYYYY-MM-DDfalse
dateMaxRange选择不超过的范围{ days: number, message: string }{ days: Infinity, message: '' }false
innerPresets预设时间面板范围快捷选择RangePresetDate[]falsefalse
presets预设时间框范围快捷选择RangePresetDate[]falsefalse
use12Hours使用12小时制booleanfalsefalse
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设置classNamestring-false
style设置cssobject-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设置classNamestring-false
style设置cssobject-false

Selector

属性说明类型默认值required版本
itemWidth列宽number-string120false
itemhasMaxWidth是否有最大列宽，不与itemWidth 同时使用，不设最大宽度，item宽度自动撑开number-string120false
multiple是否多选booleanfalsefalse
onChange选则变化事件function()-false
className设置classNamestring-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多个筛选项同时存在，点其中一个展开或多选时，将其他展开的收起来事件-openfunction()-false
new新增筛选项new 角标boolean-false
newContentnew 角标 内容ReactNode'NEW'false
tagRimless列表项是否无框boolean-false
@emotion/cache@emotion/css@emotion/react@emotion/server@emotion/styled@svgr/coreahooksaxiosbignumber.jsclassnamesdayjsrc-checkboxrc-menurc-resize-observerrc-tablerc-tooltiprc-utilreactreact-domreact-fast-comparereact-isreact-router-domreact-transition-groupresize-observer-polyfill
0.4.33

10 months ago

0.4.34

10 months ago

0.4.32

12 months ago

0.4.31

12 months ago

0.4.30

12 months ago

0.4.28

12 months ago

0.4.29

12 months ago

0.4.26

12 months ago

0.4.27

12 months ago

0.4.24

1 year ago

0.4.25

1 year ago

0.4.23

1 year ago

0.4.20

1 year ago

0.4.21

1 year ago

0.4.22

1 year ago

0.4.19

1 year ago

0.4.18

1 year ago

0.4.15

1 year ago

0.4.16

1 year ago

0.4.13

1 year ago

0.4.14

1 year ago

0.4.12

1 year ago

0.4.9

1 year ago

0.4.8

1 year ago

0.4.10

1 year ago

0.4.11

1 year ago

0.4.7

1 year ago

0.4.5

1 year ago

0.4.4

1 year ago

0.4.6

1 year ago

0.4.3

1 year ago

0.3.29

1 year ago

0.4.1

1 year ago

0.4.2

1 year ago

0.4.0

1 year ago

0.3.28

1 year ago

0.3.27

1 year ago

0.3.26

1 year ago

0.3.25

1 year ago

0.3.24

1 year ago

0.3.23

1 year ago

0.3.22

1 year ago

0.3.21

1 year ago

0.3.20

1 year ago

0.3.19

1 year ago

0.3.18

1 year ago

0.3.17

1 year ago

0.3.16

1 year ago

0.3.15

1 year ago

0.2.12

2 years ago

0.2.11

2 years ago

0.2.10

2 years ago

0.3.0

2 years ago

0.3.6

1 year ago

0.3.5

1 year ago

0.3.8

1 year ago

0.3.7

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.4

1 year ago

0.3.3

1 year ago

0.3.9

1 year ago

0.3.14

1 year ago

0.3.13

1 year ago

0.3.12

1 year ago

0.3.11

1 year ago

0.3.10

1 year ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.3

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.1

2 years ago

0.2.2

2 years ago

0.2.0-beta.2

2 years ago

0.2.0-beta.1

2 years ago

0.2.0-beta.0

2 years ago

0.2.0-beta.6

2 years ago

0.2.0-beta.5

2 years ago

0.2.0-beta.4

2 years ago

0.2.0-beta.3

2 years ago

0.2.0-beta.9

2 years ago

0.2.0-beta.8

2 years ago

0.2.0

2 years ago

0.2.0-beta.7

2 years ago

0.2.0-beta.10

2 years ago

0.2.0-beta.11

2 years ago

0.2.0-beta.12

2 years ago

0.2.0-beta.13

2 years ago

0.2.0-beta.14

2 years ago

0.2.0-beta.15

2 years ago

0.2.0-beta.16

2 years ago

0.2.0-beta.17

2 years ago

0.1.0

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.3

2 years ago

0.0.9-7-beta

2 years ago

0.0.9-6-beta

2 years ago

0.0.9-5-beta

2 years ago

0.0.9-4-beta

2 years ago

0.0.9-3-beta

2 years ago

0.0.9-1-beta

2 years ago

0.0.9-0-beta

2 years ago

0.0.9-2-beta

2 years ago

0.0.8-6-beta

2 years ago

0.0.8-7-beta

2 years ago

0.0.8-9-beta

2 years ago

0.0.8-8-beta

2 years ago

0.0.8-5-beta

2 years ago

0.0.8-2-beta

2 years ago

0.0.8-3-beta

2 years ago

0.0.8-4-beta

2 years ago

0.0.8-0-beta

2 years ago

0.0.8-1-beta

2 years ago

0.0.6-10-beta

2 years ago

0.0.7-0-beta

2 years ago

0.0.7-1-beta

2 years ago

0.0.7-2-beta

2 years ago

0.0.6-12-beta

2 years ago

0.0.6-11-beta

2 years ago

0.0.6-8-beta

2 years ago

0.0.6-5-beta

2 years ago

0.0.6-7-beta

2 years ago

0.0.6-9-beta

2 years ago

0.0.6-6-beta

2 years ago

0.0.6-4-beta

2 years ago

0.0.6-3-beta

2 years ago

0.0.6-2-beta

2 years ago

0.0.5-6-beta

2 years ago

0.0.5-9-beta

2 years ago

0.0.6-0-beta

2 years ago

0.0.5-3-beta

2 years ago

0.0.5-12-beta

2 years ago

0.0.5-11-beta

2 years ago

0.0.5-7-beta

2 years ago

0.0.6-1-beta

2 years ago

0.0.5-8-beta

2 years ago

0.0.5-10-beta

2 years ago

0.0.5-13-beta

2 years ago

0.0.5-2-beta

2 years ago

0.0.5-5-beta

2 years ago

0.0.5-4-beta

2 years ago

0.0.5-1-beta

2 years ago

0.0.4-13-beta

2 years ago

0.0.4-10-beta

2 years ago

0.0.4-12-beta

2 years ago

0.0.5-0-beta

2 years ago

0.0.4-11-beta

2 years ago

0.0.4-8-beta

2 years ago

0.0.4-7-beta

2 years ago

0.0.4-6-beta

2 years ago

0.0.4-9-beta

2 years ago

0.0.4-5-beta

2 years ago

0.0.3-11-beta

2 years ago

0.0.3-12-beta

2 years ago

0.0.4-2-beta

2 years ago

0.0.4-1-beta

2 years ago

0.0.4-3-beta

2 years ago

0.0.4-0-beta

2 years ago

0.0.4-4-beta

2 years ago

0.0.3-8-beta

2 years ago

0.0.3-9-beta

2 years ago

0.0.3-10-beta

2 years ago

0.0.3-7-beta

2 years ago

0.0.3-5-beta

2 years ago

0.0.3-1-beta

2 years ago

0.0.3-6-beta

2 years ago

0.0.3-0-beta

2 years ago

0.0.3-3-beta

2 years ago

0.0.3-4-beta

2 years ago

0.0.2-12-beta

2 years ago

0.0.3-2-beta

2 years ago

0.0.2-8-beta

2 years ago

0.0.2-11-beta

2 years ago

0.0.2-9-beta

2 years ago

0.0.2-10-beta

2 years ago

0.0.2-6-beta

2 years ago

0.0.2-7-beta

2 years ago

0.0.2-5-beta

2 years ago

0.0.2-3

2 years ago

0.0.2-4-beta

2 years ago

0.0.2-3-beta

2 years ago

0.0.2-2

2 years ago

0.0.2-1

2 years ago

0.0.2-0

2 years ago

0.0.1-19

2 years ago

0.0.1-16

2 years ago

0.0.1-18

2 years ago

0.0.1-17

2 years ago

0.0.1-15

2 years ago

0.0.1-12

2 years ago

0.0.1-11

2 years ago

0.0.1-14

2 years ago

0.0.1-13

2 years ago

0.0.1-10

2 years ago

0.0.1-9

2 years ago

0.0.1-8

2 years ago

0.0.1-7

2 years ago

0.0.1-6

2 years ago

0.0.1-5

2 years ago

0.0.1-4

2 years ago

0.0.1-3

2 years ago

0.0.1-2

2 years ago

0.0.1-1

2 years ago

0.0.1-0

2 years ago

0.0.0

2 years ago