# ngx-full-content

> 安装

Latest version **0.0.2** (published 2020-06-19) · 0 weekly downloads

## Install

```sh
npm install ngx-full-content
pnpm add ngx-full-content
yarn add ngx-full-content
bun add ngx-full-content
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-06-19 |
| First published | 2020-06-19 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 167.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | fengineg |

## Links

- npm: https://www.npmjs.com/package/ngx-full-content
- npm.io page: https://npm.io/package/ngx-full-content

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.10.0

## Recent versions

- 0.0.2 (latest) — 2020-06-19
- 0.0.1 — 2020-06-19

## README

安装

```
npm install ngx-full-content
```

全屏工作区，控制单个的内容模块全屏显示。

## API

### full-content

| 参数             | 说明         | 类型      | 默认值 |
| ---------------- | ------------ | --------- | ------ |
| `[(fullscreen)]` | 是否完整全屏 | `boolean` | -      |
| `[padding]`      | 工作区内边距 | `number`  | `24`   |

### [full-toggle]

切换是否全屏。

## 全屏控制

包含三种方式：

- 使用 `fullscreen` 双向绑定
- 使用 `[full-toggle]` 指令
- 使用 `FullContentService.toggle()` 服务

切换到全屏后，body 元素上会新增 `full-content__opened` class , 那块内容需要显示隐藏，可以根据这个 class 进行进一步控制

##实例

```
import { NgxFullContentModule } from 'ngx-full-content'
```

```
 <ngx-full-content (fullscreenChange)="change($event)" >
      <div style="background: #ccc;">
        <button full-toggle class="ml-sm">全屏</button>
      </div>
</ngx-full-content>
```

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