Semantic UI es un marco de código abierto que utiliza CSS y jQuery 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.
El menú de interfaz de usuario semántica se utiliza para mostrar el menú de navegación agrupado. Tipo tabular de menú se utiliza para mostrar los elementos en forma tabular para mostrar la información en las pestañas. En este artículo, discutiremos el tipo tabular de menú de interfaz de usuario semántica.
Clase de tipo tabular de menú de interfaz de usuario semántica:
- tabular: esta clase se usa para dar formato al menú para mostrar información tabular.
Sintaxis:
<div class="ui tabular menu"> .... </div>
Ejemplo 1: este ejemplo describe los usos del tipo tabular de menú de interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Menu Tabular Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Tabular Type</h3> <div class="ui tabular menu"> <a class="item active"> GFG1 </a> <a class="item"> GFG2 </a> </div> </div> </body> </html>
Producción:
Tipo tabular de menú de interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los usos del tipo tabular de menú de interfaz de usuario semántica con más pestañas.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Menu Tabular Type</title> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container center aligned"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI Menu Tabular Type</h3> <div class="ui tabular menu"> <a class="item active"> GFG1 </a> <a class="item"> GFG2 </a> <a class="item"> GFG3 </a> <a class="item"> GFG4 </a> <div class="right menu"> <div class="item"> <div class="ui transparent icon input"> <input type="text" placeholder="Search here"> <i class="search icon"></i> </div> </div> </div> </div> </div> </body> </html>
Producción:
Tipo tabular de menú de interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/menu.html#tabular
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA