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

ant-colony-ui

v1.7.28

Published

Ant Colony UI Toolkit based on Ant Design and React

Downloads

53

Readme

ant-colony-ui

Ant Colony UI Toolkit based on Ant Design and React

NPM JavaScript Style Guide

初衷

  • 在 antd 上封装一层,项目中不引用antd,方便以后将antd替换
  • 业务大组件封装,方便快速开发,风格统一

设计

  • JSON In, JSON Out
    • 组件参数接收 配置 JSON
    • 组件回调输出 结果 JSON
  • 默认值覆盖大多数情况
  • 尽量可自定义满足少数情况

组件

  • NavFrame
    • layout
    • menus
    • pageLinks
    • title
    • actions
  • Form
    • forms 必填 , 为Object的数组, Object字段如下
      • key 必填
      • label 必填
      • type
        • input default
        • add 动态添加
        • header
        • info
        • select
        • textArea
        • date
        • checkbox
        • radio
        • rangeDate
        • month
      • placeholder
      • required
        • bool
        • function
      • reg
        • pattern
        • message
      • value
      • disabled
      • alwaysEnable
      • meta type为select时有效
        • ref
          • 表单联动时需要参考的字段的 key
        • mode
          • undefined default
          • tags
          • multiple
        • data function / array
          • 若有ref配置,function的参数 refValue 为参考字段的值
        • showSearch
      • addLabel type为add时有效
      • addKeys type为add时有效
        • 需要动态添加的字段的key值的数组
      • showTime type为date时有效
      • onChange
      • data type为select时有效
    • accessoryComponent
      • 函数
      • 可返回不受表单控制的附加 UI,
      • 参数为函数 getFormItem,可返回受表单控制的自定义UI
      • getFormItem 接收参数为Object, Object 字段如下
        • label必填
        • key必填
        • value
        • required
        • reg
    • onSubmit,参数如下
      • values
        • JSON Out
      • clear
        • 函数,调用可清空表单
    • onReset
      • 重置表单回调
    • layout
      • columnCount
        • 默认列数
      • rowColCounts
        • 每行列数的数组
        • 若数组列数之和小于所有表单字段数,数组最后一项的列数为之后剩余字段的布局列数
      • actionDirection
        • 页末操作按钮的位置
        • left
        • center
        • right
      • labelPostion
        • 字段Label的位置
          • left
          • top
      • . . . . . .
    • disableEnterSubmit
    • … …
  • Table
    • columns 必填, 为Object的数组, Object字段如下
      • title 必填
      • dataIndex必填
      • editable
        • bool
        • function
      • type editable 为 true时有效
        • input default
        • select
        • tags
        • multiple
      • meta type 为 select tags multiple 时有效
        • ref
          • 可以参考 Table 同 Row 的其他列字段,与之联动
        • data function / array
          • 若有ref配置,function的参数 refValue 为参考字段的值
      • required
      • disabled
      • fixed
      • width
      • reg
        • pattern
        • message
      • actions
        • label 必填
        • callback
          • 接收参数 text, record, index
        • show bool / function
          • 函数时接收参数 text, record, index
          • 函数时需返回bool
        • confirm
        • confirmLabel
    • dataSource 必填
    • onCellSave editable为true时回调
    • scrollWidth
      • 建议指定为大于表格宽度的固定值或百分比, 如 1000
      • 配合 fixed column 或 floatingScrollDomQuery 使用
    • floatingScrollDomQuery
      • 一般为 ".ant-table-scroll .ant-table-body",使滚动条 floating
    • pagination
      • 参考 antd 的 pagination
    • onChange
      • 参数 pagination, filters, sorter
      • 主要用 pagination 进行分页
    • columnsConfigGlobalTableKey
      • 列配置的开启并指定全局唯一key(建议:项目唯一性简称+功能Model名+页面名+Table名等),用于缓存
    • . . . . . .
  • . . . . . .

Install

npm install --save ant-colony-ui

Usage

import React, { Component } from 'react'

import { Button } from 'ant-colony-ui'

class Example extends Component {
  render () {
    return (
      <Button title="Default"/>
    )
  }
}

License

MIT © docoder