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 nos brinda una manera muy fácil de diseñar la aplicación web en lugar de usar CSS. Para centrar la atención en un elemento específico y ocultar otras distracciones, usamos Dimmer. Semantic-UI ofrece atenuadores en diferentes variaciones, tipos, grupos y estados.
En este artículo, aprenderemos sobre los estados de atenuación de interfaz de usuario semántica junto con la implementación y los códigos de ejemplo.
Semantic-UI Dimmer States: Semantic-UI ofrece Dimmer en dos estados diferentes que incluyen activo y deshabilitado. Comprendamos ahora cada uno de ellos.
- Activo : el contenedor principal se atenuará con un estado de atenuación inactivo. Hace que el contenedor principal se oscurezca pero aún muestra contenido en el segmento.
- Deshabilitado : en el estado deshabilitado del atenuador de interfaz de usuario semántica, podemos observar que el atenuador no se puede activar. Es similar a un segmento normal y no podemos centrar la atención en un elemento concreto y ocultar otras distracciones.
Sintaxis:
<div class="ui segment">
<div class="ui Dimmer-State dimmer">
...
</div>
</div>
Ejemplo 1: En este ejemplo, podemos observar que el contenedor principal está oscuro.
HTML
<html> <head> <title>Semantic-UI Dimmer 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" 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> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Dimmer Active State </strong><br><br> <div class="ui segment"> <div class="ui active dimmer"></div> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing </p> </div> </div> </center> </body> </html>
Producción :
Estados de atenuación de interfaz de usuario semántica
Ejemplo 2: En este ejemplo podemos observar que no se puede activar el dimmer.
HTML
<html> <head> <title>Semantic-UI Dimmer 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" 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> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong> Semantic-UI Dimmer Disabled State </strong><br><br> <div class="ui segment"> <div class="ui disabled dimmer"></div> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing </p> </div> </div> </center> </body> </html>
Producción :
Estados de atenuación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#states
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA