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. El usuario puede necesitar mostrar diferentes entradas en diferentes variaciones según sus requisitos. Para representar el significado de los datos de entrada, su variación puede variar.
Variaciones de entrada de la interfaz de usuario semántica:
- icon : Esta variación se usa para especificar iconos a las entradas.
- etiquetado : esta variación se usa para especificar etiquetas a las entradas.
- acción : esta variación se utiliza para relacionar la entrada con un botón de acción.
- transparente : esta variación se utiliza para especificar la variación transparente de las entradas.
- invertido : Esta variación se usa para hacer que la entrada se invierta (en cuanto al color).
- fluido : esta variación se utiliza para que la entrada tome el tamaño completo de su contenedor.
- tamaño : esta variación se utiliza para hacer que la entrada varíe en tamaño.
Ejemplo 1: el siguiente código también demuestra las variaciones de entrada anteriores.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Input Variations</title> <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 Variations</p> </b> <hr><br /> <span>Icon Variation : </span> <div class="ui icon input"> <input type="text" placeholder="Enter name to search..."> <i class="search icon"></i> </div> <br /><br /> <span>Labeled Variation : </span> <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 /> <span>Action Variation : </span> <div class="ui action input"> <input type="text" id="input" placeholder="Enter your message"> <button class="ui teal button"> Click </button> </div> <br /><br /> <span>Transparent Variation : </span> <div class="ui transparent input"> <input type="text" placeholder="Enter name / email"> </div> <br /><br /> <div class="ui inverted segment"> <p>Inverted Variation : </p> <div class="ui inverted input"> <input type="text" placeholder="Enter your name here"> </div> </div> <br /><br /> <p>Fluid Variation : </p> <div class="ui fluid icon input"> <input type="text" placeholder="Enter name to search..."> <i class="search icon"></i> </div> <br /><br /> <p>Size Variation : </p> <div class="ui mini input"> <input type="text" value="Mini" /> </div> <div class="ui small input"> <input type="text" value="Small " /> </div> <div class="ui large input"> <input type="text" value="Large " /> </div> <br /><br /> </div> </body> </html>
Producción:
Variaciones de entrada de la interfaz de usuario semántica
Ejemplo 2: El siguiente código también muestra algunas otras variaciones de entrada.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Input Variations</title> <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 Variations</p> </b> <hr><br /> <span>Icon Variation : </span> <div class="ui icon input"> <input type="text" placeholder="Enter email to login . "> <i class="mail icon"></i> </div> <br /><br /> <span>Labeled Variation : </span> <div class="ui right labeled input"> <input type="text" placeholder="Enter length.."> <div class="ui basic label"> cm </div> </div> <br /><br /> <span>Action Variation : </span> <div class="ui action input"> <input type="text" id="input"> <button class="ui teal right labeled icon button"> <i class="copy icon"></i> Click to Copy </button> </div> <br /><br /> <span>Transparent Variation : </span> <div class="ui transparent input"> <input type="text" placeholder="Enter the amount"> </div> <br /><br /> <div class="ui inverted segment"> <p>Inverted Variation : </p> <div class="ui inverted input"> <input type="text" placeholder="Enter your message"> </div> </div> <br /><br /> <p>Fluid Variation : </p> <div class="ui fluid icon input"> <input type="text" placeholder="Enter Email to Login . "> <i class="mail icon"></i> </div> <br /><br /> <p>Size Variation : </p> <div class="ui big input"> <input type="text" value="Big" /> </div> <div class="ui huge input"> <input type="text" value="Huge " /> </div> <br/><br/> </div> </body> </html>
Producción:
Variaciones de entrada de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA