Blaze UI es un marco gratuito y de código abierto con un kit de herramientas de interfaz de usuario liviano que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las características 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, aprenderemos sobre las teclas tipográficas en un teclado que utiliza la interfaz de usuario de Blaze.
Tipografía: el marco de Blaze UI viene con un módulo de tipografía agradable que cubre diferentes visualizaciones de texto.
Teclas en un teclado: cuando desea describir qué teclas presionar generalmente como parte de la documentación de soporte, se prefiere usar la clase de teclado.
Clases utilizadas:
- u-kbd: esta clase se utiliza para proporcionar teclas en una interfaz de teclado. En palabras simples, los elementos se verán como teclas en el teclado.
Sintaxis:
<kbd class="u-kbd"></kbd>
Ejemplo 1: En el siguiente ejemplo veremos cómo podemos usar Teclas en un teclado.
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"> <title>Blaze UI Keys on a keyboard</title> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Blaze UI Keys on a keyboard</h3> <kbd class="u-kbd">GeeksforGeeks</kbd> </center> </body> </html>
Producción:
Ejemplo 2:
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">
<title>Blaze UI Keys on a keyboard</title>
<style>
body{
background-color:lightgrey;
color:black;
}
</style>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Blaze UI Keys on a keyboard</h3>
<kbd class="u-kbd">GeeksforGeeks</kbd> <br><br>
<kbd class="u-kbd">1</kbd>
<kbd class="u-kbd">2</kbd>
<kbd class="u-kbd">3</kbd>
<kbd class="u-kbd">4</kbd>
<kbd class="u-kbd">5</kbd>
<kbd class="u-kbd">6</kbd>
<kbd class="u-kbd">7</kbd>
<kbd class="u-kbd">8</kbd>
<kbd class="u-kbd">9</kbd>
<kbd class="u-kbd">10</kbd>
</center>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/typography/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA