npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@microduino/micdesign

v1.15.5

Published

microduino component design for react

Downloads

91

Readme

react components for web design

部分组件行为参考自ant Design,造自己的轮子,爱上编程,感谢开源社区。

使用前脑补关键字

程序逻辑:

程序逻辑是描述和论证程序行为的逻辑,又称霍尔逻辑。程序和逻辑有着本质的联系。如果把程序看成一个执行过程,程序逻辑的基本方法是先给出建立程序和逻辑间联系的形式化方法,然后建立程序逻辑系统,并在此系统中研究程序的各种性质。

业务逻辑

业务逻辑从名称上来看,首先是业务,这个业务一般是指软件要实现的功能,即客户的业务,要实现这些业务就有一个流程,流程是按某种关系形成的一个链,链之间的关系具有一定的逻辑性,综合起来就构成了业务逻辑。

抽象:

从具体事物抽出、概括出它们共同的方面、本质属性与关系等,而将个别的、非本质的方面、属性与关系舍弃,这种思维过程,称为抽象。

抽象是通过分析与综合的途径,运用概念在人脑中再现对象的质和本质的方法,分为质的抽象和本质的抽象。分析形成质的抽象,综合形成本质的抽象(也叫具体的抽象)。作为科学体系出发点和人对事物完整的认识,只能是本质的抽象(具体的抽象)。质的抽象只能是本质的抽象中的一个环节,不能作为完整的认识,更不能作为科学体系的出发点。

具象化

就是把抽象的东西 ,表现得很具体,简单地说 就是把看不见的、不容易理解的,变得看得见、容易理解。 

所以,才有了==micdesign==~~

example地址:https://alexwang007.github.io/micDesignExample/

npm i @microduino/micdesign --save-dev

使用babel-plugin-import实现按需加载

安装 babel-plugin-import 插件

npm i babel-plugin-import -D
// 在 .babelrc 或 babel-loader 中添加插件配置
{
  "plugins": [
    ["import", {
      "libraryName": "@microduino/micdesign",
      "style": "css",
      "camel2DashComponentName": false
    }]
  ]
}

现有组件列表

module.exports = {
    Form: require('./lib/Form').default,
    FormItem: require('./lib/FormItem').default,
    Input: require('./lib/Input').default,
    TextArea: require('./lib/TextArea').default,
    Button: require('./lib/Button').default,
    Image: require('./lib/Image').default,
    Radio: require('./lib/Radio').default,
    Checkbox: require('./lib/Checkbox').default,
    CheckboxGroup: require('./lib/CheckboxGroup').default,
    Select: require('./lib/Select').default,
    Search: require('./lib/Search').default,
    FileUpload: require('./lib/FileUpload').default,
    Tags: require('./lib/Tags').default,
    Tabs: require('./lib/Tabs').default,
    InputTags: require('./lib/InputTags').default,
    UserAvatar: require('./lib/UserAvatar').default,
    Modal: require('./lib/Modal').default,
    Rate: require('./lib/Rate').default,
    Loading: require('./lib/Loading').default,
    Banner: require('./lib/Banner').default,
    CodeEditor: require('./lib/CodeEditor').default,
    Editor: require('./lib/Editor').default,
    Confirm: require('./lib/Confirm').default,
    Share: require('./lib/Share').default,
    Pagination: require('./lib/Pagination').default,
    OrderBtn: require('./lib/OrderBtn').default,
    Process: require('./lib/Process').default,
    Message: require('./lib/Message').default,
    Recorder: require('./lib/Recorder').default,
    DynamicInput: require('./lib/DynamicInput').default,
    SectorProcess: require('./lib/SectorProcess').default,
    Nav: require('./lib/Nav').default
    Step: require('./lib/Step').default
}

未来相关计划

2018遗留问题

micDesign 优化

  • Button组件增加几种常用颜色模式,
  • Button组件 loading状态重构,增加progress模式
  • Button组件重构,不再使用label包装,移动端圆角样式问题优化~~
  • Button组件增加color props,用于自定义颜色
  • 单例Radio组件实现~~
  • 单例Checkbox组件优化~~
  • 以前的Radio变成RadioGroup组件实现~~
  • 新增Table组件~~
  • Image 组件 src={setOssImage(undefined, 185, 185)} 错误图不出来
  • Input clear 没有触发onChange~~
  • 表单项的每个组件都需要增加error的样式和disable的样式~~~
  • 头像组件 禁言不能直接替换的问题(外部逻辑问题~~不一定处理)
  • input增加type=date处理 日历,日期选择组件实现~~~
  • ...的文字动画集成到micDesign里
  • tag组件和tags组件整理融合~~~抽离
  • tab优化,移动端项目com目录的Tab需要抽走,集成到micdesign里
  • tag标签增加颜色配置 字,和背景色
  • tag标签 反色模式~~~参考antd
  • 增加icon图标配置标签 字体图标库(可能要做另一个包了)
  • 拖拽排序功能封装~~~~~
  • 需要抽离用于表单的tag和用于展示的tag
  • textarea 的字数统计和input的字数统计,可以考虑合并这俩组件~~ 优先级不高~~
  • onerror的处理 应该扔在最后,外部出错会阻塞包内流程
  • 构建流程优化
  • 配置全局css~~~~非import babel plugin 模式可用,非react项目使用~~~

2019计划(重新定义拆分)

包名 | 介绍 ------- | ------- micdesign-pc | pc组件库 micdesign-mobile | mobile组件库 micdesign-iconFont | 字体库 micdesign-animition | 动画库 micdesign-layout | 布局库 micdesign-utils | 工具库 mic-accont-center | 账户中心GUI mic-share-anywhere | 分享通用GUI

  • ts重构或者增加flowtype
  • unittest增强
  • 跨平台相关,IDE插件集成
  • SEO相关优化集成

其他整理(待定)

  • canvas
  • svg
  • webGL
  • ECharts
  • AI
  • 3D
  • 游戏
  • scratch
  • anything...