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.
Una barra lateral es una excelente manera de ocultar contenido adicional del usuario a menos que sea necesario. La interfaz de usuario semántica nos proporciona una barra lateral con estilo. Antes de saltar a los tipos de barra lateral, echemos un vistazo a varias clases de tipos de barra lateral.
Tipo de barra lateral de interfaz de usuario semántica:
- Barra lateral: Esto se utiliza para crear una barra lateral.
Sintaxis:
<div class="ui sidebar">
...
</div>
Nota: las barras laterales se pueden usar con cualquier tipo de contenido, pero se usan principalmente con un menú vertical invertido . Siga los siguientes ejemplos para comprender.
Ejemplo 1: En el siguiente ejemplo, hemos creado una barra lateral de menú estándar usando clases de menú vertical de barra lateral .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Sidebar Types</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>
<div class="ui sidebar vertical menu">
<a class="item">Web Development</a>
<a class="item">Machine Learning</a>
<a class="item">Data Science</a>
<a class="item">Blockchain</a>
</div>
<div class="ui pusher container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Sidebar Types</h4>
<hr>
<br />
<button class="ui button"
onclick="toggle()">
Toggle Sidebar
</button>
</div>
<script>
const toggle = () => $('.ui.sidebar').sidebar('toggle');
</script>
</body>
</html>
Producción:
Tipos de barra lateral de interfaz de usuario semántica
Ejemplo 2: En el siguiente ejemplo, hemos creado una barra lateral invertida utilizando clases de menú verticales invertidas de barra lateral .
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Sidebar Types</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>
<div class="ui sidebar inverted vertical menu">
<a class="item">Web Development</a>
<a class="item">Machine Learning</a>
<a class="item">Data Science</a>
<a class="item">Blockchain</a>
</div>
<div class="ui pusher container">
<h2 class="ui green header">GeeksforGeeks</h2>
<h4>Semantic UI Sidebar Types</h4>
<hr>
<br />
<button class="ui button"
onclick="toggle()">
Toggle Sidebar
</button>
</div>
<script>
const toggle = () => $('.ui.sidebar').sidebar('toggle');
</script>
</body>
</html>
Producción:
Tipos de barra lateral de interfaz de usuario semántica
Referencias: https://semantic-ui.com/modules/sidebar.html
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA