Semantic UI es un marco de desarrollo de código abierto que proporciona clases predefinidas para hacer que nuestro sitio web se vea hermoso, sorprendente y receptivo. Es similar a Bootstrap que tiene clases predefinidas. Utiliza jQuery y CSS para crear las interfaces. También se puede usar directamente a través de CDN como bootstrap.
La interfaz de usuario semántica proporciona a los usuarios varias clases de listas diferentes que tienen diferentes variaciones que son útiles para diferentes propósitos, como construir las barras de navegación laterales o superiores o cualquier otro. En este artículo, veamos la variación de celdas de lista en la interfaz de usuario semántica.
Lista de IU semántica Clases de variación celular:
- celled: Establece las filas de la lista como celdas visibles por algunos divisores en la lista.
Sintaxis:
<div class="ui celled list"> <div class="item">...</div> <div class="item">...</div> .... </div>
Ejemplo 1: el código siguiente muestra la lista en celdas.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI List celled variation</strong> <br /> <br /> </center> <div class="ui celled list"> <div class="item">Introduction</div> <div class="item">Topic-1</div> <div class="item">Topic-2</div> <div class="item">Topic-3 <div class="list"> <div class="item">Topic 3.1</div> <div class="item">Topic 3.2</div> <div class="item">Topic 3.3</div> <div class="item">Topic 3.4</div> </div> </div> </div> </body> </html>
Producción:
Variación de celdas de lista de interfaz de usuario semántica
Ejemplo 2: el código siguiente muestra la celda horizontal como una lista con hipervínculos.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <script src= "https://code.jquery.com/jquery-3.1.1.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <center> <h1 class="ui green header">GeeksforGeeks</h1> <strong>Semantic UI List celled variation</strong> <br /> <br /> <div class="ui horizontal celled list"> <a class="item"> Home </a> <a class="item"> About us </a> <a class="item"> Contact us </a> <a class="item"> Report issue </a> </div> </center> </body> </html>
Producción:
Variación de celdas de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#celled
Publicación traducida automáticamente
Artículo escrito por lokeshpotta20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA