Crear un cuadro de búsqueda en AngularJS
- Cree un cuadro de búsqueda con icono usando material angular en AngularJS
- Cree un cuadro de búsqueda con icono usando Font-Awesome en AngularJS
- Conclusión
La principal razón para implementar marcadores de posición dentro de las barras de entrada es que los usuarios sabrán lo que se espera que completen en el campo de entrada. En el caso de un campo de búsqueda, podríamos diseñar un icono de búsqueda en lugar de un marcador de posición.
El diseño de búsqueda tiene una apariencia más madura con esa idea. Además, el ícono de búsqueda puede reemplazar el ícono de búsqueda habitual al hacer que se pueda hacer clic en el ícono de búsqueda.
Veamos métodos para implementar el cuadro de búsqueda con iconos dentro del marco Angular.
Cree un cuadro de búsqueda con icono usando material angular en AngularJS
El material angular nos proporciona componentes e íconos fáciles de usar para nuestra página web. Lo implementaremos en este ejemplo.
Usando el terminal dentro de VS Code, comenzamos creando un nuevo proyecto Angular, navegamos a la carpeta del proyecto e instalamos el módulo material con ng add @angular/material.
Luego navegamos hasta el app.component.html para escribir estos códigos:
Fragmento de código- 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>
El matSuffix coloca el ícono de búsqueda después del campo de entrada, y usamos el mat-icon para crear el ícono de búsqueda.
Luego importamos los módulos que harán funcionar el icono de búsqueda. El archivo app.module.ts debería tener el siguiente aspecto:
Fragmento de código- 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 { }
Producción:
Cree un cuadro de búsqueda con icono usando Font-Awesome en AngularJS
Font-Awesome es el lugar número uno para obtener todo tipo de íconos, por lo que debemos importar el enlace CSS de Font-Awesome para el ícono de búsqueda.
Visitamos cdnjs.com/libraries/angular.js y copiamos la URL CSS en la parte superior del archivo app.component.html de la aplicación del proyecto. Luego agregamos la clase CSS para la búsqueda desde fontawesome.com.
Luego agregamos el resto de los códigos así:
Fragmento de código- 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>
Luego agregamos el estilo CSS como se muestra a continuación:
Fragmento de código- 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;
}
Producción:
Conclusión
Crear un cuadro de búsqueda con un ícono es una forma muy sutil de informar a los visitantes para qué sirve ese campo de entrada y puede servir igualmente como un botón de envío, dando espacio a su página web para otros contenidos.
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.
LinkedIn