Semantic UI es un marco de código abierto que tiene algunas clases predefinidas para hacer que nuestro sitio web se vea hermoso y receptivo. Es similar a bootstrap ya que tiene clases predefinidas para su uso. Usó CSS y jQuery para construir la interfaz. Tiene algunos tipos diferentes de elementos que nos ayudan a crear un hermoso sitio web.
El menú desplegable de interfaz de usuario semántica se utiliza para elegir el valor de las opciones dadas. El contenido flotante se utiliza para hacer flotar el contenido hacia la izquierda o hacia la derecha. En este artículo, discutiremos el contenido flotante desplegable en la interfaz de usuario semántica.
Clase de contenido flotante desplegable de interfaz de usuario semántica:
- right floated: esta clase se usa para hacer flotar el contenido a la derecha.
- left floated : esta clase se puede usar para hacer flotar el contenido hacia el lado izquierdo.
Sintaxis:
<div class="ui fluid selection dropdown">
<i class="dropdown icon"></i>
<span class="default text"> ... </span>
<div class="menu">
<div class="item">
<i class="attention right floated icon"></i>
...
</div>
...
</div>
</div>
Ejemplo: El siguiente ejemplo demuestra el contenido flotante desplegable de la interfaz de usuario semántica.
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>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic-UI Dropdown Floated Content
</h3>
<div class="ui fluid selection dropdown">
<i class="dropdown icon"></i>
<span class="default text">
Choose any option
</span>
<div class="menu">
<div class="item">
<i class="book right floated icon"></i>
Item 1
</div>
<div class="item">
<i class="add right floated icon"></i>
Item 2
</div>
<div class="item">
<i class="phone right floated icon"></i>
Item 3
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Contenido flotante desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#floated-content
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA