Angular2 - Components - inputEffects

原设计：http://tympanus.net/codrops/2015/03/18/inspiration-text-input-effects-2/

这个组件用了一些 aweson Font 的 icon 还用了原作者的一个 search.svg

import {
  Component,
  OnInit,
  OnDestroy,
  ViewChild,
  ElementRef,
  Renderer,
  Input,
  Optional,
  Self,
  Attribute
} from "angular2/core"

@Component({
  selector: "inputEffects",
  templateUrl: "./app/components/inputEffects.html",
  styleUrls: ["./app/components/inputEffects.css"]
})
export class InputEffects implements OnInit, OnDestroy {
  //default Value
  _height: string = "150%"
  _width: string = "350px"
  _id: string = "input-1"
  _inputStyle: string = "kohana"
  _title: string = "Name"

  @Input("inputStyle")
  inputStyle: string
  @Input("title")
  title: string

  constructor(
    @Optional()
    @Self()
    @Attribute("height")
    height: string,
    @Optional()
    @Self()
    @Attribute("width")
    width: string,
    @Optional()
    @Self()
    @Attribute("id")
    id: string
  ) {
    this._height = height || this._height
    this._width = width || this._width
    this._id = id || this._id
  }

  ngOnInit() {
    this._inputStyle = this.inputStyle
      ? this.inputStyle.toLowerCase()
      : this._inputStyle
    this._title = this.title || this._title
  }
  ngOnDestroy() {
    console.log("ngOnDestroy")
  }
}

可配置项：

• _height: string = ‘150%’;
• _width: string = ‘350px’;
• _id: string = ‘input-1’;
• _inputStyle: string = ‘kohana’;
• _title: string = ‘Name’;

---

_inputStyle 可配置项：

• haruki
• hoshi
• kuro
• jiro
• minoru
• yoko
• hideo
• kyo
• akira
• ichiro
• juro
• madoka
• kaede
• isao
• manami
• nariko
• nao
• yoshiko
• shoko
• chisato
• makiko
• sae
• kozakura
• fumi
• ruri
• kohana

---

基本用法：

<inputEffects height="180%" width="300px" id="coolInput" [title]="_title" [inputStyle]="_inputStyle"></inputEffects>

_title = "Password"
_inputStyle = "shoko"

---

Source Code：
https://github.com/dreambo8563/CSS_Learning/tree/master/inputEffects