[TOC]

ylf_ui

Describe ylf_ui here.

声明

此组件库仅为个人使用开发。

已支持组件

1. Button:按钮
   • 默认text模式
   • 支持primary模式
2. Icon:图标
   • 通过name设置相应字体
   • 通过size可便捷设置大小
   • 通过color可便捷设置颜色
3. Message:全局通知
   • Message.show
     • info{object}:第一个参数用于设置显示的内容
       • icon:消息通知图标
       • text:消息通知文字
     • destoryTime{number}:第二个参数用于设置消息消失的时间
   • setMaxCount{number}:设置最多显示的消息数目，默认是15
4. Container:页面级大卡片
   • props.header{string}:设置卡片名称【可不设】
   • props.children:设置卡片内容
5. Loader:加载
   • size:设置图标大小
   • color:设置图标颜色
   • text:设置图标文字

正在开发的组件

• Menu:菜单
  • 支持hover效果
  • 支持selected功能
    • [x] 仅设置to属性的菜单项可以被选中【父菜单项不可选中，一般父菜单项仅为下拉功能存在】
  • 支持expand功能【树形扩展】
    • [x] 可通过expanded为对应菜单项设置初始展开状态
    • [x] 希望有动画效果
    • [ ] 希望关闭后子级菜单的选中出现在对应父级，展开后选中回到对应的子级菜单【ant-design菜单在这里关闭后父级不会被选择，这样用户不能明显的从菜单处看到页面所处的层级，这是信息的丢失，会让用户失去掌控感，用户想要知道更多的信息】
  • 支持路由跳转，配置to属性【仅HashRouter模式】
    • [x] 不限层级【使用下拉功能的菜单项不要设置to属性】
  • 支持wide功能【宽度伸缩】
    • [x] 希望hover显示子级菜单【以卡片形式浮现】
    • [x] 希望hover显示的卡片可以有些距离
    • [x] 希望hover显示的卡片自适应高度时可以有动画
    • [x] 希望shrink【缩放】和wide【展开】菜单共用一套状态
  • 支持传递通过IconType自定义Icon组件
  • 支持通过icon配置项设置图标【仅根目录--第一层级支持设置】
  • 支持通过path配置初始页面
    • [x] 含selected效果

准备开发的组件

• MdContainer:MarkDown卡片
  • 特性
    • 自动读取文件名作为卡片名
    • 提供MD方法方法作为便捷设置方式
    • 解析MarkDown文件转换为Html文件【借助第三方库marked】
    • 自定义MarkDown文档样式【基于第三方库highlight.js的基础上】
    • 在左侧根据结构生成对应目录【点击即可跳转到对应部分】
  • API
    • path：文件路径【暂限本地文档】,会自动读取并设置卡片名【推荐方式】
    • header: 手动设置卡片名
    • doc: 手动设置文件内容【必须是转换后的html文档--如果安装了markdown-loader进行转换可以使用此API】
  • BUG:
    • hls未生效，内容没有高亮显示
    • marded转换异常，部分内容没有成功转换

组件等待修复的bug

• Menu组件多次点击expanded动画不稳定