Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito que proporciona una base sólida y mantenible para desarrollar soluciones web escalables. Todos los componentes de Blaze UI se desarrollan primero para dispositivos móviles y se basan en características nativas del navegador, no en ninguna biblioteca o marco adicional.
En este artículo, veremos los rangos de color de Blaze UI . Hay cinco clases que se pueden usar además de la clase c-range para cambiar el color de los componentes del rango. Estas clases se enumeran a continuación.
Clases de rangos de color de Blaze UI:
- c-range–brand: Esta clase se utiliza para cambiar el color de la gama al color de la marca.
- c-range–info: esta clase se usa para cambiar el color del rango al color de información.
- c-range–warning: esta clase se utiliza para cambiar el color del rango al color de advertencia.
- c-range–success: Esta clase se usa para cambiar el color del rango al color de éxito.
- c-range–error: Esta clase se usa para cambiar el color del rango al color del error.
Sintaxis:
<input type="range" class="c-range c-range--brand">
Ejemplo 1: este ejemplo describe el uso de clases de modificadores de color de rango para cambiar el color del componente de rango. El componente de rango se puede deshabilitar mediante el atributo deshabilitado . El componente de rango deshabilitado no muestra ningún color incluso si las clases de modificadores de color están presentes en el componente.
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>Blaze UI - Color Range</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Color Range - Blaze UI</h3>
<div class="u-window-box-super">
<p>Default Colored Range</p>
<input type="range" class="c-range">
<p>Brand Colored Range</p>
<input type="range" class="c-range c-range--brand">
<p>Error Colored Range</p>
<input type="range" class="c-range c-range--error">
<p>Info Colored Range</p>
<input type="range" class="c-range c-range--info">
<p>Warning Colored Range</p>
<input type="range" class="c-range c-range--warning">
<p>Success Colored Range</p>
<input type="range" class="c-range c-range--success">
</div>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra cómo deshabilitar el componente de rango y elimina el efecto de las clases de modificadores de color.
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>Blaze UI - Color Range</title>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>Color Range - Blaze UI</h3>
<div class="u-window-box-super">
<h4>Active Color Ranges</h4>
<input type="range" class="c-range c-range--error">
<input type="range" class="c-range c-range--warning">
<h4>Disabled Color Ranges</h4>
<input type="range" class="c-range
c-range--error" disabled>
<input type="range" class="c-range
c-range--warning" disabled>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/components/ranges/
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA