Semantic-UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap. En este artículo veamos los botones de tipo básico.
El tipo de selección desplegable de IU semántica proporciona diferentes clases integradas para los menús desplegables que son muy útiles al hacer que las barras de navegación en los sitios web también fueran muy útiles en los formularios que pueden tener múltiples opciones. En este artículo, veremos sobre el menú desplegable del tipo de selección.
Clases usadas del tipo de selección desplegable de la IU semántica:
- selección: Esto establece el menú desplegable de solo tipo de selección.
- menú desplegable: esta clase indica que se necesita un menú desplegable.
Sintaxis:
<div class="ui selection dropdown"> ... </div>
Ejemplo 1: el siguiente código muestra el menú desplegable del tipo de selección.
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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Dropdown Selection Type</strong>
<br />
<br />
<div class="ui selection dropdown">
<input type="hidden" name="webdev">
<i class="dropdown icon"></i>
<div class="default text">WEB DEVELOPMENT COURSES</div>
<div class="menu">
<div class="item" data-value="0">HTML</div>
<div class="item" data-value="1">CSS</div>
<div class="item" data-value="2">JAVASCRIPT</div>
<div class="item" data-value="3">FRONT-END</div>
<div class="item" data-value="4">BACK-END</div>
<div class="item" data-value="5">FULL STACK</div>
</div>
</div>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código muestra el menú desplegable del tipo de selección.
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"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>Semantic UI Search Dropdown Type</strong>
<br /><br />
<select class="ui dropdown">
<option value="">Choose Branch</option>
<option value="cs">C.S.E</option>
<option value="ec">E.C.E</option>
<option value="ec">E.E.E</option>
<option value="ic">I.C.E</option>
<option value="it">I.T</option>
<option value="other">Other</option>
</select>
</center>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dropdown.html#selection
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA