La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza CSS y jQuery predefinidos para incorporar diferentes marcos.
El Menú es un componente que muestra un grupo de elementos que sirven como navegación entre una sección del sitio web y otra. Es un componente imprescindible y siempre presente en cualquier sitio web para facilitar la navegación del usuario.
El Menú Semántico de la IU nos ofrece tanto Tipo como Menú, Menú Secundario, Tabular, Señalización, Texto, Menú Vertical, Paginación. En este artículo, aprenderemos sobre el tipo de menú de paginación junto con ejemplos.
Clase de tipo de paginación de menú de interfaz de usuario semántica:
- paginación: esta clase se usa para formatear un menú de paginación para presentar enlaces a páginas de contenido.
Sintaxis:
<div class="ui pagination menu">
<a class="active item">
...
</a>
...
</div>
Ejemplo 1: El siguiente ejemplo demuestra el uso del tipo de paginación del menú de la interfaz de usuario semántica.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pagination Type </h3> <div class="ui pagination menu"> <a class="active item"> a </a> <a class="item"> b </a> <a class="item"> c </a> <div class="disabled item"> ...... </div> <a class="item"> y </a> <a class="item"> z </a> </div> </center> </body> </html>
Producción:
Tipo de paginación de menú de interfaz de usuario semántica.
Ejemplo 2: a continuación se muestra otro ejemplo que demuestra el uso del tipo de paginación de menú de IU semántica.
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <center> <h1 class="ui header green"> Geeksforgeeks </h1> <h3> Semantic UI Menu Pagination Type </h3> <div class="ui pagination menu"> <a class="item"> 1 </a> <a class="item"> 2 </a> <a class="active item"> 3 </a> <a class="item"> 4 </a> <a class="item"> 5 </a> </div> </center> </body> </html>
Producción:
Tipo de paginación de menú de interfaz de usuario semántica.
Referencia: https://semantic-ui.com/collections/menu.html#pagination
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA