Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos tablas en las que se puede hacer clic en la interfaz de usuario de Blaze. Blaze UI proporciona la tabla en la que se puede hacer clic en su marco para que los usuarios puedan hacer clic en toda la fila de la tabla.
Clases de tablas en las que se puede hacer clic en la interfaz de usuario de Blaze:
- c-table–clickable: esta clase se utiliza para agregar una tabla en la que se puede hacer clic a la página web.
Sintaxis:
<table class="c-table c-table--clickable">
<thead class="c-table__head">
...
</thead>
<tbody class="c-table__body">
...
</tbody>
</table>
Ejemplo 1: el siguiente ejemplo muestra la tabla básica en la que se puede hacer clic de Blaze UI.
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://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="o-container o-container--medium"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Blaze UI Clickable Table</h2> <table class="c-table c-table--clickable"> <caption class="c-table__caption"> Clickable table with disabled row </caption> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Courses</th> <th class="c-table__cell">Description</th> <th class="c-table__cell">Price</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">Intro to Java</td> <td class="c-table__cell"> Fundamentals of Java using OOPs </td> <td class="c-table__cell">$15</td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Intro to Python </td> <td class="c-table__cell"> Data Science Fundamentals </td> <td class="c-table__cell">$10</td> </tr> <tr class="c-table__row"> <td class="c-table__cell">DSA</td> <td class="c-table__cell"> Data Structures and Algorithms </td> <td class="c-table__cell">$20</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra la tabla en la que se puede hacer clic Blaze UI Striped.
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://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> </head> <body> <div class="o-container o-container--medium"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Blaze UI Clickable Table</h2> <table class="c-table c-table--clickable c-table--striped"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Courses</th> <th class="c-table__cell">Description</th> <th class="c-table__cell">Price</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">Intro to C++</td> <td class="c-table__cell">OOPs</td> <td class="c-table__cell">$25</td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Data Science Expert Course </td> <td class="c-table__cell"> Data Science Fundamentals </td> <td class="c-table__cell">$40</td> </tr> <tr class="c-table__row"> <td class="c-table__cell"> Analysis of Algorithms </td> <td class="c-table__cell">Algorithms</td> <td class="c-table__cell">$30</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/tables
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA