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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es «Desplegable». Los menús desplegables se utilizan para mostrar diferentes opciones a los usuarios para elegir. Los usuarios pueden seleccionar entre ellos según su elección. Dependiendo de los requisitos del uso de menús desplegables, existen diferentes estados de menús desplegables. Uno de ellos es el estado de error .
Estado de error desplegable de la interfaz de usuario semántica: es posible que el usuario deba mostrar una casilla de verificación como error predeterminado de acuerdo con sus requisitos. Puede haber un flujo de datos incorrectos en las opciones desplegables que el usuario necesita saber. Aquí es cuando el estado de error es útil.
Sintaxis:
<div class="ui dropdown error"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">...</div> ... </div> </div>
Ejemplo: este ejemplo demuestra el estado de error desplegable utilizando la clase de error . La clase de error se usa para especificar este estado del menú desplegable. Puede ver que el menú desplegable se muestra en color rojo en el resultado a continuación. Además, las opciones son rojas por defecto. Esto muestra que algo anda mal con este menú desplegable y alerta al usuario al respecto.
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>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown error State</p>
</b>
<hr>
<br />
<strong>Dropdown with error option:</strong>
<br /><br />
<div class="ui error dropdown">
Error Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Error option 1</div>
<div class="item">Error option 2</div>
<div class="item">Error option 3</div>
<div class="item">Error option 4</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Menú desplegable de errores
Referencia: https://semantic-ui.com/modules/dropdown.html#error
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA