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.
La variación de la dirección de la barra lateral de la interfaz de usuario semántica nos ayuda a establecer la dirección desde donde se abrirá la barra lateral. La barra lateral puede aparecer desde las cuatro direcciones: superior, inferior, derecha e izquierda.
Clases de variación de la dirección de la barra lateral de la interfaz de usuario semántica:
- top : esta clase se usa para que la barra lateral se abra desde la dirección superior.
- bottom : esta clase se usa para que la barra lateral se abra desde la dirección inferior.
- right : esta clase se usa para que la barra lateral se abra desde la dirección correcta.
- left : esta clase se usa para que la barra lateral se abra desde la dirección izquierda.
Sintaxis : agregue la dirección de las clases anteriores al contenedor de la barra lateral de la siguiente manera:
<div class="ui Direction-Variation-Classes sidebar"> ... </div>
Ejemplo : en el siguiente ejemplo, tenemos cuatro botones para cambiar la dirección de la barra lateral llamando a la función para cambiar la dirección de la barra lateral.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Sidebar Direction Variation</title>
<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>
</head>
<body>
<div class="ui container">
<div class="ui top 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 Direction Variation
</strong>
</center>
<div class="ui segment">
<h1>Welcome to GeeksforGeeks</h1>
<p>Find the best programming tutorials here.</p>
<center>
<div>
<div class="ui button"
onclick="changeDirection('top')">
Top
</div>
<div class="ui button"
onclick="changeDirection('left')">
Left
</div>
<div class="ui button"
onclick="changeDirection('right')">
Right
</div>
<div class="ui button"
onclick="changeDirection('bottom')">
Bottom
</div>
</div>
<br>
<button class="ui button green"
onclick="openSidebar()">
Open Sidebar
</button>
</center>
</div>
</div>
</div>
<script>
const changeDirection = (direction) => {
$('.ui.sidebar')
.removeClass('top')
.removeClass('left')
.removeClass('right')
.removeClass('bottom')
$('.ui.sidebar').addClass(direction)
}
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</script>
</body>
</html>
Producción
Referencia: https://semantic-ui.com/modules/sidebar.html#direction
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA