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 diferentes elementos geniales para usar para hacer que su sitio web se vea más sorprendente. Utiliza una clase para agregar CSS a los elementos.
La lista de interfaz de usuario semántica nos proporciona diferentes variaciones de la lista, como las variantes Horizontal, Invertida, de Selección, Animada, Relajada, Dividida, Celda y Tamaño. Aquí aprenderemos sobre la variación horizontal de la lista de interfaz de usuario semántica que se usa para mostrar los elementos de la lista horizontalmente.
Clase de variación horizontal de lista de interfaz de usuario semántica:
- horizontal: esta clase se utiliza para crear elementos de lista con formato horizontal.
Sintaxis:
<div class="ui horizontal list">
<div class="item">...</div>
...
</div>
Ejemplo 1: en este ejemplo, estamos creando elementos de lista con la variación horizontal.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Horizontal Variation </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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Horizontal Variation</h3> <div class="ui link horizontal list"> <div class="active item">GeeksforGeeks</div> <a class="item">Data Structure</a> <a class="item">Algorithm</a> <a class="item">Interview Preparation</a> <a class="item">Competitive Programming</a> <a class="item">Machine Learning</a> <a class="item">Web Development</a> </div> </div> </body> </html>
Producción:
Variación horizontal de lista de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, estamos creando una lista de elementos con variación horizontal.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Horizontal Variation </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"> <h2 style="color:green"> GeeksforGeeks </h2> <h3>Semantic-UI List Horizontal Variation</h3> <div class="ui horizontal list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"> <div class="content"> <a class="header">GeeksforGeeks</a> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png"> <div class="content"> <a class="header">Data Structure</a> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <div class="content"> <a class="header">Algorithm</a> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"> <div class="content"> <a class="header">Web Development</a> </div> </div> </div> </div> </body> </html>
Producción:
Variación horizontal de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#horizontal