Semantic UI es el marco de código abierto que utilizó CSS y jQuery para hacer que nuestros sitios web se vean hermosos y receptivos. Tiene clases predefinidas como bootstrap para usar para hacer que nuestro sitio web sea más interactivo. Tiene algunos componentes semánticos preconstruidos y podemos usar estos componentes para crear un sitio web receptivo.
Semantic-UI Dimmer se utiliza para ocultar distracciones y centrarse en contenido importante. Se utiliza para enfocar el contenido principal de nuestra página web e ignorar las distracciones. En este artículo, discutiremos las variaciones de atenuación en la interfaz de usuario semántica.
Variaciones del atenuador de interfaz de usuario semántica:
- Desenfoque : esta variación se utiliza para desenfocar el contenido.
- Alineación vertical : esta variación se utiliza para alinear el contenido en la parte superior o inferior.
- Dimmer simple : esta variación se puede controlar sin usar javascript.
- Dimmer Invertido : Esta variación se utiliza para invertir los colores.
Sintaxis:
<div class="ui Dimmer-Variations-Class segment">
<div class="ui dimmer"></div>
....
</div>
Ejemplo 1: El siguiente código demuestra las variaciones de dimmer de alineación vertical y de desenfoque de interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic UI Dimmer Variations </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 center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic UI Dimmer Variations </h3>
<strong>
Blurring:
</strong> <br>
<div class="ui blurring segment" id="blur">
<div class="ui dimmer"></div>
<p></p>
<p></p>
</div>
<button class="ui button" onclick="hide1()">
-
</button>
<button class="ui button" onclick="show1()">
+
</button> <br> <br>
<strong>
Vertical Alignment:
</strong>
<div class="ui segment" id="align">
<div class="ui top aligned dimmer">
<div class="content">
<h5 class="ui inverted header">
Top aligned GFG
</h5>
</div>
</div>
<p>
A Computer Science portal for geeks
</p>
<p>
Computer Science portal
</p>
<p>
Computer Science portal
</p>
</div>
<button class="ui button" onclick="hide2()">
-
</button>
<button class="ui button" onclick="show2()">
+
</button>
</div>
<script>
const hide1 = () => {
$('#blur').dimmer('hide');
}
const show1 = () => {
$('#blur').dimmer('show');
}
const hide2 = () => {
$('#align').dimmer('hide');
}
const show2 = () => {
$('#align').dimmer('show');
}
</script>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código demuestra las variaciones de atenuador simple e invertido de la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Semantic UI Dimmer Variations </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 center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic UI Dimmer Variations </h3>
<strong>
Simple Dimmer:
</strong> <br>
<div class="ui dimmable dimmed segment" id="simple">
<div class="ui simple dimmer">
<div class="content">
<h3>GeeksforGeeks</h3>
</div>
</div>
<div class="content">
<h1>
A Computer Science portal
</h1>
<p>
portal for geeks
</p>
</div>
</div>
<button class="ui button" onclick="hide1()">
Hide this
</button>
<button class="ui button" onclick="show1()">
Show this
</button> <br> <br>
<strong>
Inverted Dimmer:
</strong>
<div class="ui segment" id="invert">
<div class="ui inverted dimmer"> </div>
<p>
GeeksforGeeks
</p>
<p>
A Computer Science portal
</p>
</div>
<button class="ui button" onclick="hide2()">
-
</button>
<button class="ui button" onclick="show2()">
+
</button>
</div>
<script>
const hide1 = () => {
$('#simple').dimmer('hide');
}
const show1 = () => {
$('#simple').dimmer('show');
}
const hide2 = () => {
$('#invert').dimmer('hide');
}
const show2 = () => {
$('#invert').dimmer('show');
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/dimmer.html
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA