Semantic UI ofrece muchos componentes para que los usuarios diseñen su interfaz. Uno de ellos es “Breadcrumb”.
Crearemos una interfaz de usuario para mostrar los estados de la ruta de navegación. En este artículo, aprenderemos sobre el estado de las migas de pan, donde podemos activar cualquier elemento de esa ruta de navegación usando la clase activa en él.
Clase de estados de migas de pan de interfaz de usuario semántica:
- active : puede activar diferentes secciones de la ruta de navegación según el contenido de su interfaz de usuario.
Sintaxis:
<div class="ui breadcrumb"> <div class="active section">....</div> </div>
Ejemplo: El siguiente ejemplo demuestra la sección activa de una ruta de navegación utilizando la clase activa .
HTML
<!DOCTYPE html> <html> <head> <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 breadcrumb"> <a class="section">Geeks For Geeks Home</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <div class="section">Breadcrumb</div> </div> <br /> <div class="ui breadcrumb"> <a class="section">Geeks For Geeks Home</a> <i class="right chevron icon divider"></i> <a class="section">Articles</a> <i class="right chevron icon divider"></i> <div class="active section">Active Breadcrumb</div> </div> </body> </html>
Producción:
Estados de la ruta de navegación de la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/breadcrumb.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA