dataeye-ui

v0.4.31

Published

8 days ago

dataeye UI组件库

Downloads

1,216

0High
0Medium
0Low

dataeye

readme

dataeye UI 组件库

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

Cover

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

Dropdown

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

Tooltip

DatePicker

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