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 Semantic-UI List Inverted Variation se utiliza para mostrar la apariencia invertida de los elementos de la lista, es decir, muestra los elementos de la lista con un fondo oscuro.
Clase de variación invertida de lista de interfaz de usuario semántica:
- invertido: esta clase se utiliza para mostrar el fondo oscuro de los elementos de la lista.
Sintaxis:
<div class="ui inverted segment">
<div class="ui inverted relaxed divided list">
<div class="item"> Contents... </div>
</div>
</div>
Ejemplo 1: En este ejemplo, estamos creando una lista de elementos con la variación invertida.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Inverted 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 Inverted Variation</h3> <div class="ui inverted segment"> <div class="ui inverted relaxed divided 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> </div> </body> </html>
Producción:
Variación invertida de lista de interfaz de usuario semántica
Ejemplo 2: En este ejemplo, estamos creando una lista de elementos con la variación invertida.
HTML
<!DOCTYPE html> <html> <head> <title> Semantic-UI List Inverted 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 Inverted Variation</h3> <div class="ui inverted segment"> <div class="ui inverted relaxed divided 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 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"> <a class="header">Data Structure</a> <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"> <a class="header">Algorithm</a> <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"> <a class="header">Web Development</a> <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> </div> </body> </html>
Producción:
Variación invertida de lista de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/list.html#inverted