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. Utiliza una clase para agregar CSS a los elementos.
Una lista es una forma excelente de agrupar un conjunto de elementos relacionados. Es una parte importante de un sitio web. La interfaz de usuario semántica nos proporciona una lista con estilo de interfaz de usuario semántica. Echemos un vistazo a varias variaciones de la lista .
Variaciones de la lista de IU semántica:
- Horizontal : Posiciona la lista de forma horizontal.
- Invertido : Invierte los colores de la lista.
- Selección : Esto permite al usuario seleccionar elementos de la lista.
- Animación : Anima un elemento en particular en una lista.
- Relajado : proporciona más relleno entre los elementos de la lista, haciéndolos más espaciados.
- Dividido : crea una división entre los elementos de la lista.
- En celdas : dividió los elementos de la lista en celdas individuales.
- Tamaño : Varía el tamaño de la lista.
Sintaxis:
<div class="ui Horizontal-Variation Inverted-Variation
Selection-Variation Animation-Variation Relaxed-Variation
Divided Variation Celled-Variation Size-Variation list">
<div class="item">
...
</div>
...
</div>
Ejemplo 1: En el siguiente ejemplo, hemos creado una lista horizontal .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui horizontal list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </body> </html>
Producción:
Lista horizontal
Ejemplo 2: En el siguiente ejemplo, hemos creado una lista invertida .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui inverted segment"> <div class="ui horizontal inverted list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista Invertida
Ejemplo 3: En el siguiente ejemplo, hemos creado una lista de selección .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui inverted segment"> <div class="ui inverted selection list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista de selección
Ejemplo 4: En el siguiente ejemplo, hemos creado una lista animada .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui inverted segment"> <div class="ui inverted animated list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista animada
Ejemplo 5: En el siguiente ejemplo, hemos creado una lista relajada .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui inverted segment"> <div class="ui inverted very relaxed list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista relajada
Ejemplo 6: En el siguiente ejemplo, hemos creado una lista dividida .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui inverted segment"> <div class="ui inverted very relaxed divided list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista dividida
Ejemplo 7: En el siguiente ejemplo, hemos creado una lista en celdas .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <div class="ui very relaxed celled list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </body> </html>
Producción:
Lista Celda
Ejemplo 8: En el siguiente ejemplo, hemos creado listas de varios tamaños .
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI List Variations</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <div class="ui container"> <h2 class="ui green header"> GeeksforGeeks </h2> <h4>Semantic UI List Variations</h4> <hr /> <br /> <h5 class="ui header">Mini List</h5> <div class="ui inverted segment"> <div class="ui inverted mini list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Tiny List</h5> <div class="ui inverted segment"> <div class="ui inverted tiny list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Small List</h5> <div class="ui inverted segment"> <div class="ui inverted small list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Standard List</h5> <div class="ui inverted segment"> <div class="ui inverted list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Large List</h5> <div class="ui inverted segment"> <div class="ui inverted large list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Big List</h5> <div class="ui inverted segment"> <div class="ui inverted big list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> <h5 class="ui header">Massive List</h5> <div class="ui inverted segment"> <div class="ui inverted massive list"> <div class="item"> Machine Learning </div> <div class="item"> Blockchain </div> <div class="item"> Data Science </div> <div class="item"> Web Development </div> </div> </div> </div> </body> </html>
Producción:
Lista de varios tamaños
Referencia: https://semantic-ui.com/elements/list.html
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA