Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco. Proporciona una gran base para construir sitios web escalables más rápido. Blaze UI viene con una gran cantidad de componentes prediseñados y muchas utilidades para que los desarrolladores no tengan que crear todo desde cero.
En este artículo, veremos el grupo de entrada de la interfaz de usuario de Blaze redondeado. Hay tres clases que se utilizan para redondear un grupo de entrada. Estas clases se mencionan a continuación.
Clases redondeadas del grupo de entrada de Blaze UI:
- c-input-group–rounded: esta clase se usa para redondear ambos extremos del grupo de entrada.
- c-input-group–rounded-left: Esta clase se usa para redondear el extremo izquierdo del grupo de entrada.
- c-input-group–rounded-right: esta clase se usa para redondear el extremo derecho del grupo de entrada.
Sintaxis:
<div class="c-input-group c-input-group--rounded">
...
</div>
Ejemplo 1: El siguiente ejemplo muestra el uso de la clase c-input-group-rounded para redondear ambos extremos de un grupo de entrada.
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>Input group Rounded | Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html{
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Input Group Rounded - Blaze UI</h3>
</div>
<div class="u-window-box-xlarge">
<h4>Text Inputs</h4>
<div class="c-input-group c-input-group--rounded">
<div class="o-field">
<input class="c-field" name="lInput"
placeholder="Left Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Middle Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Right Text Input">
</div>
</div>
</div>
<div class="u-window-box-xlarge">
<h4>Using Buttons</h4>
<div class="c-input-group c-input-group--rounded">
<button class="c-button c-button--brand">
Left Button
</button>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Middle Text Input">
</div>
<button class="c-button c-button--brand">
Right Button
</button>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo utiliza las clases c-input-group–rounded-left y c-input-group–rounded-right , para redondear los extremos izquierdo y derecho respectivamente.
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>Input group Rounded | Blaze UI</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
html{
font-family:sans-serif;
}
</style>
</head>
<body>
<div class="u-centered">
<h2 style="color:green;">GeeksforGeeks</h2>
<h3>Input Group Rounded - Blaze UI</h3>
</div>
<div class="u-window-box-xlarge">
<h4>Left Rounded</h4>
<div class="c-input-group c-input-group--rounded-left">
<div class="o-field">
<input class="c-field" name="lInput"
placeholder="Left Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Middle Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Right Text Input">
</div>
</div>
</div>
<div class="u-window-box-xlarge">
<h4>Right Rounded</h4>
<div class="c-input-group c-input-group--rounded-right">
<div class="o-field">
<input class="c-field" name="lInput"
placeholder="Left Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Middle Text Input">
</div>
<div class="o-field">
<input class="c-field" name="mInput"
placeholder="Right Text Input">
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/inputs/