npm.io
0.0.2 • Published 6 years ago

ngx-full-content

Licence
Version
0.0.2
Deps
1
Size
167 kB
Vulns
0
Weekly
0

安装

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>