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. Utiliza una clase para agregar CSS a los elementos.
Dimmer es una excelente manera de llamar la atención del usuario a una parte específica de la página web, ignorando las distracciones. Un atenuador se puede habilitar y deshabilitar a voluntad según el comportamiento o la interactividad del usuario. La interfaz de usuario semántica nos proporciona la clase deshabilitada para deshabilitar un atenuador.
Clases de estado deshabilitadas del atenuador de interfaz de usuario semántica:
- disabled: esta clase se utiliza para desactivar el atenuador.
Sintaxis:
<div class="ui segment"> <div class="ui disabled dimmer"></div> <p></p> <p></p> </div>
Ejemplo 1: En el siguiente ejemplo, hemos creado un atenuador que está deshabilitado.
HTML
<!DOCTYPE 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 style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Dimmer Disabled State</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui disabled dimmer"></div>
<p>
Greetings to all the Geeks out there! We welcome
you to the platform where we consistently strive
to offer the best of education.
</p>
<p>
This platform has been designed for every geeks
wishing to expand knowledge, share their knowledge
and is ready to grab their dream job. We have millions
of articles,live as well as online courses, thousands
of tutorials and much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<p>
GeeksForGeeks is an amazing website to learn coding.
</p>
<p>
Machine Learning, Web Development, Android Development,
Data Science, you name it, it's all available on
GeeksForGeeks.
</p>
</div>
</div>
<script>
$('.dimmer').dimmer('show');
</script>
</body>
</html>
Producción:
Estado deshabilitado del atenuador de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, deshabilitamos y habilitamos el atenuador a voluntad.
HTML
<!DOCTYPE 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 style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Dimmer Disabled State</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui dimmer"></div>
<p>
Greetings to all the Geeks out there! We welcome
you to the platform where we consistently strive
to offer the best of education.
</p>
<p>
This platform has been designed for every geeks
wishing to expand knowledge, share their knowledge
and is ready to grab their dream job. We have millions
of articles,live as well as online courses, thousands
of tutorials and much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<p>
GeeksForGeeks is an amazing website to learn coding.
</p>
<p>
Machine Learning, Web Development, Android Development,
Data Science, you name it, it's all available on
GeeksForGeeks.
</p>
</div>
<button class="ui button" onclick="enable()">Enable</button>
<button class="ui button" onclick="disable()">Disable</button>
<button class="ui button" onclick="hide()">Hide</button>
<button class="ui button" onclick="show()">Show</button>
</div>
<script>
const dimmer = document.querySelector(".dimmer");
const enable = () => {
dimmer.classList.remove("disabled");
}
const disable = () => {
dimmer.classList.add("disabled");
}
const hide = () => {
$('.dimmer').dimmer('show');
}
const show = () => {
$('.dimmer').dimmer('hide');
}
</script>
</body>
</html>
Producción:
Estado deshabilitado del atenuador de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#/definition
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA