# @zyzcss/utils

> A test component demo

Latest version **0.0.13** (published 2019-11-01) · ISC license · 0 weekly downloads

## Install

```sh
npm install @zyzcss/utils
pnpm add @zyzcss/utils
yarn add @zyzcss/utils
bun add @zyzcss/utils
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.13 |
| Published | 2019-11-01 |
| First published | 2019-10-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 705.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zyzcss |

## Links

- npm: https://www.npmjs.com/package/@zyzcss/utils
- npm.io page: https://npm.io/package/@zyzcss/utils

## Recent versions

- 0.0.13 (latest) — 2019-11-01
- 0.0.12 — 2019-10-28
- 0.0.11 — 2019-10-28
- 0.0.10 — 2019-10-25
- 0.0.9 — 2019-10-25
- 0.0.8 — 2019-10-23
- 0.0.7 — 2019-10-23
- 0.0.6 — 2019-10-22
- 0.0.5 — 2019-10-22
- 0.0.4 — 2019-10-22
- 0.0.3 — 2019-10-22
- 0.0.2 — 2019-10-21
- 0.0.1 — 2019-10-21

## README

# cybertron-ui


# 编写组件的CSS
### 样式目录结构
|--src
    |-- styles
      |-- index.less
      |-- index.ts
      |-- utilities.less
      |-- variables.less
    |-- button
      |-- styles
            |-- index.less
            |-- index.ts

### 命名结构
```
// 1. 所有组件基本结构 项目前缀 + 组件名称
.@{prefix}btn {}

// 2. 组件内部结构命名使用 - 
.@{prefix}btn-text {}

// 3. 如果组件较为复杂，做了拆分（多组件）,使用下划线做区分
// 按钮的下拉部分
.@{prefix}btn_dropdown {}
// 下拉按钮
.@{prefix}btn-dropdown {}

// 4. 使用 -- 表示组件不同状态
.@{prefix}btn--active {}

// 5. 组合多类
className={classNames('btn','btn-dropdown')}
```
### css属性规范
老项目直接复制过来吧
属性改成变量方便统一

### 编写
```
import { getClassName } from '../utils';
getClassName('button','inner')
getClassName('button','active')
getClassName('button','','addon')

```
```
@import '../../styles/variables';
.@{prefix}button {
  color: @primary-color;
}
```
### 和现有项目结合
项目中使用的基础组件任然用antd的
颜色使用antd的配置
input,select,button高度字体等，因为项目样式方案不统一，所以高度尺寸配置后影响可能比较大，需要一一验证
特殊尺寸不配置antd，如filter组件中表单的更小，直接使用组合/覆盖的方式。

# 组件列表
antd 作为 base库
大部分组就按不需要另外开发
### 基础ui
- 图标（多模式:默认，表格按钮,）
- 标题(多模式)
- 卡片
- 面包屑
- 文字省略


### 基础布局
- 框架头部
- 头部信息

### 扩展antd
- 表格
- 搜索过滤
- 信息框
- 弹窗
- 表单配置
- 按钮(下拉，下拉菜单)
- 年份选择器
- 文件上传
- 

### 复用逻辑组件(HOC)
- 下拉滚动select(withScrollSearch)
- 扁平展示select(withTagsSearch)
- 复制
- 下载
- 展开收起

### 业务组件
- 基础数据检测
- 导入按钮
- 高级搜索弹窗

---
_Source: https://npm.io/package/@zyzcss/utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._