Mini Widgets

Badges

Badges

Badge

El badge es adecuado para resaltar visualmente características especiales de registros. Se puede usar de forma independiente en la base de datos o integrarse en otros widgets, como la <a href="/documentation/custom-table">Custom Table</a>.

icon y value pueden ser mini-widgets (p. ej. icon: arcCustomIcon({ name: "star", iconSize: "14px" })), no solo texto — el widget los renderiza igual que en arcCustomSelect o arcCustomButton.

Código de aplicación

El siguiente código de aplicación contiene todos los parámetros posibles para este mini-widget Badge.

arcCustomBadge({
        uniqueId: "customBadge",
        embedded: true,
        width: "220px",
        icon: "",
        iconPosition: "left",
        fontSize: "",
        fontWeight: "",
        borderRadius: "",
        singleColor: "",
        fontColor: "",
        backgroundColor: "",
        borderColor: "",
        paddingY: "",
        paddingX: "",
        value: "Löschen"
    })

Descripción detallada de los parámetros

uniqueId lo asignas individualmente y debería ser único en tu interfaz. La razón: si creas varios badges con distintos settings en tu página, los estilos no se sobrescriben entre sí.

uniqueId: "",

value indica el valor de texto que se muestra en el badge.

value: "Badge-Text" // Fixer Text-Wert in "
value: Projekt.Status // Ninox-Felder / -Berechnungen

width indica el ancho de tu badge.

width: "500px", // Pixel-Werte für festgelegte Breiten.
width: "fit-content", // Passt sich dem Inhalt automatisch an.

iconPosition es la posición del icono dentro del badge.

iconPosition: "left", // Icon erscheint links vom Text.
iconPosition: "right", // Icon erscheint rechts vom Text.

fontSize indica el tamaño de fuente del texto en el badge.

fontSize: "14px", //Pixel-Wert

fontWeight determina el grosor de tu texto.

fontWeight: "400", // Zahlen-Wert | 400 entspricht regular
fontWeight: "700", // Zahlen-Wert | 700 entspricht bold

borderRadius determina el redondeo de las esquinas del badge.

borderRadius: "0.3em", // Die Ecken passen sich proportional zur Größe des Badges an.
borderRadius: "4px", // Pixel-Werte für fixe Abrundung.

embedded lo usas cuando no insertas el botón dentro de otro widget. Por defecto está establecido en true.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true,  // Fallback

Un color con gradaciones

Si indicas un singleColor, todos los demás colores (todos los valores con Color) se adaptan automáticamente a este valor. Es decir, ya no necesitas rellenar los siguientes valores de color.

 singleColor: "#1D8C96", // HEX-Code für Farben.

fontColor indica el color de la fuente

 fontColor: "#1D8C96", // HEX-Code für Farben.

backgroundColor indica el color del fondo.

 backgroundColor: "#1D8C96", // HEX-Code für Farben.

borderColor indica el color del borde.

  borderColor: "#1D8C96", // HEX-Code für Farben.

Valores por defecto como fallback

💡 Nota: Si no indicas valores para los parámetros, en la mayoría de los casos hay un valor de fallback definido en el sistema. En algunos lugares, como campos de cálculo (por ejemplo valores numéricos reales), esto no tiene sentido. En parámetros de estilo, como colores o tamaños, sí. Aquí ves el código sin valores introducidos y, en los comentarios detrás, los valores estándar:

arcCustomBadge({
    uniqueId: "",
    width: "", // Fallback: "fit-content"
    icon: "", // Fallback: kein Icon wird angezeigt
    iconPosition: "",// Fallback: kein Icon wird angezeigt
    fontSize: "", // Fallback: "12px"
    fontWeight: "", // Fallback: "400"
    borderRadius: "", // Fallback: "0.3em"
    singleColor: "", // Fallback: "#3E6FFF"
    iconColor: "", // Fallback ist die singleColor
    fontColor: "", // Fallback ist die singleColor
    backgroundColor: "", // Fallback ist die singleColor
    borderColor: "", // Fallback ist die singleColor
    value: "", // Kein Fallback
})