Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble.
La entrada de IU semántica es un campo que se utiliza para obtener información de los usuarios. Tipo de entrada define el tipo de entrada que solicitó del usuario. Nos ofrece una variante diferente de entradas como icono, etiquetada, acción, transparente, invertida, fluida y tamaño.
En este artículo, aprenderemos sobre la variante del icono de entrada de la interfaz de usuario semántica.
La variante de icono de entrada de interfaz de usuario semántica se usa cuando queremos mostrar iconos dentro de cualquier campo de entrada.
Clase de variante de icono de entrada de IU semántica:
- icono: esta clase se utiliza para incluir el icono en el campo de entrada.
Sintaxis:
<div class="ui icon input"> <input type="..."> <i class="...icon"></i> </div>
Ejemplo: El siguiente ejemplo ilustra la variación del icono de entrada de la interfaz de usuario semántica . En este ejemplo, crearemos dos campos de entrada donde usaremos dos íconos diferentes.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Input Icon Variation</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic-UI Input Variations Icon Variant</strong> <br><br> <strong>Username:</strong> <div class="ui left icon input"> <input type="text" placeholder="Username"> <i class="user icon"></i> </div> <strong>Password:</strong> <div class="ui left icon input"> <input type="email" placeholder="Password"> <i class="key icon"></i> </div> </center> </body> </html>
Producción:
Variaciones de entrada de interfaz de usuario semántica Variante de icono
Enlace de referencia: https://semantic-ui.com/elements/input.html#icon
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA