Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript 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. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI Breadcrumbs se utiliza para mostrar la ruta de navegación en nuestro sitio web. Podemos usar estas migas de pan cuando queremos mostrar la ruta al usuario para que el usuario pueda entender fácilmente el flujo. En este artículo, analizaremos las migas de pan de la interfaz de usuario de Blaze.
Etiquetas de migas de pan de la interfaz de usuario de Blaze:
- blaze-breadcrumbs: esta etiqueta se usa para crear las migas de pan en la interfaz de usuario de Blaze.
- blaze-breadcrumb: esta etiqueta se utiliza para crear un solo elemento en la ruta de navegación.
Clases de migas de pan de Blaze UI:
- c-breadcrumbs: esta clase se utiliza para crear migas de pan.
- c-breadcrumbs__crumb: esta clase se utiliza para crear el elemento en breadcrumbs.
Sintaxis: uso de etiquetas de migas de pan
<blaze-breadcrumbs aria-label="Breadcrumbs">
<blaze-breadcrumb href="/">
...
</blaze-breadcrumb>
...
</blaze-breadcrumbs>
Sintaxis: Uso de clases CSS de Breadcrumbs
<nav aria-label="Breadcrumb">
<ol class="c-breadcrumbs">
<li class="c-breadcrumbs__crumb">
<a class="c-link">...</a>
</li>
...
</ol>
</nav>
Ejemplo 1: el siguiente código muestra las migas de pan de la interfaz de usuario de Blaze con etiquetas de migas de pan.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Breadcrumbs </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Breadcrumbs </h3> <blaze-breadcrumbs aria-label="Breadcrumbs"> <blaze-breadcrumb href="/"> Home </blaze-breadcrumb> <blaze-breadcrumb href="/"> Courses </blaze-breadcrumb> <blaze-breadcrumb href="/"> Java </blaze-breadcrumb> <blaze-breadcrumb> OOPS </blaze-breadcrumb> </blaze-breadcrumbs> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra Breadcrumbs de la interfaz de usuario de Blaze utilizando clases CSS de Breadcrumbs.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Breadcrumbs </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="u-centered "> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Breadcrumbs </h3> <nav aria-label="Breadcrumb"> <ol class="c-breadcrumbs"> <li class="c-breadcrumbs__crumb"> <a class="c-link"> Home </a> </li> <li class="c-breadcrumbs__crumb"> <a class="c-link"> GeeksforGeeks </a> </li> <li class="c-breadcrumbs__crumb"> <a class="c-link"> Courses </a> </li> <li class="c-breadcrumbs__crumb"> <a class="c-link"> Python </a> </li> <li class="c-breadcrumbs__crumb" aria-current="tuples"> Tuples </li> </ol> </nav> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/breadcrumbs/
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA