ngx-admin/src/app/pages/ui-features/search-fields/search-fields.component.html

<div class="row">
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Layout Rotate Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="rotate-layout"
          tag="rotate-layout"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Modal Zoomin Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="modal-zoomin"
          tag="modal-zoomin"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Modal Move Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="modal-move"
          tag="modal-move"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Modal Drop Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="modal-drop"
          tag="modal-drop"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Modal Half Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="modal-half"
          tag="modal-half"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Curtain Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="curtain"
          tag="curtain"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
  <div class="col-md-6">
    <nb-card>
      <nb-card-header>
        Column Curtain Search
      </nb-card-header>
      <nb-card-body>
        <nb-search
          matRipple
          [matRippleUnbounded]="true"
          [matRippleCentered]="true"
          [matRippleRadius]="36"
          type="column-curtain"
          tag="column-curtain"
        ></nb-search>
      </nb-card-body>
    </nb-card>
  </div>
</div>