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 usar y tiene excelentes elementos diferentes para usar para hacer que su sitio web se vea más impresionante. Este marco nos permite usar varios de sus estilos y propiedades para crear un sitio web más fácil de usar.
Blaze UI proporciona la función de alineación para cualquier elemento o texto. La alineación de la interfaz de usuario de Blaze se utiliza para colocar elementos y controlar la cantidad de espacio entre ellos y alrededor de ellos. Los objetos se pueden alinear horizontal o verticalmente.
Tipos de alineación de la interfaz de usuario de Blaze:
- Centrado: esta alineación coloca el contenido en el centro horizontal y verticalmente.
- Vertical: esta alineación coloca el contenido en el centro verticalmente.
- Horizontal: esta alineación coloca el contenido en el centro horizontalmente.
- Centrado absolutamente : esta alineación coloca el contenido en el centro de un contenedor relativo.
- Texto centrado : esta alineación coloca el texto en el centro.
Clases de alineación de la interfaz de usuario de Blaze:
- u-center-block: esta clase se utiliza para establecer el bloque que contiene el contenido.
- u-center-block__content: esta clase se usa para agregar el contenido en el bloque.
- u-center-block__content–vertical: esta clase se usa para establecer la posición del contenido en el centro verticalmente.
- u-center-block__content–horizontal: esta clase se usa para establecer la posición del contenido en el centro horizontalmente.
- u-absolute-center: Esta clase se usa para establecer la posición de un elemento perfectamente en el centro de un contenedor relativo.
- centrado en u: esta clase se utiliza para establecer la alineación del texto en el centro.
Sintaxis:
<div class="u-center-block ...">
<div class="u-center-block__content ...">...</div>
</div>
Ejemplo 1: el siguiente código demuestra la alineación de la interfaz de usuario de Blaze mediante las propiedades de alineació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> <div class="u-center-block fixed-height-demo"> <div class="u-center-block__content"> Blaze UI Center Alignment </div> </div> </body> </html>
Producción:
Ejemplo 2: el siguiente código muestra la alineación vertical de la interfaz de usuario de Blaze mediante las propiedades de alineació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> <div class="u-center-block fixed-height-demo"> <div class="u-center-block fixed-height-demo"> <div class="u-center-block__content u-center-block__content--vertical"> Blaze UI Vertical Center Alignment </div> </div> </div> </body> </html>
Producción:
Ejemplo 3: el siguiente código muestra la alineación horizontal de la interfaz de usuario de Blaze mediante las propiedades de alineació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> <div class="u-center-block fixed-height-demo"> <div class="u-center-block fixed-height-demo"> <div class="u-center-block__content u-center-block__content--horizontal"> Blaze UI Horizontal Center Alignment </div> </div> </div> </body> </html>
Producción:
Ejemplo 4: el siguiente código muestra la alineación central absoluta de la interfaz de usuario de Blaze mediante las propiedades de alineació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> <div class="u-center-block fixed-height-demo"> <div class="u-center-block fixed-height-demo"> <div class="u-absolute-center"> Blaze UI Centered Absolutely </div> </div> </div> </body> </html>
Producción:
Ejemplo 5: el siguiente código muestra la alineación de texto centrada en la interfaz de usuario de Blaze mediante las propiedades de alineació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> <div class="u-center-block fixed-height-demo"> <div class="u-centered"> Blaze UI Centered Text </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/utils/alignment/
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA