Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wszgrcy/ng-window
基于angular和material-design设计的多窗口操作页面
https://github.com/wszgrcy/ng-window
angular angular-material
Last synced: about 1 month ago
JSON representation
基于angular和material-design设计的多窗口操作页面
- Host: GitHub
- URL: https://github.com/wszgrcy/ng-window
- Owner: wszgrcy
- License: gpl-3.0
- Created: 2019-04-21T09:41:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:52:34.000Z (almost 2 years ago)
- Last Synced: 2024-04-28T06:09:30.791Z (8 months ago)
- Topics: angular, angular-material
- Language: TypeScript
- Homepage: https://wszgrcy.github.io/ng-window/
- Size: 6.6 MB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgWindow
## 安装
- `npm i`
- e2e部分(如果要跑),可能需要通过某种方式进行下载(仅在启动e2e测试时需要)
- puppeteer 如果不跑e2e可以去掉此依赖包增加安装速度和未知报错(需要某种方式进行下载)
## 启动
- `npm start`
## 端对端测试
- `npm run e2e`
## 构建
- `npm run build`
## 说明
- 支持各种框架的web-componet组件及原生写法的引入
- 支持angular的模块懒加载
- 窗口模式,支持多任务切换和显示
- 通过网络调试模块,拦截请求返回模拟数据,加快调试
- 组件引入简单,耦合度低
---
## 组件(平时写的组件库展示在这里,更新延迟)
- [项目地址](https://github.com/wszgrcy/cyia-ngx-component)
- 需要安装`cyia-ngx-component`
- 所有组件均有实例
| 组件名 | 描述 | 引入模块 | 选择器 | 备注 |
| ---------- | --------------------------------------------------- | ------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|自定义选择器|仿照日期选择器的风格,为了适应不同的输入模式开发|CyiaCustompickerModule|`cyia-custompicker-toggle`,`cyia-custompicker-wrapper`|支持弹窗模式与附加模式,弹窗模式因为无法手动传入相关参数,导致不能支持异步加载|
| 颜色选择器 | 为了支持(补全)ie11上无法应用选择器而开发的组件, | CyiaColorPickerModule | cyia-colorpicker |
| 上传 | 为了补全material-design上没有相关上传组件而开发 | CyiaUploadModule | cyia-upload | 引入后其父元素的点击事件会触发上传,建议如下使用 ```Primary ``` |
| 时间选择器 | 为了给material-design的日期选择增加小时和分钟的设置 | CyiaDatePickerModule | cyia-datepicker | 与日期选择器中的``使用一致,替换其标签 |
| 切换组件 | 类似名片的正反面,通过切换显示另一面 | CyiaComponentToggleModule | cyia-component-toggle | 需要两个模板作为正面显示和反面显示 |
### 自定义选择器
- 通过自己定义相关逻辑,将控件融合到matd风格的表单中
- 支持同步加载和异步加载组件
- 支持dialog和overlay两种显示模式
### 颜色选择器
- 一个angular的自定义表单控件
- 支持模板驱动表单和动态表单
- 返回16进制的颜色
### 上传
- 两种上传均需要父元素包裹.均基于`mat-button`设计,但是可通过`depth`调整所属父元素
#### 通用上传
- 一个angular的自定义表单控件
- 支持模板驱动表单和动态表单
| 属性 | 类型 | 描述 | 默认值 |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |-|-|
| acceptType | [与file类型的input相同](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) |
| multiple | boolean | 是否是多文件 |
| depth | number | 和父元素相隔的层级,默认为依据mat-button设计 | 2 |
| nameInput | HTMLInputElement | 如果设置了该属性,上传文件的文件名将显示在nameInput元素中,仅限为单文件状态 |
| disabled | boolean | 是否禁用 |
| fileOnBeforeUpload | (_value, value: File[]) => Promise | 一般选择文件是为了上传,此属性是处理文件在上传前的操作 |
| fileOnUpload | `(_value, value: File[]) => Promise`,value为上一个返回值 | 一般选择文件是为了上传,此属性是处理文件如何上传 |
| fileOnAfterUpload | `(_value, value: File[]) => Promise`,value为上一个返回值 | 一般选择文件是为了上传,此属性是处理文件上传后,返回值为表单控件的值 |
#### 图片上传
- 选择器`cyia-upload4image`
- 一个angular的自定义表单控件
- 支持模板驱动表单和动态表单
| 属性 | 类型 | 描述 | 默认值 |
| ---------- | ------------- | ----------------------------------------------------- | ---------------------------------------------------- |
| hasBtnView | boolean | 是否有查询按钮 | false |
| accept | string | 接受的图片类型 | 'image/gif,image/jpeg,image/jpg,image/png,image/svg' |
| unit | {value,label} | 显示大小,value:b,kb,mb,gb;label为要显示的单位,例如:兆 |
| depth | number | 和父元素相隔的层级,默认为依据mat-button设计 | 2 |
| multiple | boolean | 是否是多文件 | false |
### 时间选择器
- 一个angular的自定义表单控件
- 支持模板驱动表单和动态表单
| 属性 | 类型 | 描述 | 默认值 |
| ------------- | ------------- | ------------------------- | ------ |
| accurate | boolean | 用来决定是否显示小时,分钟 | false |
| matDatepicker | MatDatepicker |
### 切换组件
| 属性 | 类型 | 描述 | 默认值 |
| --------- | ------ | -------------------------------- | ------ |
| direction | string | 动画选择方向,x,y,z |
| duration | number | 动画持续时间,毫秒数 |
| origin | string | 与`transform-origin`设置属性一致 |
--------
## 指令
- 引入包`cyia-ngx-component`
- 引入模块 `CyiaDirectiveModule`
| 指令名 | 描述 | 选择器 |
| ------------ | -------------------------------------------------------------------------------------------------------------------------- | -------------------- |
| 附加组件 | 指令所在的元素上,通过点击显示出被附加组件,可以设置附加组件策略 | [cyiaFabList] |
| 拖动上传 | 指令所在的元素上,可以通过拖动上传文件 | [cyiaFileDropzone] |
| 分页器补丁 | 指令所在的分页器组件上(mat-paginator),用来注入页面的序号(原组件没有相关页面序号显示,只能点击上一页下一页,第一页和最后一页) | [cyiaPaginatorPatch] |
| 文本复制指令 | 监听点击事件发生copy事件(告知已经复制) | [cyiaTextCopy] |
### 附加组件
- 通过查询子元素的`TemplateRef`,作为显示的附加组件
| 属性 | 类型 | 描述 | 默认值 |
| ----------- | ------- | ------------ | ------ |
| cyiaFabList | FabItem | 设置附加策略 |
```ts
export interface FabItem {
origin?: number//如果有多个模板,则可以指定附加在哪个模板上,进行多级附加
positionStrategyList?: PositionStrategy[]
}
export interface PositionStrategy {
offsetX?: number;
offsetY?: number;
//doc @angular/cdk/overlay
originPos: OriginConnectionPosition,
overlayPos: OverlayConnectionPosition
}
```
### 拖动上传
| 属性 | 类型 | 描述 | 默认值 |
| ----------- | ------- | ------------ | ------ |
|files|File[]|双向绑定,拖动后从这里获取拖动文件
### 分页器补丁
- 附加在`mat-paginator`即可
### 文本复制
| 属性 | 类型 | 描述 | 默认值 |
| ----------- | ------- | ------------ | ------ |
|copy|事件|复制成功发送事件
|value|string|要复制的文本
---
## 待完善文档
- `markdown`
> 使用monaco-editor来实现的编辑功能,显示功能可以通过自定义的类名对不同标签处理
> 支持自定义编辑,可以将自己的组件用angular的自定义元素的方法(angular官网采用的方法)进行显示
- `formgroup`
> 将matd的多种输入控件融合在一起的表单,通过配置显示
- `dynamic-component/dynamic-control`
> 用于解决某些组件使用较少,但是确实会被使用,而采用按需加载,减少请求时间
## 已知问题
- 当angular编写的组件封装为web-component引入时,先点击angular的封装组件,再点击其他的web-component组件时,会引入失效
> 封装的angular组件自身的路由会将项目的路由覆盖掉,导致其他的组件无法加载.
> 可能要从angular自身的编译配置查看为何会失效