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 gran 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 proporciona una forma de expandir el atenuador en toda la página, simplemente usando la clase de página .
Tipo de atenuador de contenido de interfaz de usuario semántica:
- página: esta clase se utiliza para que el atenuador se pueda formatear para que se fije a la página.
Sintaxis:
<div class="ui page dimmer">
<div class="content">
...
</div>
</div>
Ejemplo 1: en el siguiente ejemplo, hemos creado un atenuador semántico estándar que se extiende por toda la página.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Page 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 Page Type</h4>
<hr>
<br />
<div class="ui segment">
<div class="ui page dimmer">
<div class="content">
<h2 style="color: green;"
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()">
Show
</button>
</div>
<script>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
</script>
</body>
</html>
Producción:
Tipo de atenuador de página de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado un atenuador borroso que se extiende por toda la página.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Page 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 class="ui blurring"
style="width: 100vw; height: 100vh;">
<div class="ui page dimmer">
<div class="content">
<h2 style="color: green;"
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>
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Dimmer Page Type</h4>
<hr>
<br />
<div class="ui segment">
<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()">
Show
</button>
</div>
<script>
const openDimmer = () => {
$('.dimmer').dimmer('show');
}
</script>
</body>
</html>
Producción:
Tipo de atenuador de página de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#page-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