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 un excelente enfoque para dirigir la atención del usuario a una determinada parte del sitio web sin tener en cuenta las distracciones. Se puede usar un atenuador para ocultar información no deseada y atraer la atención del usuario hacia una parte específica de la página web. La interfaz de usuario semántica nos brinda un enfoque increíble para mostrar contenido más tenue.
Clase de tipo de atenuador de contenido de interfaz de usuario semántica:
- content: crea un contenedor para el contenido del dimmer.
Sintaxis:
<div class="ui dimmer">
<div class="content">
...
</div>
</div>
Ejemplo 1: En el siguiente ejemplo, hemos creado un atenuador estándar con contenido.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Content Type</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 Content Type</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui dimmer">
<div class="content">
<h2 class="ui icon inverted header">
<i class="star outline icon"></i>
We just want to let you know
that GeeksForGeeks is Awesome!
</h2>
</div>
</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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
</div>
<button class="ui button"
onclick="openDimmer()">
Open
</button>
<button class="ui button"
onclick="closeDimmer()">
Close
</button>
</div>
<script>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
const closeDimmer = () => {
$('.dimmer').dimmer('hide');
}
</script>
</body>
</html>
Producción:
Tipo de atenuador de contenido de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado un atenuador con contenido y un fondo borroso.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Content Type</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 Content Type</h4>
<hr>
<br />
<div class="ui blurring segment">
<div class="ui dimmer">
<div class="content">
<h2 class="ui icon inverted header">
<i class="star outline icon"></i>
We just want to let you know
that GeeksForGeeks is Awesome!
</h2>
</div>
</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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
<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. It uses a class to add CSS to the elements.
</p>
</div>
<button class="ui button"
onclick="openDimmer()">
Open
</button>
<button class="ui button"
onclick="closeDimmer()">
Close
</button>
</div>
<script>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
const closeDimmer = () => {
$('.dimmer').dimmer('hide');
}
</script>
</body>
</html>
Producción:
Tipo de atenuador de contenido de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#content-dimmer
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA