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 interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es “Entradas”. Las entradas se utilizan para varios propósitos en una página web. Es útil para tomar información del usuario en tiempo real y guardarla en una base de datos. Dependiendo de los requisitos del uso de insumos, existen diferentes variaciones de insumos. Uno de ellos es la variación etiquetada.
La variación etiquetada de entrada de IU semántica se usa para agregar una etiqueta a una entrada para representar información adicional. La entrada puede tener un prefijo o sufijo fijo, aquí es cuando la variación etiquetada es útil. Puede haber información adicional específica para algunas entradas que el usuario necesita saber. Los usuarios pueden agregar diferentes etiquetas como etiquetas para este propósito.
Clase de variación etiquetada de entrada de interfaz de usuario semántica:
- etiquetado : esta clase se utiliza para especificar etiquetas para las entradas.
Sintaxis:
<div class="ui labeled input"> <div class="ui label"> .... </div> <input type="text" placeholder="...."> </div>
Ejemplo 1: este ejemplo demuestra la variación de la etiqueta de entrada utilizando la clase etiquetada . Puede ver la salida en la imagen a continuación que muestra diferentes entradas etiquetadas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b><p>Semantic UI Input Labeled Variation</p></b> <hr><br/> <div class="ui labeled input"> <div class="ui basic label"> $ </div> <input type="text" placeholder="Enter amount.."> </div> <br/><br/> <div class="ui right labeled input"> <input type="text" placeholder="Enter length.."> <div class="ui basic label"> cm </div> </div> <br/><br/> <div class="ui right labeled left icon input"> <i class="folder icon"></i> <input type="text" placeholder="Create new account"> <a class="ui tag label"> New </a> </div> <br/><br/> <div class="ui right labeled input"> <input type="text" placeholder="Enter your email"> <a class="ui right corner label"> <i class="mail icon"></i> </a> </div> <br/><br/> </div> </body> </html>
Producción :
Variación etiquetada de entrada de interfaz de usuario semántica
Ejemplo 2: Este ejemplo demuestra la variación de la etiqueta de entrada usando la clase etiquetada . Puede ver la salida en la imagen a continuación, que muestra diferentes estados de entrada como entradas etiquetadas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Input Labeled Variation</p> </b> <hr><br/> <div class="ui labeled focus input"> <div class="ui label"> Focus Input </div> <input type="text" placeholder="Enter your text"> </div> <br/><br/> <div class="ui labeled error input"> <div class="ui label"> Error Input </div> <input type="text" placeholder="Enter your text"> </div> <br/><br/> <div class="ui labeled disabled input"> <div class="ui label"> Disabled Input </div> <input type="text" placeholder="Enter your text"> </div> <br/><br/> <div class="ui labeled transparent input"> <div class="ui label"> Transparent Input </div> <input type="text" placeholder="Enter your text"> </div> <br/><br/> </div> </body> </html>
Producción:
Variación etiquetada de entrada de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html#labeled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA