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 discapacidad .
Estado deshabilitado del menú desplegable de IU semántica: es posible que el usuario deba mostrar un menú desplegable deshabilitado de forma predeterminada. Es posible que el usuario deba mostrar algunos menús desplegables en la interfaz de usuario cuyos valores no se deben cambiar o la persona no tiene acceso para realizar esta acción. En ese caso, un estado deshabilitado es útil. Los usuarios pueden mostrar el menú desplegable en estado deshabilitado y no permitirle cambiar el estado.
Clase de estado deshabilitada del menú desplegable de IU semántica:
- disabled: esta clase se utiliza para establecer el estado del menú desplegable en disabled.
Sintaxis:
<div class="ui disabled dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">....</div>
....
</div>
</div>
Ejemplo 1: este ejemplo muestra todo el menú desplegable deshabilitado usando la clase deshabilitada . Puede ver el resultado en la imagen a continuación, que muestra un menú desplegable deshabilitado. No sirve de nada definir opciones ya que el usuario no podrá abrir el menú desplegable haciendo clic en él.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Disabled 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>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown disabled State</p>
</b>
<hr>
<br />
<strong>Disabled dropdown:</strong><br/><br/>
<div class="ui disabled dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Estado deshabilitado del menú desplegable de la interfaz de usuario semántica
Ejemplo 2: puede haber un caso en el que solo sea necesario deshabilitar algunas de las opciones, no todo el menú desplegable. Este ejemplo muestra el menú desplegable con opciones deshabilitadas usando la clase deshabilitada . Puede ver las opciones deshabilitadas en el menú desplegable en la imagen a continuación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Disabled 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>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b><p>Semantic UI Dropdown disabled State</p></b>
<hr>
<br/>
<strong>Dropdown with disabled option:</strong>
<br/><br/>
<div class="ui dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
<div class="disabled item">
Wrong option 1
</div>
<div class="item">Option 2</div>
<div class="disabled item">
Wrong option 2
</div>
<div class="item">Option 3</div>
<div class="disabled item">
Wrong option 3
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
Producción:
Estado deshabilitado del menú desplegable de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dropdown.html#disabled
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA