Mini Widgets

Text

1.0.0

Text

Anwendungscode

arcCustomText({
		uniqueId: "" + Nr,
		embedded: true,
		width: "",
		height: "",
		alignY: "",
		alignX: "",
		fontSize: "",
		fontWeight: "",
		fontColor: "",
		lineHeight: "",
		textWrap: "",
		textScroll: "",
		textAlign: "",
		textDirection: "horizontal",
		textDecoration: {
			type: "",
			style: "",
			color: "",
			thickness: ""
		},
		value: ""
	})

uniqueId

Die uniqueId vergibst du individuell, sie muss einzigartig sein. Sinn dahinter ist: Wenn du mehrere customText mit unterschiedlichen Settings auf deiner Oberfläche anzeigst, überschreiben sich die Styles nicht.

uniqueId: Nr, // Ninox-Feld 
uniqueId: "Aufgabe Beschreibung", // Text in ""

embedded

Den Parameter embedded nutzt du, wenn du der Text nicht innerhalb eines anderen Widgets liegt. Standardmäßig ist dies aber auf true gesetzt.

embedded: false, // ermöglicht den Standalone Einsatz des Widgets (nicht eingebettet in anderen Widgets)
embedded: true, // wenn Text eingebettet in anderes Widget 
embedded: "", // default: true

width

Bei with definierst du, wie breit der Container deines customText sein soll.

width: "100%", // Prozent-Werte oder "80px" Pixel-Werte
width: "auto", // witdh passt sich an Inhalt an
width: "", // default: 100%

height

Bei height definierst du, wie hoch der Container deines customText sein soll.

height: "100%", // Prozent Werte
height: "100px", // Pixel Werte
height: "", // default: auto

alignY

Den Parameter alignY nutzt du, um zu bestimmen, ob der Container des customText auf der Y-Achse oben, unten oder mittig angeordnet sein soll.

alignY: "bottom", // top, bottom, center
alignY: "", // default: top

alignX

Den Parameter alignX nutzt du, um zu bestimmen, ob der Container des customText auf der X-Achse links, rechts oder mittig angeordnet sein soll.

alignX: "right", // left, right, center
alignX: "", // default: left

fontWeight

Bei fontWeight kannst du die Dicke deiner Schrift definieren.

fontWeight: "normal", // CSS-Values (bold, lighter etc.)
fontWeight: "800", // Zahl 100-800 in 100er Schritten (400=normal, 800=bold)
fontWeight: "", // default: normal/400

fontColor

Mit fontColor definierst du die Schriftfarbe deines customText.

fontColor: "#000000", // HEX Werte
fontColor: "rgb(77,166,255)", // RGB Werte
fontColor: "", // default: #000

lineHeight

Mit lineHeight bestimmst du den Abstand zwischen den Textzeilen.

lineHeight: "5px", // fixe line-height in px, pt, cm etc.
lineHeight: "1.5", // punkt-getrennte Zahl, multipliziert mit font-size
lineHeight: "150%", // line-height in Prozent von font-size
lineHeight: "", // default: normal

textWrap

Mit textWrap bestimmst du, wie dein Text umgebrochen werden soll. Du kannst gängige CSS Values für white-space nutzen.

textWrap: "normal", // automatischer Zeilenumbruch, wenn verfügbaren Platz überschritten
textWrap: "nowrap", // Text bleibt in einer Zeile, auch wenn verfügbarer Platz überschritten
textWrap: "pre", // Text wird genau so angezeigt wie im HTML-Code, mit Leerzeichen und Zeilenumbrüchen
textWrap: "pre-wrap", // Text wird umgebrochen, wenn verfügbarer Platz überschritten, behält Leerzeichen und Zeilenumbrüche bei
textWrap: "pre-line", // Text wird wie "pre-wrap" behandelt, aber behält normale Zeilenumbrüche bei und entfernt zusätzliche Leerzeichen
textWrap: "", // default: normal

textScroll

Mit textScroll kannst du mit true oder false einstellen, ob der Text, wenn er mehr Platz braucht, als der Container hergibt (bestimmst du mit width und height), scrollbar sein soll oder abgeschnitten sein soll.

textScroll: true, // Der Text wird scrollbar, wenn er den Container überschreitet.
textScroll: false, // Der Text wird abgeschnitten, wenn er den Container überschreitet.
textScroll: "", // default: true

textAlign

Bei textAlign bestimmst du wie der Text angeordnet sein soll, links- oder rechtsbündig, zentriert oder über die Zeile verteilt.

textAlign: "right", // left, right, center
textAlign: "justify", // streckt den Text so, dass jede Linie dieselbe Breite hat (wie zB in Zeitungen)
textAlign: "", // left

textDirection

Mit dem Parameter textDirection kannst du bestimmen, ob der Text horizontal oder vertical ausgerichtet sein soll.

textDirection: "vertical", // vertical, horizontal
textDirection: "", // horizontal

textDecoration

Bei textDecorationSettings kannst du mit dem Parameter type deinen Text Unter- und Durchstreichen bzw. eine Linie über, und auch sowohl unter als auch über, dem Text erzeugen. Außerdem kannst du diese Linie mit style, color und thickness individuell stylen.

textDecoration: {
            type: "",
            style: "",
            color: "",
            thickness: ""
        }

Der Parameter type bestimmt die Art der Linie bzw. die Position.

type: "none", // keine Linie 
type: "overline", // Linie oberhalb des Textes
type: "line-throug", // Text wird durchgestrichen
type: "underline", // Text wird unterstrichen
type: "overline underline", // Erzeugt eine Linie ober- und unterhalb des Textes
type: "", // default: keine Linie

Der Parameter style bestimmt den style der Linie.

style: "solid", // gerade Linie
style: "double", // doppelte Linie
style: "dotted", // gepunktete Linie
style: "dashed", // gestrichelte Linie
style: "wavy", // gewellte Linie
style: "", // default: solid

Der Parameter color bestimmt die Farbe der Linie.

color: "#fff", // hex-code Farben
color: "rgb(249, 201, 36)", // rgb() Farben
color: "", // default: #000

Der Parameter thickness bestimmt die Dicke der Linie.

thickness: "7px", //
thickness: "", // default: 1px

value

Bei value setzt du den Wert ein, der als customText ausgegeben werden soll. Das kann entweder geschriebener Text in "" sein oder ein Ninox Feld. Fall es kein Ninox-Textfeld ist, denk dran den Wert in text() einzubinden.

value: "Dies ist mein customText.", // manuell eingefügter Text
value: Beschreibung, // Ninox Wert
value: "", // gibst du keinen value ein, wird nichts ausgegeben

Tipp für schmale Spalten:

Bei der customTable kannst du nun mithilfe des customText die Spalten-Titel vertical darstellen, so sparst du Platz bei Zellen, die zB nur eine Checkbox beinhalten und stellst Elementen, die mehr Raum benötigen, dementsprechend mehr zur Verfügung💡

Zurück

Clock

Zurück

Clock

Weiter

Theme Clean White

Weiter

Theme Clean White