La interfaz de usuario semántica ofrece un componente de «miga de pan» para que los usuarios muestren el orden o la clasificación en el contenido. Hay diferentes variaciones de pan rallado en términos de tamaño.
Crearemos una interfaz de usuario que muestre las diferentes variaciones de la ruta de navegación. Después de crear esta plantilla básica, puede trabajar con diferentes componentes de la interfaz de usuario semántica.
Clase de variaciones de migas de pan de la interfaz de usuario semántica:
- tamaño : una ruta de navegación puede tener diferentes clases de tamaño como diminuto, mini, pequeño, grande, grande, enorme y masivo.
Sintaxis:
<div class="ui tiny breadcrumb">
....
</div>
Ejemplo: El siguiente ejemplo demuestra todas las clases de variaciones de tamaño de migas de pan.
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 mini breadcrumb" style="margin:30px;"> <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">Mini Breadcrumb</div> </div> <br/> <div class="ui small breadcrumb" style="margin:30px;"> <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">Small Breadcrumb</div> </div> <br/> <div class="ui large breadcrumb" style="margin:30px;"> <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">Large Breadcrumb</div> </div> <br/> <div class="ui huge breadcrumb" style="margin:30px;"> <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"> Huge Breadcrumb</div> </div> <br/> <div class="ui massive breadcrumb" style="margin:30px;"> <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">Massive Breadcrumb</div> </div> </body> </html>
Producción:
Variaciones 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