BrutalLab UI
es
EnglishEspañol
FeedbackDisponible

Combo Meter

Chip de combo con rayo, multiplicador y pips; su tono sigue los mismos niveles que Reward Sticker.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/combo-meter.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ComboMeter } from "@/components/ui/combo-meter";
export default function Demo() {
  const [combo, setCombo] = useState(2);
  return (
    <div className="grid justify-items-start gap-6">
      <div className="flex flex-wrap gap-3">
        {[0, 1, 2, 3, 5].map((value) => <ComboMeter key={value} combo={value} />)}
      </div>
      <div className="flex flex-wrap items-center gap-3">
        <ComboMeter combo={combo} />
        <Button variant="outline" onClick={() => setCombo(combo + 1)}>Clean answer</Button>
        <Button variant="ghost" onClick={() => setCombo(0)}>Miss</Button>
      </div>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

  • La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
  • Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
  • Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

PropTipoDefaultDescripción
combonumberRequiredConsecutive clean answers from the consumer; 0 shows a dash.
label / stepsstring / number"Combo" / 5Accessible name and pips until the top tier.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

El multiplicador es texto y la etiqueta está disponible para tecnologías de asistencia; los pips son decorativos.

El salto del valor se detiene con movimiento reducido.