Blaze UI es unmarco de código abierto de CSS . Es un kit de herramientas de interfaz de usuario liviano 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. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Buttons proporciona hermosos botones que son muy personalizables. Podemos tener botones redondeados, grupos de botones y diferentes tamaños de botones, incluidos botones de tamaño completo y botones fantasma. Los botones son la parte más importante de los sitios web y los botones de la interfaz de usuario de Blaze son muy útiles.
Tipos de botones de la interfaz de usuario de Blaze:
- Botón básico: este es el tipo de botón más simple en la interfaz de usuario de Blaze que se puede personalizar para tener diferentes colores.
- Colores de los botones: este tipo de botón es un botón de color.
- Grupos de botones: Esto se usa para agrupar dos o más botones para que no tengan un margen entre ellos.
- Botones de ancho completo: este tipo de botón toma todo el ancho disponible de la pantalla o contenedor donde se coloca.
- Botones fantasma: este tipo de botón no tiene color de fondo, pero el texto está coloreado. Además, los botones tienen un límite. El color del texto y el límite se pueden modificar.
- Botones redondeados: este tipo de botón tiene esquinas redondeadas en los vértices. Las esquinas redondeadas se pueden aplicar a todos los tipos de botones anteriores.
Clases de botones de la interfaz de usuario de Blaze:
- c-button: Esto se usa para especificarlo como IU de botón.
- tamaños: Los siguientes tamaños se pueden utilizar para los botones.
- u-xpequeño
- tu-pequeño
- u-medio
- u-grande
- u-xgrande
- tu-súper
- c-button–block: Esto se usa para crear botones de ancho completo.
- c-button–ghost: Esto se usa para crear botones de fondo transparente.
- c-button–rounded: Esto se usa para crear botones con esquinas redondeadas.
- c-button–active: Esto se usa para configurar el botón en un estado activo.
- colores: Las siguientes clases se utilizan para los diferentes colores:
- botón c-predeterminado
- c-botón–marca
- c-botón–info
- botón c–advertencia
- c-botón-éxito
- c-botón–error
Sintaxis:
<button type="button" class="c-button
Blaze-UI-Buttons-Class">
...
</button>
Ejemplo 1: En el siguiente ejemplo, tenemos un conjunto de botones básicos de diferentes colores que al hacer clic muestran alertas.
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" />
<title> GeeksforGeeks | BlazeUI </title>
<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>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br> <br>
<div style="display: flex; justify-content: space-evenly;">
<button onclick="showAlert('Default')"
class="c-button u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--error u-small">
Error
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
Producción:
Botones de la interfaz de usuario de Blaze
Ejemplo 2 : En el siguiente ejemplo, tenemos un fantasma y tipos de botones redondeados.
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" />
<title> GeeksforGeeks | BlazeUI </title>
<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>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br> <br>
<div style="display: flex; justify-content: space-evenly;">
<button onclick="showAlert('Default')"
class="c-button c-button--rounded
c-button--ghost u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--rounded
c-button--ghost
c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--rounded
c-button--ghost
c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--rounded
c-button--ghost
c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--rounded
c-button--ghost
c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--rounded
c-button--ghost
c-button--error u-small">
Error
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
Producción:
Botones de la interfaz de usuario de Blaze
Ejemplo 3: En el siguiente ejemplo, tenemos grupos de botones y podemos alternar para tener botones con esquinas afiladas o redondeadas en el grupo de botones. El grupo Botón tiene todos los botones sin ningún espacio entre ellos.
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" />
<title> GeeksforGeeks | BlazeUI </title>
<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>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<button class="c-button c-button--warning"
onclick="toggleRounded()">
Toggle Rounded
</button>
<br /> <br />
<span style="margin: auto; width: fit-content;"
class="c-input-group">
<button onclick="showAlert('Default')"
class="c-button u-xsmall">
Default
</button>
<button onclick="showAlert('Brand')"
class="c-button c-button--brand u-small">
Brand
</button>
<button onclick="showAlert('Info')"
class="c-button c-button--info u-small">
Info
</button>
<button onclick="showAlert('Warning')"
class="c-button c-button--warning u-small">
Warning
</button>
<button onclick="showAlert('Success')"
class="c-button c-button--success u-small">
Success
</button>
<button onclick="showAlert('Error')"
class="c-button c-button--error u-small">
Error
</button>
</span>
</center>
</div>
<script>
const toggleRounded = () => {
$('span').toggleClass('c-input-group--rounded')
}
const showAlert = (message) => {
alert(`The colour of button is ${message} type.`)
}
</script>
</body>
</html>
Producción:
Ejemplo 4 : En el siguiente ejemplo, tenemos diferentes anchos de botones con diferentes colores que al hacer clic muestran una alerta.
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" />
<title> GeeksforGeeks | BlazeUI </title>
<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>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<div>
<button onclick="showAlert('xsmall')"
class="c-button c-button--brand u-xsmall">
xsmall
</button>
<button onclick="showAlert('small')"
class="c-button c-button--info u-small">
small
</button>
<button onclick="showAlert('medium')"
class="c-button c-button--warning u-medium">
medium
</button>
<button onclick="showAlert('large')"
class="c-button c-button--success u-large">
large
</button>
<button onclick="showAlert('xlarge')"
class="c-button c-button--error u-xlarge">
xlarge
</button>
<button onclick="showAlert('super')"
class="c-button u-super">
super
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The size of button is ${message} type.`)
}
</script>
</body>
</html>
Producción:
Ejemplo 5: En el siguiente ejemplo, tenemos botones de ancho completo de diferentes tamaños. Un botón de ancho completo ocupa todo el ancho de la pantalla.
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" />
<title> GeeksforGeeks | BlazeUI </title>
<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>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Buttons </strong>
<br /> <br />
<div>
<button onclick="showAlert('xsmall')"
class="c-button c-button--block
c-button--brand u-xsmall">
xsmall
</button>
<button onclick="showAlert('small')"
class="c-button c-button--block
c-button--info u-small">
small
</button>
<button onclick="showAlert('medium')"
class="c-button c-button--block
c-button--warning u-medium">
medium
</button>
<button onclick="showAlert('large')"
class="c-button c-button--block
c-button--success u-large">
large
</button>
<button onclick="showAlert('xlarge')"
class="c-button c-button--block
c-button--error u-xlarge">
xlarge
</button>
<button onclick="showAlert('super')"
class="c-button c-button--block
u-super">
super
</button>
</div>
</center>
</div>
<script>
const showAlert = (message) => {
alert(`The size of button is ${message} type.`)
}
</script>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/buttons
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA