ng-taifur v1.0.4

Installation

Use npm to install the package

$ npm i ng-taifur --save

Usage

Add NgTaifurModule into your module.

import { NgTaifurModule } from 'ng-taifur';
 
@NgModule({
 // ...
 imports: [
   // ...
   NgTaifurModule
 ]
})

taifur-modal

Usage

Add Html code into your Component.

<button taifur-modal="example-modal">ToggleModal</button>

<div class="taifur-modal" id="example-modal">
  <div taifur-modal-dismiss class="taifur-modal-bg"></div>
  <div class="taifur-modal-content">
    <button taifur-modal-dismiss class="taifur-modal-dismiss"></button>
    <div class="taifur-modal-body">
      // your Contents
    </div>
  </div>
</div>

To prevent the modal from closing when clicking outside just remove

<div taifur-modal-dismiss class="taifur-modal-bg"></div>

from your Html.

Some recommended css:

.taifur-modal {
  position: fixed;
  visibility: hidden;
  z-index: 40;
  transition: .5s;
  animation: taifur-modal-hide .5s ease;
  background-color: rgba(0, 0, 0, 0.4);
  &.show {
    visibility: visible;
    animation: taifur-modal-show .5s ease
  }
  .taifur-modal-bg {
    position: absolute;
  }
  &,
  .taifur-modal-bg {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
  }
  .taifur-modal-content {
    position: relative;
    background: #fff;
    width: 92%;
    max-width: 40rem;
    margin: 1.75rem auto;
    border-radius: .15rem;
    .taifur-modal-body {
      padding: .7rem;
      width: 100%;
      min-height: 5rem;
      max-height: calc(100vh - 5rem);
      overflow: auto;
    }
    .taifur-modal-dismiss {
      border: none;
      border-radius: 50%;
      cursor: pointer;
      height: 25px;
      width: 25px;
      right: -10px;
      top: -10px;
      outline: 0;
      position: absolute;
      background: rgba(10, 10, 10, .56);
      &:after,
      &:before {
        background-color: #fff;
        content: "";
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translateX(-50%) translateY(-50%) rotate(45deg)
      }
      &:after {
        height: 50%;
        width: 2px
      }
      &:before {
        height: 2px;
        width: 50%
      }
      &:focus,
      &:hover {
        background-color: rgba(10, 10, 10, .3)
      }
      &:active {
        background-color: rgba(10, 10, 10, .6)
      }
    }
  }
}

@keyframes taifur-modal-show {
  from {
    top: -50%;
    opacity: 0
  }
}

@keyframes taifur-modal-hide {
  to {
    top: -50%;
    opacity: 0
  }
}

License

Comming soon