Arc Rider Docs · Markdown

Mini Widgets

Images

Images

AI Defaults
Function name
`arcCustomImage`.
value
Image URL or Base64 string.
width
, **height**: Set dimensions directly.
borderRadius
E.g. `"8px"` for rounded corners, `"50%"` for circular.
objectFit
`"cover"` (crop to fill) or `"contain"` (fit inside).

Custom Image

Mit Images kannst du Bilder in Tabellen, Kanban oder anderen Widgets laden. Du hast etliche Einstellungen, von Umrandung bis Abrundung über Größeneinstellungen.

arcCustomImage({
        uniqueId: "ProjektBild"+Nr,
        title: "Logo",
        width: "80px",
        height: "80px",
        backgroundSize: "cover",
        backgroundColor: "",
        style: "", // Hier kannst du eigene CSS Styles hinterlegen.
        radius: "5px",
        borderColor: "",
        link: text(Projekt.'Bild URL') // Hier musst du immer einen shareLink deines Bildes hinterlegen.
})

Allgemeine Settings

uniqueId

Die uniqueId vergibst du individuell und sollte einzigartig sein. Sinn dahinter ist: Wenn du mehrere Images mit unterschiedlichen Settings auf deiner Oberfläche erstellst, überschreiben sich die Styles nicht.

uniqueId: "ProjektBild" + Nr // Text in " + Ninox Nr

title

title: "Logo",

width

Mit width kannst du die Breite des Bild Containers einstellen.

width: "100%", // Prozent-Werte. Hier: volle Breite.
width: "100px", // Pixel-Werte

height

Mit height kannst du die Höhe des Bilde Containers einstellen.

height: "auto", // Automatisch an den Inhalt angepasste Höhe.
height: "300px", // Pixel-Werte

backgroundSize

Mit backgroundSize definierst du die Größe des Bildes im Container.

backgroundSize: "cover", // Füllt den Container komplett aus, kann dazu führen, dass das Bild abgeschnitten wird.
backgroundSize: "contain", // Das Bild wird komplett in dem Container angezeigt.
backgroundSize: "50%",
backgroundSize: "auto", // Bild wird in der Originalgröße angezeigt.
backgroundSize: "15px 10px", // Gibt Breite und Höhe in Pixel an.

backgroundColor

Mit backgroundColor kannst du die Farbe des Hintergrundes bestimmen. Vor allem nützlich, wenn kein Bild angezeigt wird oder für Bilder, die nicht auf die Gesamtgröße angepasst wurden. Es ist auch möglich, den Hintergrund transparent zu machen.

 backgroundColor: "#1D8C96", // HEX-Code für Farben
 backgroundColor: "transparent", // für einen transparenten Hintergrund

style

Bei dem style Parameter kannst du eigene CSS styles hinzufügen.

style: "opacity 30%;", // CSS styles

<h5> </h5>