Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco que utiliza componentes de JavaScript para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para su uso y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más sorprendente. Este marco nos permite usar varios de sus estilos y propiedades para hacer que un sitio web sea más fácil de usar.
Blaze UI proporciona una función de dirección para cualquier sitio web, la dirección proporciona la información del receptor, es decir, a dónde se enviarán los datos, aquí la dirección es similar a la dirección de una carta.
La interfaz de usuario de Blaze aborda las clases de CSS :
- c-address: esta clase se usa para agregar la dirección de la interfaz de usuario de Blaze.
- c-address__heading: Esta clase se utiliza para agregar el encabezado de la dirección o la ubicación principal.
- u-text–help: esta clase se usa para agregar el texto de ayuda, como el código postal.
Sintaxis:
<address class="c-address">
<span class="c-address__heading">...</span>
<span class="u-text--help" title="...">...</span>
</address>
Podemos agregar una función de dirección usando la etiqueta de dirección de Blaze proporcionada por Blaze UI sin definir ninguna clase. Para esto, siga la siguiente sintaxis dada.
Sintaxis:
<blaze-address>
<blaze-address-heading>
...
</blaze-address-heading>
...
</blaze-address>
Ejemplo 1: el siguiente código muestra la función de direcciones de la interfaz de usuario de Blaze mediante la etiqueta de dirección de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Blaze UI Addresses</h3> <blaze-address> <blaze-address-heading> Address header </blaze-address-heading> Address line #1 <br /> Address line #2 <br /> Postal Code </blaze-address> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra la dirección de la interfaz de usuario de Blaze mediante las clases CSS de la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html> <head> <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> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Addresses using CSS Classes </h3> <address class="c-address"> <span class="c-address__heading"> Address header </span> <br /> Address Line #1 <br /> Address Line #2 <br /> <span class="u-text--help" title="Postcode">Postal Code </span> </address> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/addresses/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA