Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
En este artículo, veremos la fila de tablas en las que se puede hacer clic en la interfaz de usuario de Blaze. Blaze UI les proporciona una fila en la que se puede hacer clic en su marco para que los usuarios puedan hacer clic en la fila de la tabla.
Blaze UI Tables Clases de filas en las que se puede hacer clic:
- c-table__row–clickable: esta clase se usa para agregar una fila de tablas en las que se puede hacer clic a la página web.
Sintaxis:
<tr class="c-table__row c-table__row--clickable">
<td class="c-table__cell">
...
</td>
</tr>
Ejemplo 1: el siguiente código demuestra la fila en la que se puede hacer clic en las tablas de la interfaz de usuario de Blaze.
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 Tables Clickable Row</h2> <table class="c-table"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Duration</th> <th class="c-table__cell">Course</th> <th class="c-table__cell">User</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">1 month</td> <td class="c-table__cell">DSA</td> <td class="c-table__cell">Geek1</td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">2 Month</td> <td class="c-table__cell">JavaScript</td> <td class="c-table__cell">Geek2</td> </tr> </tbody> </table> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente ejemplo muestra la fila en la que se puede hacer clic en las tablas rayadas de la interfaz de usuario de Blaze.
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 Tables Clickable Row</h2> <table class="c-table c-table--striped"> <thead class="c-table__head"> <tr class="c-table__row c-table__row--heading"> <th class="c-table__cell">Price</th> <th class="c-table__cell">Course</th> <th class="c-table__cell">Description</th> </tr> </thead> <tbody class="c-table__body"> <tr class="c-table__row c-table__row--disabled"> <td class="c-table__cell">$15</td> <td class="c-table__cell">DSA</td> <td class="c-table__cell"> Fundamentals of Programming </td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">$10</td> <td class="c-table__cell">JavaScript</td> <td class="c-table__cell"> Introduction to JavaScript </td> </tr> <tr class="c-table__row c-table__row--clickable"> <td class="c-table__cell">$12</td> <td class="c-table__cell">Python</td> <td class="c-table__cell"> Introduction to Python </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 anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA