La interfaz de usuario semántica es un marco de código abierto de uso gratuito que ofrece múltiples clases para crear una interfaz de usuario hermosa y receptiva. Hace uso de jQuery y CSS para crear una interfaz de usuario increíble que es muy similar a Bootstrap. Tiene muchas clases que se utilizan para diseñar diferentes elementos en la estructura de la página web HTML.
Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Uno de ellos es “Breadcrumb”. Una ruta de navegación es un contenedor que puede contener secciones a las que se les puede dar formato de enlace o de texto.
En este artículo, aprenderemos sobre el estado activo de la ruta de navegación de la interfaz de usuario semántica, donde podemos activar cualquier elemento de esa ruta de navegación mediante el uso de la clase activa en él. Crearemos una interfaz de usuario para mostrar los estados de la ruta de navegación.
Clase de estado activo de la ruta de navegación de la interfaz de usuario semántica:
- activo : puede hacer que varias secciones de la ruta de navegación estén en estado activo según el contenido de su interfaz de usuario utilizando la clase activa .
Sintaxis:
<div class="ui breadcrumb"> <div class="active section">....</div> </div>
Ejemplo 1: En este ejemplo, demostramos la sección activa de una ruta de navegación usando la clase activa usando la etiqueta <div> .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Breadcrumb Active State</title> <!-- Compressed Semantic UI CSS --> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Active State</h3> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <a class="section">Semantic UI</a> <i class="right chevron icon divider"></i> <a class="section">Breadcrumb</a> <i class="right chevron icon divider"></i> <div class="active section">Active State</div> </div> </center> </body> </html>
Producción:
Estado activo de la ruta de navegación de la interfaz de usuario semántica
Ejemplo 2 : En este ejemplo, demostramos la sección activa en la que se puede hacer clic de una ruta de navegación usando la clase activa usando la etiqueta <a> .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Breadcrumb Active State</title> <!-- Compressed Semantic UI CSS --> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <center> <h1 class="ui green header"> GeeksforGeeks </h1> <h3>Semantic UI: Breadcrumb Active State</h3> <div class="ui breadcrumb"> <a class="section">Home</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <a class="section">Semantic UI</a> <i class="right chevron icon divider"></i> <a class="section">Breadcrumb</a> <i class="right chevron icon divider"></i> <a class=" active section">Active State</a> </div> </center> </body> </html>
Producción:
Estado activo de la ruta de navegación de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/breadcrumb.html#active
Publicación traducida automáticamente
Artículo escrito por omkarbhusnale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA