GIP
SucheCtrl K

Appearance

Material Symbols ​

Material Symbols Varianten

Ninox hat mit Version 3.12 einen neuen Icon-Picker eingeführt, der auf den Google Material Symbols (ehemals Material Icons) basiert. Mit unserem Material-Symbols-Modul kannst du nun die komplette Bandbreite der Google Material Symbols auch in deinen selbst gebauten Designs nutzen.

Funktion und Aussehen ​

Mit unserem Modul kannst du Material Symbols in verschiedenen Varianten darstellen: ungefüllt, gefüllt und sogar zweifarbig. Auch die Größe deiner Symbole kannst du ganz nach deinen Bedürfnissen skalieren. Zusätzlich besitzt das Modul den Style-Key, sodass du noch flexibler in deiner Gestaltung bist.

Icon-Namen eines Material Symbols herausfinden ​

Alle der über 2.500 Material Symbols findest du hier. Dort kannst du auch den Icon-Namen eines Symbols herausfinden, indem du auf das Symbol klickst und in dem aufklappenden Menü entweder im Tab "Web" ganz unten und im Tab "Android" oben nachsiehst.

Ein Material Symbol in Google Fonts finden

Falls du ein Symbol bereits in Ninox mit dem Icon-Picker gewählt hast, kannst du den Icon-Namen mithilfe eines Ninox-Formelfeldes herausfinden, indem du entweder text() oder raw() von dem Symbolfeld ausgeben lässt. Mit text() erhältst du nur den Namen des Icons, während raw() dir zusätzliche Informationen, wie die Farbe des Icons, im JSON-Format zurückgibt.

Modulcode ​

json
GIP_materialSymbols({
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   style: "",
   scalingFactor: 0,
   weight: 0,
   filling: 0 / true,
   color: "",
   secondColor: "",
   icon: "",
})
json
GIP_materialSymbols({
   embedded: {
   },
   icon: "",
})
json
html( raw(GIP_master({})) + 
raw(GIP_materialSymbols({
   embedded: {
   	height: "",
   	styleHtml: "",
   	styleStri: "",
   },
   style: "",
   scalingFactor: 0,
   weight: 0,
   filling: 0 / true,
   color: "",
   secondColor: "",
   icon: "",
})
))

Key-Table ​

arrow_rightembeddedRequired
boolean, object

Default: false

Wenn des Modul in einem anderen Modul eingebettet ist, wird der boolesche Wert true eingetragen. Liegt das Modul alleine, bzw. als äußerster Container in einem Formelfeld, kann entweder false oder ein Object mit Angaben zur Höhe und Styling des Formelfeldes angegeben werden.

arrow_rightheight
string

Default: "auto"

Höhe des Moduls in Pixeln (px).

arrow_rightstyleHtml
string

Default: -

Inline CSS-Styling des Html-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightstyleStri
string

Default: -

Inline CSS-Styling des Stringeditor-Containers des Formel-Feldes, in dem die GIP-Module liegen.

arrow_rightstyle
string

Default: Siehe Globaler CSS-Code

Inline CSS-Styling des Moduls oder Elements.

arrow_rightscalingFactor
number

Default: 1

Größenskalierung des Material-Symbols.

arrow_rightweight
number

Default: 400

Strichdicke des Material-Symbols, die von 100 (dünn) bis 700 (dick) gewählt werden kann.

arrow_rightfilling
number, boolean

Default: false / 0

Angabe, ob ein Material-Symbol ausgefüllt (true) oder leer (false) dargestellt werden soll.

arrow_rightcolor
string

Default: -

Farbe des Material-Symbols.

arrow_rightsecondColor
string

Default: -

Zweite Farbe des Material Symbols.

arrow_righticonRequired
string

Default: -

Name des Material-Symbols, das angezeigt werden soll (z.B. "emoji_nature"). Eine Übersicht der existierenden Material-Symbols ist unter https://fonts.google.com/icons zu finden. Mit einem Klick auf ein Symbol öffnet sich rechts ein Menü, in dem der Icon-Name zu finden ist (im Tab "Web" ganz unten und im Tab "Android" oben).

Beispiele ​

Material Symbol: Basic ​

Beispiel Material Symbols Basic

Beschreibung

Wir möchten ein einfaches Material Symbol ohne Füllung oder Zweifarbigkeit erstellen.

Zunächst suchen wir uns den Namen des Material Symbols auf der Google Fonts Website heraus. Danach setzen wir diesen und die Farbe, in der wir das Symbol darstellen wollen, in den Modulcode ein.

json
GIP_materialSymbols({
    embedded: false,
    color: "#00369d",
    icon: "cloud_done" //Icon Name das Material Symbols.
})

Zusätzlich möchten wir die Größe des Symbols erhöhen. Die Standardgröße von 1.25 rem, in der auch Ninox-Symbolfelder die Symbole darstellen, ist uns hier gerade zu gering. Wir möchten das Symbol um das 10-fache vergrößern und vergeben daher einen Scaling Factor von 10:

json
GIP_materialSymbols({
    embedded: false,
    scalingFactor: 10, //Vergrößert das Material Symbol um den angegebenen Faktor.
    color: "#00369d",
    icon: "cloud_done"
})
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_materialSymbols({
		embedded: false,
		scalingFactor: 10,
		filling: false,
		color: "#00369d",
		icon: "cloud_done"
	})
))
json
GIP_materialSymbols({
	embedded: true,
	scalingFactor: 10,
	filling: false,
	color: "#00369d",
	icon: "cloud_done"
})

Material Symbol: Gefüllt ​

Beispiel Material Symbols Basic

Beschreibung

Wir möchten ein Material Symbol mit Füllung, aber ohne Zweifarbigkeit erstellen.

Zunächst suchen wir uns den Namen des Material Symbols auf der Google Fonts Website heraus. Danach setzen wir diesen und die Farbe, in der wir das Symbol darstellen wollen, in den Modulcode ein. Um das Symbol gefüllt anzuzeigen, setzen wir filling: true oder filling: 1.

json
GIP_materialSymbols({
    embedded: false,
	  filling: true, //true oder 1: Das Symbol wird gefüllt dargestellt. false oder 0: Das Symbol wird ohne Füllung dargestellt.
    color: "#00369d",
    icon: "cloud_done" //Icon Name das Material Symbols.
})

Zusätzlich möchten wir die Größe des Symbols erhöhen. Die Standardgröße von 1.25 rem, in der auch Ninox-Symbolfelder die Symbole darstellen, ist uns hier gerade zu gering. Wir möchten das Symbol um das 10-fache vergrößern und vergeben daher einen Scaling Factor von 10:

json
GIP_materialSymbols({
    embedded: false,
    scalingFactor: 10, //Vergrößert das Material Symbol um den angegebenen Faktor.
    filling: true,
    color: "#00369d",
    icon: "cloud_done"
})
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_materialSymbols({
		embedded: false,
		scalingFactor: 10,
		filling: true,
		color: "#00369d",
		icon: "cloud_done"
	})
))
json
GIP_materialSymbols({
	embedded: true,
	scalingFactor: 10,
	filling: true,
	color: "#00369d",
	icon: "cloud_done"
})

Material Symbol: Zweifarbig ​

Beispiel Material Symbols Basic

Beschreibung

Wir möchten ein zweifarbiges Material Symbol erstellen.

Zunächst suchen wir uns den Namen des Material Symbols auf der Google Fonts Website heraus. Danach setzen wir diesen und die zwei Farben, in denen wir das Material Symbol darstellen wollen, in den Modulcode ein. Dabei bestimmt der color-Key die Rahmenfarbe und der secondColor-Key die Hintergrundfarbe.

json
GIP_materialSymbols({
    embedded: false,
		color: "#00369d",
		secondColor: "#ccd4ff",
		icon: "cloud_done" //Icon Name das Material Symbols.
})

Zusätzlich möchten wir die Größe des Symbols erhöhen. Die Standardgröße von 1.25 rem, in der auch Ninox-Symbolfelder die Symbole darstellen, ist uns hier gerade zu gering. Wir möchten das Symbol um das 10-fache vergrößern und vergeben daher einen Scaling Factor von 10:

json
GIP_materialSymbols({
    embedded: false,
    scalingFactor: 10, //Vergrößert das Material Symbol um den angegebenen Faktor.
    color: "#00369d",
    secondColor: "#ccd4ff",
    icon: "cloud_done"
})
Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_materialSymbols({
		embedded: false,
		scalingFactor: 10,
		color: "#00369d",
		secondColor: "#ccd4ff",
		icon: "cloud_done"
	})
))
json
GIP_materialSymbols({
	embedded: true,
	scalingFactor: 10,
	color: "#00369d",
	secondColor: "#ccd4ff",
	icon: "cloud_done"
})

Badge: Checkbox mit Material Symbol ​

Beschreibung

Wir möchten eine einfache Checkbox erstellen. Dafür nutzen wir die Material-Symbols "check_box" (angehakte Checkbox) und "check_box_outline_blank" (leere Checkbox). Um die Checkbox und den Text "Aufgabe erledigt?" zu gruppieren, nutzen wir in diesem Fall ein GIP-Badge. Zusätzlich dient das Badge auch dazu, die Update-Action für das Ninox-'Ja / Nein'-Feld zu bauen. Mit entsprechendem Styling, kann dasselbe Ergebnis aber auch mit Layout, Interaction und Card erzielt werden.

Code des Beispiels
json
html(raw(GIP_master({})) +
raw(GIP_badge({
		uniqueId: "Checkbox" + Nr,
		embedded: false,
		direction: "horizontal",
		class: "",
		style: "background-color: inherit; color: inherit; border: none;",
		blocks: [{
				class: "",
				style: "",
				value: if 'Ja / Nein' = true then
					GIP_materialSymbols({
							embedded: true,
							style: "",
							scalingFactor: 0,
							weight: 0,
							filling: 1,
							color: "",
							secondColor: "#bcf0ad",
							icon: "check_box"
						})
				else
					GIP_materialSymbols({
							embedded: true,
							style: "",
							scalingFactor: 0,
							weight: 0,
							filling: 0,
							color: "",
							secondColor: "",
							icon: "check_box_outline_blank"
						})
				end
			}, {
				class: "",
				style: "",
				value: "Aufgabe erledigt?"
			}],
		actions: [{
				trigger: "click",
				scripts: [{
						type: "update",
						recordId: raw(Nr),
						fieldId: fieldId(this, "Ja / Nein"),
						value: not 'Ja / Nein'
					}]
			}]
	})))
json
GIP_badge({
	uniqueId: "Checkbox" + Nr,
	embedded: true,
	direction: "horizontal",
	class: "",
	style: "background-color: inherit; color: inherit; border: none;",
	blocks: [{
			class: "",
			style: "",
			value: if 'Ja / Nein' = true then
				GIP_materialSymbols({
						embedded: true,
						style: "",
						scalingFactor: 0,
						weight: 0,
						filling: 1,
						color: "",
						secondColor: "#bcf0ad",
						icon: "check_box"
					})
			else
				GIP_materialSymbols({
						embedded: true,
						style: "",
						scalingFactor: 0,
						weight: 0,
						filling: 0,
						color: "",
						secondColor: "",
						icon: "check_box_outline_blank"
					})
			end
		}, {
			class: "",
			style: "",
			value: "Aufgabe erledigt?"
		}],
	actions: [{
			trigger: "click",
			scripts: [{
					type: "update",
					recordId: raw(Nr),
					fieldId: fieldId(this, "Ja / Nein"),
					value: not 'Ja / Nein'
				}]
		}]
})