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.
La interfaz de usuario semántica tiene un montón de componentes para el diseño de la interfaz de usuario. Uno de ellos es el componente Tabla . Las tablas son una manera fácil de organizar una gran cantidad de datos. Una tabla es una disposición de datos en filas y columnas, o posiblemente en una estructura más compleja.
Tipos de tabla de IU semántica:
- Tabla: Esto se usa para crear una tabla básica usando la clase de tabla .
- Definición: Esto se usa para definir una tabla con la primera fila como definición de tabla.
- Estructurado: Esto se utiliza para crear una tabla estructurada compleja.
Estados de la tabla de IU semántica:
- Positivo/Negativo : este estado establece una celda o fila para representar el valor correcto o incorrecto.
- Error : este estado establece una celda o fila para representar un valor de error.
- Advertencia : este estado establece celdas o filas para alertar al usuario.
- Activo : este estado establece que las celdas o filas se seleccionen activamente.
- Deshabilitado : este estado establece que una celda o fila esté inactiva para que un usuario interactúe.
Variaciones de la tabla de interfaz de usuario semántica:
- Línea única : esta variación se utiliza para mostrar el contenido de la tabla en una sola línea.
- Corregido : esta variación no cambia el tamaño de la tabla según su contenido.
- Apilamiento : esta variación se usa para apilar el contenido de la tabla de manera receptiva.
- Fila seleccionable : esta variación se utiliza para hacer que una fila o filas de la tabla aparezcan seleccionadas.
- Celda seleccionable : esta variación se utiliza para que la celda de la tabla aparezca seleccionada.
- Alineación vertical : esta variación permite al usuario alinear el contenido de la tabla verticalmente según sus necesidades.
- Alineación de texto : esta variación permite al usuario alinear el contenido de la tabla horizontalmente según sus necesidades.
- A rayas : esta variación crea una mesa con colores contrastantes para alternar filas.
- En celdas : esta variación se utiliza para componer cada fila en diferentes celdas.
- Básico : esta variación se usa para crear tablas simples con mucho menos estilo para aumentar la legibilidad.
- Celda colapsada : esta variación se utiliza para colapsar el tamaño de celda de la tabla igual a su contenido.
- Recuento de columnas : esta variación permite al usuario definir el recuento de columnas de la tabla de antemano.
- Ancho de columna : esta variación se utiliza para establecer el ancho de la columna individual de la tabla.
- Colapso : esta variación se utiliza para crear tablas con un espacio igual al número de filas definidas.
- De colores : Esta variación se utiliza para dar diferentes colores a las mesas.
- Invertido : esta variación se utiliza para invertir el color de la tabla.
- Ordenable : esta variación permite al usuario ordenar el contenido de una tabla haciendo clic en su encabezado.
- Encabezado/Pie de página de ancho completo : esta variación se utiliza para definir el encabezado/pie de página de ancho completo de la tabla.
- Acolchado : esta variación se utiliza para aumentar el relleno de filas para que las filas sean más visibles.
- Compacto : esta variación se usa para reducir el relleno de filas para que se vean más filas en una sola página.
- Tamaño : esta variación se utiliza para crear tablas pequeñas o grandes.
Sintaxis:
<table class="ui celled table">
<tr>
<td> Content </td>
</tr>
</table>
El siguiente ejemplo ilustra los diferentes estados de las tablas.
Ejemplo 1: este ejemplo describe los estados de la tabla en la interfaz de usuario semántica.
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </head> <body> <div class="ui container"> <br/><br/> <h2 class="ui header green">GeeksforGeeks</h2> <b> <p>Semantic UI Table States</p></b> <hr> <table class="ui celled table"> <!-- Table Created--> <thead> <tr> <th>States Name</th> <th>Output</th> </tr> </thead> <tbody> <tr class="warning"> <td>Warning </td> <td><i class="attention icon"></i> Alerting the user </td> </tr> <tr class="active"> <td>Active</td> <td>Selected value</td> </tr> <tr class="disabled"> <td>Disabled</td> <td>Disabled value</td> </tr> <tr class="error"> <td>Error</td> <td>Error value</td> </tr> <tr class="positive"> <td>Positive</td> <td>Positive value</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Los diferentes estados de la mesa
Referencia: https://semantic-ui.com/collections/table.html
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA