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: "",
})
))
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.

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).