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 del ancho de la barra lateral de la interfaz de usuario semántica establece el ancho de la barra lateral. La barra lateral puede aparecer en diferentes tamaños, desde muy delgada hasta muy ancha, lo que ayuda a satisfacer todas las necesidades y requisitos posibles de la página web.
Clases de variación del ancho de la barra lateral de la interfaz de usuario semántica:
- thin : agregue esta clase para hacer que la barra lateral sea delgada.
- very thin : agregue esta clase para hacer que la barra lateral sea muy delgada.
- normal: para el tamaño normal, no necesitamos agregar ninguna clase a la barra lateral.
- ancho: agregue esta clase para hacer que la barra lateral sea ancha.
- very wide : agregue esta clase para hacer que la barra lateral sea muy ancha.
Sintaxis : agregue el ancho deseado de las clases anteriores a la barra lateral de la siguiente manera:
<div class="ui thin sidebar inverted vertical menu">
...
</div>
Ejemplo : en el siguiente ejemplo, tenemos cinco botones para diferentes variaciones de ancho para la barra lateral.
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>
</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 Width 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="changeWidth('thin')">
Thin
</div>
<div class="ui button"
onclick="changeWidth('very thin')">
Very Thin
</div>
<div class="ui button"
onclick="changeWidth('')">
Normal
</div>
<div class="ui button"
onclick="changeWidth('wide')">
Wide
</div>
<div class="ui button"
onclick="changeWidth('very wide')">
Very Wide
</div>
</div>
<button class="ui button green"
onclick="openSidebar()">
Open Sidebar
</button>
</center>
</div>
</div>
</div>
<script>
const changeWidth = (width) => {
$('.ui.sidebar')
.removeClass('thin')
.removeClass('very thin')
.removeClass('wide')
.removeClass('very wide')
$('.ui.sidebar').addClass(width)
}
const openSidebar = () => {
$('.ui.sidebar').sidebar('toggle')
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/modules/sidebar.html#width
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA