gurezo / pipe-sample

this is angular pipe sample

pipe-sample

this is angular pipe sample

This project was generated with Angular CLI version 6.0.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

pipe-sample's Issues

memo

<p>
  <label>
    {{ value }}
  <span>
      {{ value }}
  </span>
  </label>
</p >

---

p {
  font-size: 14px;
  line-height: inherit;
  margin-bottom: 5px;
  text-overflow: ellipsis;
  white-space: normal;
}

p > label {
  background: $tag-color;
  color: white;
  display: inline-block;
  font-size: 14px;
  line-height: inherit;
  margin: 5px 5px 5px 0;
  padding: 0 5px;
  position: relative;
}

// バルーンのスタイル
span {
  animation-duration: .3s;
  animation-name: show-balloon;
  background-color: silver;
  border-radius: 5px;
  box-shadow: 0 1px 2px 0 silver;
  color: white;
  display: none;
  left: 0;
  opacity: 0;
  padding: 5px;
  position: absolute;
  top: -40px;
  white-space: nowrap;
}

// マウスホバー時バルーンのスタイル
label:hover {

  span {
    display: inline-block;
    opacity: 1;
    top: -40px;
  }
}

// 吹き出し部分の三角形
span::before {
  border: 6px solid transparent;
  border-top: 6px solid silver;
  content: "";
  left: 20px;
  position: absolute;
  top: 97 %;
}

// アニメーション定義
@keyframes show-balloon {
  0% {
    display: none;
    opacity: 0;
    top: -30px;
  }

  1% {
    display: inline-block;
    opacity: 0;
    top: -30px;
  }

  100% {
    display: inline-block;
    opacity: 1;
    top: -40px;
  }
}