Skip to content

iwe7/iwe7-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

当css遇到rxjs-angular

这是一个神奇的想法,用流控制样式。

安装

yarn add iwe7-icss

Alt text

使用

import { IcssService, IcssInterface } from 'iwe7-css';

// cube颜色控制器
cubeColorCtrl$: Subject<{ color: string; bg: string }> = new Subject();
@ViewChild('cube') cube: ElementRef;
constructor(public icss: IcssService, public ele: ElementRef){}

ngOnInit(){
  this.icss.init(
    {
      cube: this.cubeColorCtrl$
    },
    this.cube
  );
  setInterval(() => {
    this.cubeColorCtrl$.next({
      color: '#fff',
      bg: this.randomHexColor()
    });
  },100);
}

randomHexColor(): string {
  return `#${(
    '00000' + ((Math.random() * 0x1000000) << 0).toString(16)
  ).substr(-6)}`;
}
<div class="cube"></div>
.cube{
  background: var(--cube-bg);
  color: var(--cube-color);
  width: 100px;
  height: 100px;
}

About

当css遇到rxjs-angular

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published