AngularJS에서 검색 상자 만들기

Oluwafisayo Oluwatayo 2024년2월15일

Angular Angular Search Box

AngularJS에서 Angular Material을 사용하여 아이콘이 있는 검색 상자 만들기
AngularJS에서 Font-Awesome을 사용하여 아이콘이 있는 검색 상자 만들기
결론

입력 막대 안에 자리 표시자를 구현하는 주된 이유는 사용자가 입력 필드에 무엇을 입력해야 하는지 알 수 있기 때문입니다. 검색 필드의 경우 자리 표시자 대신 검색 아이콘을 디자인할 수 있습니다.

검색 디자인은 그런 생각으로 좀 더 성숙한 모습과 느낌을 가지고 있습니다. 또한 검색 아이콘을 클릭 가능하게 만들어 일반적인 검색 아이콘을 검색 아이콘으로 대체할 수 있습니다.

Angular 프레임워크 내부에 아이콘이 있는 검색 상자를 구현하는 방법을 살펴보겠습니다.

AngularJS에서 Angular Material을 사용하여 아이콘이 있는 검색 상자 만들기

Angular Material은 웹 페이지에 사용하기 쉬운 구성 요소와 아이콘을 제공합니다. 이 예제에서 구현하겠습니다.

VS Code 내부의 터미널을 사용하여 새 Angular 프로젝트를 생성하고 프로젝트 폴더로 이동한 다음 ng add @angular/material을 사용하여 material 모듈을 설치합니다.

그런 다음 app.component.html로 이동하여 다음 코드를 작성합니다.

코드 스니펫 - app.component.html:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <span matPrefix> </span>
    <input type="tel" matInput placeholder="Search" name="search" [(ngModel)]="search">
    <button matSuffix mat-button>
      <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>
  <br />
  {{search}}
</form>

matSuffix는 입력 필드 뒤에 검색 아이콘을 배치하고 mat-icon을 사용하여 검색 아이콘을 만듭니다.

그런 다음 검색 아이콘을 작동시킬 모듈을 가져옵니다. app.module.ts 파일은 아래와 같아야 합니다.

코드 스니펫 - app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

출력:

AngularJS에서 Font-Awesome을 사용하여 아이콘이 있는 검색 상자 만들기

Font-Awesome은 모든 종류의 아이콘을 얻을 수 있는 최고의 장소이므로 검색 아이콘에 대한 Font-Awesome CSS 링크를 가져와야 합니다.

cdnjs.com/libraries/angular.js를 방문하여 프로젝트 앱의 app.component.html 파일 상단에 CSS URL을 복사합니다. 그런 다음 fontawesome.com에서 검색을 위한 CSS 클래스를 추가합니다.

그런 다음 나머지 코드를 다음과 같이 추가합니다.

코드 스니펫 - app.component.html:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sample" >
  <div class="sample ten">
    <input type="text" name="search" ng-model="search.$" placeholder="search">
    <button type="submit" class="btn btn-search">
      <i class="fa fa-search"></i>
    </button>
    <button type="reset" class="btn btn-reset fa fa-times"></button>
  </div>
  <br>
</div>

그런 다음 아래와 같이 CSS 스타일을 추가합니다.

코드 스니펫 - css:

* {
  box-sizing: border-box;
}

html,
body {
  font-size: 12px;
}

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 50%;
}
input:focus {
  outline: none;
}

button {
  text-align: center;
}
button:focus {
  outline: none;
}
button.btn-search, button.btn-reset {
  background: #568683;
  border: none;
  height: 30px;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  width: 30px;
}

.sample {
  float: left;
  height: 50px;
  margin: 0 8%;
  position: relative;
  width: 34%;
}
.sample.ten input {
  border-radius: 15px;
  transition: all .6s ease-in-out .3s;
  width: 120px;
}
.sample.ten input:focus {
  transition-delay: 0;
  width: 200px;
}
.sample.ten input:focus ~ button {
  transform: rotateZ(360deg);
}
.sample.ten input:focus ~ button.btn-search {
  background: #568683;
  color: #fff;
  left: 172px;
  transition-delay: 0;
}
.sample.ten input:focus ~ button.btn-reset {
  left: 202px;
  transition-delay: .3s;
}
.sample.ten button {
  transition: all .6s ease-in-out;
}
.sample.ten button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  transition-delay: .3s;
  width: 26px;
}
.sample.ten button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}

출력:

결론

아이콘이 있는 검색 상자를 만드는 것은 방문자에게 입력 필드의 용도를 알리는 매우 미묘한 방법이며 제출 버튼 역할을 하여 웹 페이지에 다른 콘텐츠를 위한 공간을 제공할 수 있습니다.

작가: Oluwafisayo Oluwatayo

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.