La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
La barra lateral de la interfaz de usuario semántica se utiliza para colocar enlaces adicionales para que podamos navegar a diferentes posiciones de la aplicación web con facilidad. El elemento de la barra lateral oculta una parte de la página web debajo de él para mostrar la página.
El estado atenuado de la barra lateral de la interfaz de usuario semántica se usa para atenuar un empujador. Pusher es el lugar donde se coloca el contenido de la página web.
Clase de estado atenuada de barra lateral de interfaz de usuario semántica:
- atenuado : agregue esta clase para atenuar el empujador.
Sintaxis : agregue la clase atenuada al empujador de la siguiente manera:
<div class="dimmed pusher">
...
</div>
Ejemplo : en el siguiente ejemplo, hemos agregado la clase atenuada al empujador.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<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>
<style></style>
</head>
<body>
<div class="ui container">
<div class="ui sidebar inverted vertical menu">
<a class="item">
Data Structures
</a>
<a class="item">
Algorithms
</a>
<a class="item">
Machine Learning
</a>
<button class="ui button" onclick="openSidebar()">
Close Sidebar</button>
</div>
<div class="dimmed pusher">
<center>
<div class="ui header green">
<h1>
GeeksforGeeks
</h1>
</div>
<strong>
Semantic UI Sidebar Dimmed State
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<button onclick="openSidebar()">Open Sidebar</button>
</div>
</div>
</div>
<script>
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</script>
</body>
</html>
Producción
Estado atenuado de la barra lateral de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/sidebar.html#dimmed
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA