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 mantenible. 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.
Blaze UI Divider es un divisor CSS puro que permite la creación de múltiples diseños de divisores con algo de contenido dentro del divisor. Los divisores se utilizan para dividir visualmente las secciones de la página.
- Atributos del divisor de la interfaz de usuario de Blaze : el componente del divisor solo tiene un atributo, el atributo de tipo. El atributo de tipo acepta un valor de la string escrita que puede ser discontinua o punteada. Cuando no se especifica el atributo de tipo, habrá un divisor de tipo predeterminado que será una línea recta simple.
Sintaxis: Cree un divisor de la siguiente manera:
<blaze-divider type="dashed">
GeeksforGeeks
</blaze-divider>
Ejemplo 1 : Tenemos tres tipos de divisores en este ejemplo.
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> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Divider</strong> <br /><br /> <blaze-divider type="solid"> Welcome to GeeksforGeeks. This is solid divider. </blaze-divider> <blaze-divider type="dashed"> Welcome to GeeksforGeeks. This is dashed divider. </blaze-divider> <blaze-divider type="dotted"> Welcome to GeeksforGeeks. This is dotted divider. </blaze-divider> </center> </body> </html>
Producción:
Divisor de interfaz de usuario de Blaze
Ejemplo 2: En el siguiente ejemplo, vamos a cambiar el tipo de divisor usando botones.
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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Divider</strong>
<br /><br />
<blaze-divider id="divider"
type="solid">
Welcome to GeeksforGeeks.
</blaze-divider>
<button class="c-button c-button--success"
onclick="changeType('solid')">
Solid
</button>
<button class="c-button c-button--success"
onclick="changeType('dashed')">
Dashed
</button>
<button class="c-button c-button--success"
onclick="changeType('dotted')">
Dotted
</button>
</center>
<script>
function changeType(type) {
$('#divider').attr('type', type)
}
</script>
</body>
</html>
Producción:
Divisor de interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/components/divider/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA