# @flosportsinc/ng-grid-list 中文文档

规范地址：https://npmcn.com/package/%40flosportsinc/ng-grid-list/

版本：13\.3\.0
npm 元数据更新时间：2022-04-05T11:19:36.921Z
中文译文更新时间：2026-11-15T00:23:42.274Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40flosportsinc/ng-grid-list
原文对照：https://npmcn.com/package/%40flosportsinc/ng-grid-list/?lang=original
项目主页：https://github.com/flocasts/flo-angular#readme
源码仓库：https://github.com/flocasts/flo-angular

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.4 MB，45 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/common \>= 6，@angular/core \>= 6，typescript-monads ^3\.13\.0
- 首次发布：2019-05-18T04:02:39.068Z
- 最新版本发布：2020-02-21T21:41:45.325Z
- 近 30 天下载量：3435（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：72（近 12 个月 0 个）

## 中文简介

Angular Universal 项目的简单媒体网格布局.

## 安装

```sh
npm install @flosportsinc/ng-grid-list
```

也可以使用：`pnpm add @flosportsinc/ng-grid-list`、`yarn add @flosportsinc/ng-grid-list`、`bun add @flosportsinc/ng-grid-list`

## README

# 网格列表

Angular Universal 项目的简单媒体网格布局.

## 安装

```sh
npm i @flosportsinc/ng-grid-list
```

导入 `FloGridListModule`数字 :

```js
import { NgModule } from '@angular/core'
import { FloGridListModule } from '@flosportsinc/ng-grid-list'

@NgModule({
  imports: [
    FloGridListModule
  ]
})
export class AppModule { }
```

已配置值 :

```js
import { NgModule } from '@angular/core'
import { FloGridListModule } from '@flosportsinc/ng-grid-list'

// Available options, defaults are shown.
// When configured these values become the defaults when 
// no @input property is provided for the same property 
@NgModule({
  imports: [
    FloGridListModule.config({
      selectNextEmptyOnCount: false,
      selectNextEmptyOnAdd: false
      selectFromLowerIndicesFirst: false,
      containerIdPrefix: '__fs_grid__',
      fillToFit: true,
      items: [],
      count: 4,
      max: 25,
      min: 1,
      maxHeight: 600,
      selectedIndex: 0,
      dragDrop: {
        enabled: true,
        allowedFromLists: true,
        dragOverBgEnabled: true,
        dragOverBgColor: '#808080',
        dragOverBgOpacity: 0.70
      },
      overlay: {
        throttle: 30,
        static: false,
        start: true,
        ngStyle: {},
        ngClass: {},
        fadeout: 2000,
        enabled: true
      }
    })
  ]
})
export class AppModule { }
```

## 使用量

```html
<!-- GRID VIEWPORT -->
<!-- Available items are defined from N number of flo-grid-list -->
<flo-grid-list-view #gridRef>
  <div *floGridListOverlay> <!-- optional: an overylay can be marked like so -->
    <button (click)="gridRef.setCount(1)">1</button> <!-- notice the use of the grid's api via #gridRef variable -->
    <button (click)="gridRef.setCount(2)">2</button>
    <button (click)="gridRef.setCount(4)">4</button>
  </div>
  <div *floGridListItemNone> <!-- when a square is shown but has no item value, use a template here -->
    Something goes here when items are EMPTY!
  </div>
  <div *floGridListItemSome="let item"> <!-- Magic -->
    Show some html or components here complete with values from the list.
    ex: {{ item.id }}
  </div>
</flo-grid-list-view>

<!-- LIST -->
<!-- [gridTileRef] is required to send the items to a grid  -->
<!-- [items] is where your data model comes in and fills the lists  -->
<flo-grid-list [gridTileRef]="gridRef" [items]="items"> <!-- Magic -->
  <div *floGridListItem="let item">
    {{ item.src }}
  </div>
</flo-grid-list>
```

## 常见问题

### @flosportsinc/ng-grid-list 是什么？

Angular Universal 项目的简单媒体网格布局\.

### 如何安装 @flosportsinc/ng-grid-list？

在项目目录运行 npm install @flosportsinc/ng-grid-list，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/common（\>= 6）、@angular/core（\>= 6）、typescript-monads（^3\.13\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @flosportsinc/ng-grid-list 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @flosportsinc/ng-grid-list 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @flosportsinc/ng-grid-list 可以商用吗？

@flosportsinc/ng-grid-list 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @flosportsinc/ng-grid-list 的下载量有多少？

根据 npm 官方下载统计，@flosportsinc/ng-grid-list 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,435 次，日均约 115 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @flosportsinc/ng-grid-list 还在维护吗？

最新版本 13\.3\.0 发布于 2020/02/22（6 年前）；至今共发布 72 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/05/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。