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.
El menú desplegable de la interfaz de usuario semántica permite al usuario seleccionar un valor de una serie de opciones. Semantic-UI Dropdown nos ofrece 11 tipos de menú desplegable y 3 tipos de encabezado de contenido, divisor e icono. En este artículo, aprenderemos sobre el estado activo.
Semantic-UI Dropdown Active State se usa para crear un menú desplegable activo que tiene su menú abierto.
Clase de estado activo desplegable de interfaz de usuario semántica:
- activo: esta clase se usa para crear un menú desplegable activo que tiene su menú abierto.
Sintaxis:
<div class="..active..."> Dropdown <i class="dropdown icon"></i> <div class="menu"> ... </div> </div>
Nota: Un estado activo solo abrirá automáticamente un menú desplegable de interfaz de usuario simple. Para activar un menú desplegable normal, use «$(‘.ui.dropdown’).dropdown(‘show’)».
Ejemplo 1: El siguiente ejemplo ilustra el estado activo desplegable de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Active State</title>
<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 Active State</h3>
<div class="ui simple active dropdown">
Company <i class="dropdown icon"></i>
<div class="menu">
<div class="item">GFG</div>
<div class="item">gfg</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Estado activo desplegable de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo ilustra el estado activo del menú desplegable de la interfaz de usuario semántica:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Active State</title>
<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 Active State</h3>
<div class="ui simple active dropdown">
Options <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</center>
</body>
</html>
Producción:
Estado activo desplegable de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#active
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