Marco de interfaz de usuario semántica que se utiliza para crear una excelente interfaz de usuario. Es un marco de código abierto que utiliza CSS y jQuery . Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
El fluido de entrada se usa para tomar la entrada del usuario, esta variación de entrada toma el tamaño del contenedor exterior, se ajustará de acuerdo con el tamaño del contenedor.
Clase de variación de fluido de entrada de interfaz de usuario semántica:
- fluido: esta clase se utiliza para crear una entrada fluida.
Sintaxis:
<div class="ui fluid input">
<input type="text" .../>
...
</div>
Ejemplo 1: el siguiente código demuestra el fluido de entrada mediante el marco de la interfaz de usuario semántica. Esta variación de entrada toma el tamaño del contenedor exterior, se ajustará de acuerdo al tamaño del contenedor.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<br />
<h1 class="ui header green">
GeeksforGeeks
</h1>
<div class="ui fluid input">
<input type="text" placeholder="Search here">
<div class="ui green button">
Search
</div>
</div>
</body>
</html>
Producción:
Variación de fluido de entrada de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra cómo crear un fluido de entrada con un ícono en lugar de un botón usando el marco de la interfaz de usuario semántica. Esta variación de entrada toma el tamaño del contenedor exterior, se ajustará de acuerdo al tamaño del contenedor.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
<style>
body {
margin-left: 10px;
margin-right: 10px;
}
</style>
</head>
<body>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<div class="ui fluid icon input">
<input type="text" placeholder="Search here">
<i class="search icon"></i>
</div>
</body>
</html>
Producción:
Variación de fluido de entrada de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/input.html#fluid
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA