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 acerca de la variación de selección de lista de interfaz de usuario semántica que se usa para agregar el formato para seleccionar elementos de lista al pasar el mouse por encima.
Clase de variación de selección de lista de interfaz de usuario semántica:
- selección: esta clase se utiliza para seleccionar los elementos de la lista al pasar el mouse.
Sintaxis:
<div class="ui selection list">
<div class="item"> Contents... </div>
...
</div>
Ejemplo 1: En este ejemplo, estamos creando una lista de artículos con la variación seleccionada.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Selection 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 Selection Variation</h3> <div class="ui selection list"> <a class="item">GeeksforGeeks</a> <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 de selección de lista de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, estamos creando una lista de artículos con la variación seleccionada.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Selection 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 Selection Variation</h3> <div class="ui selection 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"> <div class="header">GeeksforGeeks</div> <div class="description"> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200819145636/icon.png"> <div class="content"> <div class="header">Data Structure</div> <div class="description"> A data structure is a particular way of organizing data in a computer so that it can be used effectively. </div> </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"> <div class="header">Algorithm</div> <div class="description"> The word Algorithm means “a process or set of rules to be followed in calculations or other problem-solving operations”. </div> </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"> <div class="header">Web Development</div> <div class="description"> Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, ... </div> </div> </div> </div> </div> </body> </html>
Producción:
Variación de selección de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#selection