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.
Las tablas son una parte esencial de cualquier sitio web para representar los datos de una manera más fácil, es decir, organizar y representar las colecciones de datos agrupados en filas. El marco de la interfaz de usuario semántica proporciona la posibilidad de crear tablas con facilidad. Hay momentos en los que tenemos que crear tablas de cierta manera, como una tabla con un estado particular. Aquí, el estado de una tabla significa si una fila en particular de la tabla está seleccionada o tiene algún error o advertencia, etc. Estos resultados deseados se pueden lograr con la ayuda de los estados de la tabla en el marco Semantic-UI que se usa para modificar el mesas.
Estados de la tabla de interfaz de usuario semántica:
- Positivo/Negativo : una celda o fila determina si un valor es bueno o malo.
- Advertencia : una celda o fila advierte al usuario.
- Activo : una celda o fila está activa cuando la selecciona un usuario.
- Deshabilitado : una celda o fila se puede deshabilitar para que el usuario no pueda seleccionarla.
- Error : una celda o fila da atención a un error.
Sintaxis:
<table class="ui celled table">
<tr class="warning">
<td> Content </td>
</tr>
</table>
La sintaxis para todos los demás estados de la tabla será la misma y la única diferencia será el nombre del estado.
Ejemplo 1: este ejemplo ilustra los estados de la tabla en la interfaz de usuario semántica especificando el estado como positivo/negativo y error.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Semantic-UI Tables State </div> <table class="ui celled table"> <!-- Table Created--> <thead> <!-- Table Headings--> <tr> <th>Name</th> <th>Result</th> </tr> </thead> <tbody> <tr class="positive"> <!-- Positive State--> <td>Jeff</td> <td> <i class="icon checkmark"></i>Passed </td> </tr> <tr class="positive"> <td>John</td> <td> <i class="icon checkmark"></i> Passed </td> </tr> <tr> <td>Shawn</td> <td class="negative"> <i class="icon close"></i>Failed </td> <!--Negative State --> </tr> <tr> <td>Kane</td> <td>Pending</td> </tr> <tr class="error"> <!-- Error State--> <td>Randy</td> <td class="error"> <i class="attention icon"></i> Not Found </td> </tr> <tr> <td>Brock</td> <td>Pending</td> </tr> </tbody> </table> </body> </html>
Producción:
Estados de la tabla en la interfaz de usuario semántica
Ejemplo 2: este ejemplo describe los estados de la tabla en la interfaz de usuario semántica especificando el estado como advertencia, activo y deshabilitado.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <script src= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> </script> </head> <body> <br> <div class="ui green huge header"> GeeksforGeeks </div> <div class="ui large header"> Semantic-UI Tables State </div> <table class="ui celled table"> <!-- Table Created--> <thead> <!-- Table Headings--> <tr> <th>Name</th> <th>Result</th> </tr> </thead> <tbody> <tr class="warning"> <!-- Warning State--> <td>Jeff</td> <td> <i class="attention icon"></i> Unavailable </td> </tr> <tr class="active"> <!--Active State--> <td>John</td> <td>Passed</td> </tr> <tr class="disabled"> <!-- Disabled State--> <td>Shawn</td> <td>Failed</td> </tr> <tr> <td>Kane</td> <td>Pending</td> </tr> <tr class="disabled"> <!-- Disabled State--> <td>Randy</td> <td>Failed</td> </tr> <tr> <td>Brock</td> <td>Pending</td> </tr> </tbody> </table> </body> </html>
Producción:
Estados de la tabla en la interfaz de usuario semántica
Referencia: https://semantic-ui.com/collections/table.html
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA