Semantic UI es un marco de código abierto que utiliza CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
El formulario es un contenedor que tiene diferentes tipos de elementos de entrada, como campos de texto, botones de envío, botones de radio, casillas de verificación, etc.
Semantic-UI Form se usa para crear el hermoso formulario usando clases de formulario. El contenido desplegable del formulario se utiliza para crear una lista de elementos y podemos seleccionar una opción de la serie de opciones. También podemos buscar cualquier elemento desplegable utilizando el campo de texto de entrada. Usaremos la clase desplegable para crear el menú desplegable.
En este artículo, discutiremos el contenido desplegable del formulario en Semantic-UI.
Clase de contenido desplegable de formulario de interfaz de usuario semántica:
- menú desplegable: esta clase se utiliza para crear el menú desplegable con algunos elementos.
Sintaxis:
<div class="ui form">
<div class="field">
<label>....</label>
<div class="ui selection dropdown">
......
</div>
</div>
</div>
Ejemplo 1: el siguiente código demuestra el contenido desplegable del formulario de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Form Dropdown Content</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>
<div class="ui container center aligned">
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Dropdown Content</h3>
</div>
<div class="ui form">
<div class="field">
<label>Dropdown</label>
<div class="ui selection dropdown">
<input type="hidden" name="drop">
<i class="dropdown icon"></i>
<div class="default text">
Select from dropdown
</div>
<div class="menu">
<div class="item" data-value="0">
Coding
</div>
<div class="item" data-value="1">
DSA
</div>
<div class="item" data-value="2">
App development
</div>
<div class="item" data-value="3">
Web development
</div>
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Contenido desplegable del formulario de interfaz de usuario semántica
Ejemplo 2: el siguiente código demuestra el contenido desplegable del formulario de interfaz de usuario semántica mediante la búsqueda de un elemento desplegable.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Form Dropdown Content</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>
<div class="ui container center aligned">
<h2 style="color: green">
GeeksforGeeks
</h2>
<h3>Semantic-UI Form Dropdown Content</h3>
</div>
<div class="ui form">
<div class="field">
<label>Dropdown</label>
<select class="ui search dropdown">
<option value="">
Select option
</option>
<option value="html">
HTML
</option>
<option value="bootstrap">
Bootstrap
</option>
<option value="css">
CSS
</option>
<option value="js">
Javascript
</option>
<option value="nodejs">
Node.js
</option>
</select>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Contenido desplegable del formulario de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/form.html#dropdown
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA