---
title: "Custom Steps"
slug: "custom-steps"
category: "Widgets"
reactComponent: "ArcWidgetSteps"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "steps.tsx"
locale: "es"
hosts: "vue"
---

# Custom Steps

## AI Defaults (read first)

- **uniqueId**: Required, `"steps-" + Nr`.
- **steps**: Array of `{ title: "...", value: "..." }` objects.
- **height**: `"100%"` when embedded. Fixed height (e.g. `"80px"`) when standalone.
- **embedded**: Lives inside `settings: { embedded: true }`, NOT at root level.
- **Klick (Ninox):** `actions: [...]` auf dem Step — der Adapter setzt intern `clickable: true`. `type: "update"` mit `recordId: Nr`, `field: fieldId(Nr, "Feldname")`.
- **Klick (React):** `clickable: true` auf dem Step; `onClick(event, stepIndex)` am Host (`stepIndex` = 0-basierter Index in `steps`) — **kein** `actions` in `data`.
- **stepWidth**: Default `"80px"`, set wider for longer labels.
- **connectionLine**: `{ show: true, height: "3px" }` for visual step connections.

# Visualiza avances o estados — con estilo.

<iframe src="https://www.youtube.com/embed/qoMVaVCJ1Sw?iv_load_policy=3&rel=0&modestbranding=1&playsinline=1&autoplay=1&mute=1" data-thumbnail="Medium Quality" frameborder="0" allow="presentation; fullscreen; accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>Con el widget `arcCustomSteps` puedes implementar procesos de varios pasos, indicadores de estado o de progreso directamente en tu interfaz de Ninox — con una estructura clara, visualmente atractiva y totalmente personalizable. Ya sean fases de proyecto, estados de proceso o sistemas de semáforo: los Steps se pueden configurar de forma flexible en ancho, colores, espaciado y acciones.

Los pasos individuales se pueden construir dinámicamente a partir de tus registros y opcionalmente dotarse de acciones (p. ej. `update`, `delete`, `popup`). Así se crea un indicador de progreso interactivo que no solo informa, sino que también controla.

En esta documentación te mostramos:

- cómo está estructurado el widget,
- qué parámetros puedes adaptar,
- y cómo lo integras paso a paso en tu sistema.

👉 **Sigue desplazándote para ver código de ejemplo, resumen de parámetros y consejos de uso.**

![](https://framerusercontent.com/images/i14A175WOPvdKLDT7G7rK5XQlmE.png)

## Código de aplicación


```javascript
let current := this;
let list := (select 'Auftrag Steps');
let data := {
        uniqueId: "Auftragsphase",
        settings: {
            embedded: true,
            height: "150px",
            fontSizeLabel: "10px",
            fontSizeValue: "20px",
            colorValue: "",
            colorLabel: "#ffffff",
            borderColor: "transparent",
            backgroundColor: "transparent",
            alignX: "center",
            stepWidth: "80px",
            gapY: "10px",
            stepRadius: "8px",
            connectionLine: {
                show: true,
                height: "3px"
            }
        },
        steps: list.[{
                title: title,
                value: value,
                subtitle: "Test",
                colorValue: "",
                backgroundColor: "",
                actions: [{
                        recordId: current.Nr,
                        type: "update",
                        field: "",
                        value: number(Nr)
                    }]
            }]
    };
arcCustomSteps(data)
```

## Parámetros

El widget recibe un objeto con los siguientes componentes principales:

- `uniqueId` – un identificador único para el widget
- `settings` – ajustes generales de representación para todos los steps
- `steps[]` – una lista de pasos individuales con valores de detalle opcionales

Los valores de `settings` se aplican a todos los steps, pero se pueden sobrescribir de forma específica por step (p. ej. color o ancho).

## Bloque de settings

### embedded

Tipo: `boolean`
Default: `false`

Determina si el widget se integra en un layout existente.

- Con `true` se renuncia a marcos externos, colores de fondo y espaciados estándar.
- Ideal cuando el widget está dentro de un contenedor de componente más grande que controla el layout por sí mismo.

💡 **Consejo: **Si estableces `embedded: true`, debes asegurarte de que el elemento circundante tenga una altura adecuada y, en su caso, su propio layout. El widget se adapta entonces completamente a ese marco.

### height

**Tipo:** `text`
**Default:** `"100%"`

Define la altura de todo el widget de Steps. Acepta valores CSS clásicos como `"150px"`, `"auto"` o `"100%"`.


```javascript
height: "150px",
height: "",
```

💡 **Consejo: **Si usas el widget **sin integrarlo** (`embedded: false`), deberías establecer una altura fija — especialmente con anchos de step estrechos, para que el layout y el comportamiento de scroll se mantengan consistentes.

![](https://framerusercontent.com/images/IprIm5AORs6cO1ATQc2gvMZtdc.png)

### fontsizeLabel

**Tipo:** `text`
**Default:** `"13px"`

Determina el tamaño de fuente para `title` y `subtitle` dentro de un step. Este valor afecta tanto a la etiqueta superior (`title`) como a la inferior (`subtitle`) de cada step — siempre que no se haya definido un valor propio directamente en el step.


```javascript
fontSizeLabel: "10px", // Pixel-Werte
```

💡 **Consejo: **Para layouts compactos se recomienda un tamaño de fuente menor como `"10px"` o `"11px"` — especialmente con muchos steps de ancho reducido.

### fontsizeValue

**Tipo:** `text`
**Default:** `"35px"`

Indica el tamaño de fuente para el valor central (`value`) de un step — es decir, el número o identificador dentro del círculo. Este valor influye en la legibilidad y el peso visual del contenido central. Se usa a menudo para números de estado, contadores o fases.


```javascript
fontSizeValue: "20px", // Pixel-Werte
```

💡 **Consejo: **Valores más pequeños como `"20px"` son adecuados para steps muy compactos, tamaños mayores funcionan bien con pocos pasos de ancho amplio.

### colorValue

**Tipo:** `text`
**Default:** `"#3E6FFF"`

Fija el color del texto del elemento `value` central en el círculo del step. El color se refiere exclusivamente al texto (p. ej. número, estado o identificador) — no al fondo del círculo.


```javascript
colorValue: "#ddd", // HEX-Werte
```

💡 **Consejo: **La legibilidad depende en gran medida del fondo. Asegura un contraste suficiente con `backgroundColor`.

### colorLabel

**Tipo:** `text`
**Default:** `"#566eb1"`

Define el color del texto para `title` y `subtitle` dentro de un step. Este valor de color se usa para la etiqueta superior e inferior — mientras el step no indique un color distinto.


```javascript
 colorLabel: "#ffffff", // HEX-Werte
```

💡 **Consejo: **Usa colores de texto claros como `#ffffff` solo con fondo oscuro — de lo contrario la legibilidad se ve afectada.

### borderColor

**Tipo:** `text`
**Default:** `"#e5e5e5"`

Define el color de las líneas de separación entre los steps. Este color se aplica como línea de borde derecha de cada step (excepto en el último). Ayuda a delimitar visualmente los pasos entre sí.

💡 **Consejo: **Si quieres una representación especialmente reducida o fluida, establece `borderColor: "transparent"` — así las líneas de separación desaparecen por completo.

### backgroundColor

**Tipo:** `text`
**Default:** `"#f7f8fc"`

Determina el color de fondo de los círculos de los steps **y** de las líneas de conexión. Este color se aplica a los círculos centrales (`value`) así como a las líneas entre steps — pero no al fondo exterior de todo el widget (este suele ser transparente o lo gestiona el contenedor).


```javascript
backgroundColor: "transparent", // Transparenter Hintergrund
backgroundColor: "#ededed", // HEX-Werte
```

💡 **Consejo: **Un fondo claro proporciona un aspecto limpio y moderno. Para efectos especiales también puedes usar `"transparent"` o colores ligeramente teñidos.

### alignX

**Tipo:** `text`
**Valores:** `"left"`, `"center"` (default), `"right"`

Controla la alineación horizontal de los steps dentro del widget.


```javascript
alignX: "center", // left, center, right
algnX: "", // default: center

```

Este ajuste influye en **dónde se alinean los steps dentro de la barra**, especialmente cuando hay menos steps que espacio disponible.

- `"left"` → Los steps empiezan totalmente a la izquierda
- `"center"` → Steps centrados
- `"right"` → Steps alineados a la derecha

💡 **Nota: **Esta alineación se aplica tanto a todo el widget como a los contenidos de cada step (p. ej. título, subtítulo, valor).

### stepWidth

**Tipo:** `text`
**Ejemplo:** `"80px"`
**Default:** *(vacío)*

Fija el ancho mínimo de cada step. Si no se indica ningún valor, los steps se adaptan automáticamente al ancho de su contenido o contenedor. El ancho afecta tanto al área visible del step como a su área clicable.


```javascript
stepWidth: "80px", // Pixel-Werte
```

💡 **Consejo: **Usa anchos fijos con muchos steps de texto corto para lograr un layout uniforme. Con contenidos variables, es mejor dejarlo vacío y confiar en el escalado automático.

### gapY

**Tipo:** `text`
**Ejemplo:** `"10px"`
**Default:** *(vacío)*

Define el espacio vertical (`gap`) entre los elementos dentro de un step — es decir, entre `title`, `value` y `subtitle`. Este valor actúa dentro de cada step individual, no entre steps.


```javascript
gapY: "10px", // Pixel-Werte
```

💡 **Consejo: **Con un valor menor logras una representación más compacta; espacios mayores resultan más aireados y legibles — especialmente con tamaños de fuente mayores.

### stepRadius

**Tipo:** `text`
**Ejemplo:** `"8px"`
**Default:** *(vacío)*

Determina el redondeo del círculo del step (`value`) mediante el valor CSS `border-radius`. Un valor alto como `"50px"` genera un círculo perfectamente redondo — valores más bajos generan rectángulos más suaves o formas de píldora.


```javascript
stepRadius: "8px", // Pixel-Werte
```

💡 **Consejo: **Para diseños de contador clásicos y redondos, usa `"50%"` o `"999px"` — para variantes más angulares puedes experimentar con valores como `"4px"` u `"8px"`.

### Bloque connectionLine

En el grupo de settings `connectionLine` determinas los parámetros de la línea entre tus steps. Con el parámetro show determinas si la línea debe ser visible en absoluto (valores posibles: true / false; default: true). Con el parámetro height defines la altura en píxeles de la línea (default: 3px).


```javascript
connectionLine: {
                show: true, // true, false
                height: "3px" // Pixel-Werte
            }
```

## steps[]: configurar pasos individuales

Cada entrada en `steps` es un objeto que describe un step individual. Además de título, valor y acciones, también puedes establecer muchos parámetros de diseño directamente por step — estos sobrescriben entonces los ajustes generales de `settings`.


```javascript
{
  title: "In Bearbeitung",
  value: "2",
  subtitle: "laufend",
  width: "90px",
  colorLabel: "#ffffff",
  fontSizeLabel: "11px",
  colorValue: "#00cc99",
  fontSizeValue: "28px",
  backgroundColor: "#222",
  borderColor: "transparent",
  actions: [...]
}
```

<figure><table><tbody><tr><th>Feld

</th><th>Typ

</th><th>Beschreibung

</th></tr><tr><td>`title`

</td><td>`text`

</td><td>Título encima del círculo

</td></tr><tr><td>`value`

</td><td>`text`/`number`

</td><td>Indicador central en el círculo

</td></tr><tr><td>`subtitle`

</td><td>`text`

</td><td>Texto debajo del círculo

</td></tr><tr><td>`width`

</td><td>`text`

</td><td>Ancho individual del step

</td></tr><tr><td>`colorLabel`

</td><td>`text`

</td><td>Color del texto para `title` y `subtitle`

</td></tr><tr><td>`fontSizeLabel`

</td><td>`text`

</td><td>Tamaño de fuente para `title` y `subtitle`

</td></tr><tr><td>`colorValue`

</td><td>`text`

</td><td>Color del texto del valor central

</td></tr><tr><td>`fontSizeValue`

</td><td>`text`

</td><td>Tamaño de fuente del valor

</td></tr><tr><td>`backgroundColor`

</td><td>`text`

</td><td>Color de fondo del círculo y de las líneas de conexión

</td></tr><tr><td>`borderColor`

</td><td>`text`

</td><td>Color de la línea de separación del step

</td></tr><tr><td>`actions[]`

</td><td>`array`

</td><td>Acciones que se pueden disparar al hacer clic (ver abajo)

</td></tr></tbody></table></figure>💡 **Consejo: **No tienes que indicar todos los campos. Cada step adopta automáticamente los valores de `settings` si no se hacen indicaciones propias.