简介
diascope是一个基于React的可定制的UI组件库，它提供了许多高质量的组件，如日历、轮播图、时间轴等等。这些组件易于使用且高度可配置，可以快速构建出美观、高质量的用户界面。
安装和使用
通过npm安装diascope
npm install diascope --save
在项目中引入diascope组件
import { Calendar } from 'diascope';在渲染组件的位置加入需要的props属性
<Calendar disabledDays={[6, 0]} />
组件
基础组件
Button
按钮组件可以自定义按钮的样式、文字、事件等。
属性(API)
属性 类型 默认值 描述 type string 按钮类型 variant 'text' | 'outlined' | 'solid' 'text' 按钮样式 color string 按钮颜色 size 'small' | 'medium' | 'large' 'medium' 按钮大小 disabled boolean false 是否禁用按钮 disableRipple boolean false 是否开启ripple效果 startIcon any null 在按钮左侧插入一个元素 endIcon any null 在按钮右侧插入一个元素 onClick (event: React.MouseEvent<htmlbuttonelement>) => void undefined 点击按钮时的回调函数 示例代码
-- -------------------- ---- ------- ------ - ------ - ---- ----------- -------- ----- - ------ - ------- ------------------ --------------- ------------- ----- --- --------- -- -Calendar
日历组件支持单选和范围选取两种模式，同时提供了自定义日期格式、日期范围限制等功能。
属性(API)
属性 类型 默认值 描述 mode 'single' | 'range' 'single' 选择模式（单选、范围） value Date | [Date, Date] null 当前选择的日期 onChange (value: Date | [Date, Date]) => void 日期发生变化时的回调函数 minimalDays number 1 范围选择时的最小间隔天数 showOutsideDays boolean false 是否显示日历外的日期 disabledDays number[ ] [] 禁用选择的星期 disabledDates Date[ ] | ((currentDate: Date) => boolean) | undefined [] 禁用选择的日期 renderDay (date: Date) => React.ReactNode 渲染每一天对应的React元素 startDatePlaceholder string 'Start Date' 组件模式为range时起始日期文本框中的提示文本 endDatePlaceholder string 'End Date' 组件模式为range时结束日期文本框中的提示文本 dateFormat string 'yyyy-MM-dd' 日期格式 示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ----------- -------- ----- - ------ - --------- ------------ ----------- ---------- -- --- --- ---------- -- ----- ----------------- -- ------------------- --------------- ---------------------- ----------------- --- ------------------- ---------- -- ---- --- ---------- -- ----- ----------------- -- ---------------------------- ------------------------------ ---------------------------- ------------------------- -- -- -
进阶组件
Timeline
时间轴组件支持横向和纵向布局，样式和样式皮肤也比较多，支持左右位置、自定义图标等功能。
属性(API)
属性 类型 默认值 描述 orientation 'vertical' | 'horizontal' 'vertical' 时间轴方向 lineStyle React.CSSProperties {} 时间轴线条样式 itemStyle React.CSSProperties {} 时间轴元素样式 activeItemStyle React.CSSProperties {} 时间轴选中元素的样式 leftContentStyle React.CSSProperties {} 时间轴左侧元素的样式 rightContentStyle React.CSSProperties {} 时间轴右侧容器的样式 items { id: string; content: string; icon?: React.ReactNode } [ ] [ ] 时间轴元素数组 activeItemId string null 当前选中的时间轴元素的id值 onItemClick (id: string) => void 点击元素时被调用的回调函数 renderItem (item: { id: string; content: string; icon?: React.ReactNode }) => React.ReactNode 渲染时间轴元素内容的函数 示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ----------- -------- ----- - ----- ------------- - - - --- ---- -------- ----------- ----- ---------- -- -- - --- ---- -------- ----------- ----- ---------- -- -- - --- ---- -------- ----------- ----- ---------- -- -- - --- ----- -------- ----------- ----- ---------- -- - -- ------ - --------- --------------------- ------------------ ----------------- -- ---------------- ------------------ -- -------------------------- -- -- -Carousel
轮播组件支持自定义轮播图、自动播放、分页、虚拟模式、无限滚动等功能，易于使用且支持扩展。
属性(API)
属性 类型 默认值 描述 items any[ ] [ ] 轮播项 activeIndex number 0 当前激活的轮播项的索引 onChange (index: number) => void 轮播项发生变化时的回调函数 loop boolean false 是否无限循环轮播 autoplay boolean false 是否自动播放 interval number 3000 自动播放时的轮播速度 slidesToShow number 1 轮播项显示的数量 disableSwipe boolean false 是否禁用轮播项的滑动功能 transitionDuration number | { enter: number, exit: number } 400 轮播项切换时的动画时长 slideWidthPercentage number 100 轮播项占用的容器宽度百分比 enableMouseEvents boolean false 是否开启鼠标事件监听功能 showNavigationButtons boolean true 是否显示导航按钮 showPaginationDots boolean false 是否显示分页点 renderNavigationButton ({ isNext, onClick }) => React.ReactNode 渲染导航按钮对应的React节点 renderPaginationDot ({ index, isActive, onClick, ariaLabel }) => React.ReactNode 渲染分页点对应的React节点 示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ----------- -------- ----- - ----- ------------- - - - ------ ------ --- ------------ ------------ --- ---- ------------------------------------- -- - ------ ------ --- ------------ ------------ --- ---- ------------------------------------- -- - ------ ------ --- ------------ ------------ --- ---- ------------------------------------- -- - ------ ------ --- ------------ ------------ --- ---- ------------------------------------- - -- ------ - --------- --------------------- --------------- ----------------- -- ------------------- ----------- --------------- --------------- ---------------- ---------------------------- -------------------------- ------- ------- -- -- - ------- ------------------ ------- - ------ - ------- --------- -- ------------------------- ----------------------- ------ --------- -------- --------- -- -- - ------- ------------ --------------- - --------- - ------------ ----------------- - ------ - -- --------- -- -- -- -
总结
diascope 是一款高效、可扩展的UI组件库，可以帮助开发者快速构建出高质量的用户界面，并且提供了丰富的自定义选项，满足不同项目的需求。在它的帮助下，我们可以省去不少重复的开发工作，更好的实现高效开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc781e8991b448dd3d6