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. La lista se utiliza para mostrar datos relacionados con el grupo que pertenecen al mismo tipo.
A continuación se dan todos los ejemplos de la lista.
Ejemplo 1: En este ejemplo, veremos algunos tipos básicos de listas usando Semantic-ui.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>JS libraries</h2> <div class="ui list"> <div class="item">React</div> <div class="item">Lodash</div> <div class="item">Request</div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, dividiremos Lista con iconos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Notifications</h2> <div class="ui relaxed divided list"> <div class="item"> <i class="small world middle aligned icon"></i> <div class="content"> <a class="header"> Geeksforgeeks liked your post </a> <div class="description">20 mins ago</div> </div> </div> <div class="item"> <i class="small world middle aligned icon"></i> <div class="content"> <a class="header"> Geeksforgeeks added you as an Intern </a> <div class="description">22 mins ago</div> </div> </div> <div class="item"> <i class="small world middle aligned icon"></i> <div class="content"> <a class="header"> Geeksforgeeks accepted your Request </a> <div class="description">1 hour ago</div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 3: En este ejemplo, veremos Lista de detalles personales.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Geeksforgeeks</h2> <div class="ui list"> <div class="item"> <i class="computer icon"></i> <div class="content"> Geeksforgeeks </div> </div> <div class="item"> <i class="marker icon"></i> <div class="content"> Noida, UP </div> </div> <div class="item"> <i class="mail icon"></i> <div class="content"> <a href= "mailto:carrier@geeksforgees.org"> carrier@geeksforgeeks.org </a> </div> </div> <div class="item"> <i class="linkify icon"></i> <div class="content"> <a href= "https://geeksforgeeks.org">geeksforgeeks.org</a> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 4: En este ejemplo, veremos Lista con viñetas.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>JavaScript Uses</h2> <ul> <li>Web</li> <li>Mobile App</li> <li>Desktop App</li> <li> Frameworks <ul> <li>ReactJS</li> <li>NodeJS</li> <li>AngularJS</li> </ul> </li> </ul> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 5: En este ejemplo, crearemos una Lista ordenada.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>JavaScript Uses</h2> <ol class="ui list"> <li>Web</li> <li>Mobile App</li> <li>Desktop App</li> <li> Frameworks <ol> <li>ReactJS</li> <li>NodeJS</li> <li>AngularJS</li> </ol> </li> </ol> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 6: En este ejemplo, crearemos una lista con iconos.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Semantic-UI Icons</h2> <div class="ui list"> <a class="item"> <i class="users icon"></i> <div class="content"> <div class="header">Users Icon</div> <div class="description"> This icon you can use for Users, Friends, Friends of Friends. </div> </div> </a> <a class="item"> <i class="world icon"></i> <div class="content"> <div class="header">World Icon</div> <div class="description"> This icon you can use for globe, notification and many more. </div> </div> </a> <div class="item"> <i class="facebook icon"></i> <div class="content"> <div class="header">facebook Icon</div> <div class="description"> This can be used for facebook Social Link </div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 7: En este ejemplo, crearemos una lista con imágenes.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>List with Images</h2> <div class="ui list"> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200506112031/image211.jpg" /> <div class="content"> <a class="header">geeksforgeeks</a> <div class="description"> A computer Science Portal </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200506112031/image211.jpg" /> <div class="content"> <a class="header">geeksforgeeks</a> <div class="description"> A Computer Science Portal </div> </div> </div> <div class="item"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200506112031/image211.jpg" /> <div class="content"> <a class="header">geeksforgeeks</a> <div class="description"> A computer Science portal </div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 8: en este ejemplo, crearemos una lista de descripción.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Description List</h2> <div class="ui list"> <div class="item"> <i class="map computer icon"></i> <div class="content"> <a class="header">Geeksforgeeks</a> <div class="description"> Learn anything related to Computer Science </div> </div> </div> <div class="item"> <i class="map computer icon"></i> <div class="content"> <a class="header">Internshala</a> <div class="description"> Earn while you study </div> </div> </div> <div class="item"> <i class="map computer icon"></i> <div class="content"> <a class="header">Hacker Rank</a> <div class="description"> Test your coding skills. </div> </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Ejemplo 9: En este ejemplo, crearemos una Lista flotante.
<!DOCTYPE html> <html> <head> <title>Semantic UI</title> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" /> </head> <body> <div class="ui container"> <h2>Floated List</h2> <div class="ui middle aligned divided list"> <div class="item"> <div class="right floated content"> <div class="ui button">Delete</div> </div> <i class="basketball ball icon"></i> <div class="content"> Basket Ball </div> </div> <div class="item"> <div class="right floated content"> <div class="ui button">Delete</div> </div> <i class="hockey puck icon"></i> <div class="content"> Hockey </div> </div> <div class="item"> <div class="right floated content"> <div class="ui button">Delete</div> </div> <i class="table tennis icon"></i> <div class="content"> Table Tennis </div> </div> </div> </div> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </body> </html>
Producción
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA