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.
Un menú desplegable de IU semántica permite al usuario seleccionar un valor de una serie de opciones. Ofrece 11 tipos de menús desplegables y 3 tipos de encabezado de contenido, divisor e icono. En este artículo, aprenderemos sobre el tipo flotante.
El tipo flotante se usa para crear un menú desplegable que puede parecer que flota debajo de un elemento.
Clase de tipo flotante desplegable de interfaz de usuario semántica:
- ui botón de icono desplegable flotante: esta clase se utiliza para crear un menú desplegable que puede parecer que está flotando debajo de un elemento.
- icono desplegable: esta clase permite que el icono proporcione el elemento seleccionado de la lista de elementos.
Sintaxis:
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="edit icon"></i>
Edit Post
</div>
</div>
Ejemplo 1: El siguiente ejemplo ilustra el tipo flotante desplegable de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<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>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Floating Type</h3>
<div class="ui button">Update</div>
<div class="ui floating dropdown icon button">
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<i class="angle left icon"></i>
Left angle icon
</div>
<div class="item">
<i class="angle right icon"></i>
Right angle icon
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Tipo flotante desplegable de interfaz de usuario semántica
Ejemplo 2: este ejemplo ilustra el tipo flotante desplegable de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<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>
<center>
<div class="ui container">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Semantic-UI Dropdown Floating Type</h3>
<div class="ui button">Renew</div>
<div class="ui floating dropdown icon button">
<div class="menu">
<div class="item">
<i class="archive icon"></i>
Archive icon
</div>
<div class="item">
<i class="barcode icon"></i>
Barcode icon
</div>
<div class="item">
<i class="code icon"></i>
Code icon
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Tipo flotante desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#floating
Publicación traducida automáticamente
Artículo escrito por Kanchan_Ray y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA