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 el componente 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 invertida.
Variación invertida de entrada de interfaz de usuario semántica: si desea mostrar la entrada en un fondo negro, puede utilizar el acordeón invertido. Una sola o un grupo de entradas con contenido relacionado se pueden mostrar en un fondo oscuro. Crearemos una interfaz de usuario para mostrar la variación invertida de entrada.
Clase de variación invertida de entrada de interfaz de usuario semántica:
- invertido: esta clase se usa para hacer que la entrada sea invertida (en cuanto al color).
Sintaxis:
<div class="ui inverted segment>
<div class="ui inverted input">
<input type="text" placeholder="">
...
</div>
...
</div>
Ejemplo 1: Este ejemplo demuestra la variación invertida de entrada utilizando la clase invertida . Puede ver la salida en la imagen a continuación, que muestra diferentes entradas en un fondo oscuro.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br/><br/> <div class="ui container"> <h2 class="ui header green"> GeeksforGeeks </h2> <b> <p>Semantic UI Input Inverted Variation</p> </b><hr><br/> <div class="ui inverted segment"> <strong> Inverted text input : </strong> <div class="ui inverted input"> <input type="text" placeholder="Enter your name here"> </div><br/><br/> <strong> Inverted date input : </strong> <div class="ui inverted input"> <input type="date"> </div><br/><br/> <strong> Inverted local date input : </strong> <div class="ui inverted input"> <input type="datetime-local"/> </div><br/><br/> <strong> Inverted email input : </strong> <div class="ui inverted input"> <input type="email" placeholder="email"/> </div><br/><br/> <strong> Inverted password input : </strong> <div class="ui inverted input"> <input type="password" placeholder="password"/> </div> </div> </div> </body> </html>
Salida: puede ver las entradas en el fondo oscuro como se muestra en la imagen a continuación. Todas las entradas están en el fondo oscuro ya que la entrada está etiquetada con una clase invertida.
Ejemplo 2: Este ejemplo demuestra la variación invertida de entrada utilizando la clase invertida . Puede ver la salida en la imagen a continuación, que muestra diferentes entradas en un fondo oscuro.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br/><br/> <div class="ui container"> <center> <h2 class="ui header green"> GeeksforGeeks </h2> <b> <p>Semantic UI Input Inverted Variation</p> </b><hr><br/> <div class="ui inverted segment"> <p>Sign up Form</p> <div class="ui inverted input"> <input type="text" placeholder="Enter name / email"> </div><br/><br/> <div class="ui inverted input"> <input type="number" placeholder="Enter contact number"> </div><br/><br/> <div class="ui inverted input"> <input type="password" placeholder="Enter password"/> </div> </div> </center> </div> </body> </html>
Producción:
Referencia: https://semantic-ui.com/elements/input.html#inverted
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA