CSS Helferklassen
Hier finden Sie eine Liste der Helferklassen in Intrexx 12, von denen Sie einige direkt auf dem Ansichtstab in den Eigenschaften von Elementen als Vordefinierte Styleklasse auswählen können.
Helferklassen, die Sie nicht direkt auswählen können, können Sie dort einfach direkt im Feld Styleklasse auf dem Ansichtstab eintragen.
| Kategorie | CSS-Klasse | CSS-Regel | Gültigkeit | Beschreibung | Einsatz | Auswahl Ansichtstab |
|---|---|---|---|---|---|---|
| Responsive Breite | ix-m300 | width: 300px; | Medium | Setzt die Breite des Elements in der Medium-Ansicht auf 300px. | Dialoge, Formulare, Container | Nein |
| Responsive Breite | ix-m500 | width: 500px; | Medium | Setzt die Breite des Elements in der Medium-Ansicht auf 500px. | Formulare, Panels | Nein |
| Responsive Breite | ix-m700 | width: 700px; | Medium | Setzt die Breite des Elements in der Medium-Ansicht auf 700px. | Größere Dialoge | Nein |
| Responsive Breite | ix-m300l500 | Medium: width: 300px;Large: width: 500px; | Medium, Large | Setzt die Breite des Elements in der Medium-Ansicht auf 300px und in der Large-Ansicht auf 500px. | Responsive Dialoge | Nein |
| Responsive Breite | ix-m500l700 | Medium: width: 500px;Large: width: 700px; | Medium, Large | Setzt die Breite des Elements in der Medium-Ansicht auf 500px und in der Large-Ansicht auf 700px. | Responsive Formulare | Nein |
| Responsive Breite | ix-m700l900 | Medium: width: 700px;Large: width: 900px; | Medium, Large | Setzt die Breite des Elements in der Medium-Ansicht auf 700px und in der Large-Ansicht auf 900px. | Breite Dialoge | Nein |
| Responsive Breite | ix-m900l1100 | Medium: width: 900px;Large: width: 1100px; | Medium, Large | Setzt die Breite des Elements in der Medium-Ansicht auf 900px und in der Large-Ansicht auf 1100px. | Große Arbeitsbereiche | Nein |
| Padding | ix-padding-small | padding: 5px; | Small, Medium, Large | Fügt einen Innenabstand von 5px auf allen Seiten des Elements hinzu. | Kleine Container | Nein |
| Padding | ix-padding-medium | padding: 10px; | Small, Medium, Large | Fügt einen Innenabstand von 10px auf allen Seiten des Elements hinzu. | Panels, Gruppen | Nein |
| Padding | ix-padding-large | padding: 20px; | Small, Medium, Large | Fügt einen Innenabstand von 20px auf allen Seiten des Elements hinzu. | Cards, Container, Dialoge | Nein |
| Margin | ix-margin-medium-top | margin-top: 10px; | Small, Medium, Large | Fügt oberhalb des Elements einen Außenabstand von 10px hinzu. | Abstand zwischen Formularbereichen | Nein |
| Margin | ix-margin-medium-right | margin-right: 10px; | Small, Medium, Large | Fügt rechts des Elements einen Außenabstand von 10px hinzu. | Abstand zwischen Elementen | Nein |
| Margin | ix-margin-medium-bottom | margin-bottom: 10px; | Small, Medium, Large | Fügt unterhalb des Elements einen Außenabstand von 10px hinzu. | Vertikale Abstände | Nein |
| Margin | ix-margin-medium-left | margin-left: 10px; | Small, Medium, Large | Fügt links des Elements einen Außenabstand von 10px hinzu. | Abstand zwischen Elementen | Nein |
| Margin | ix-margin-top | margin-top: 5px; | Small, Medium, Large | Fügt oberhalb des Elements einen Außenabstand von 5px hinzu. | Abstand zwischen Elementen oder Formularfeldern. | Ja |
| Margin | ix-margin-right | margin-right: 5px; | Small, Medium, Large | Fügt rechts des Elements einen Außenabstand von 5px hinzu. | Horizontaler Abstand zwischen nebeneinanderliegenden Elementen. | Ja |
| Margin | ix-margin-bottom | margin-bottom: 5px; | Small, Medium, Large | Fügt unterhalb des Elements einen Außenabstand von 5px hinzu. | Vertikaler Abstand zwischen Elementen oder Formularfeldern. | Ja |
| Margin | ix-margin-left | margin-left: 5px; | Small, Medium, Large | Fügt links des Elements einen Außenabstand von 5px hinzu. | Horizontaler Abstand zwischen nebeneinanderliegenden Elementen. | Ja |
| Margin | ix-margin-large-top | margin-top: 20px; | Small, Medium, Large | Fügt oberhalb des Elements einen Außenabstand von 20px hinzu. | Größerer Abstand zwischen Inhaltsbereichen oder Formularabschnitten. | Ja |
| Margin | ix-margin-large-right | margin-right: 20px; | Small, Medium, Large | Fügt rechts des Elements einen Außenabstand von 20px hinzu. | Größerer horizontaler Abstand zwischen Elementen. | Ja |
| Margin | ix-margin-large-bottom | margin-bottom: 20px; | Small, Medium, Large | Fügt unterhalb des Elements einen Außenabstand von 20px hinzu. | Größerer vertikaler Abstand zwischen Inhaltsbereichen oder Formularabschnitten. | Ja |
| Margin | ix-margin-large-left | margin-left: 20px; | Small, Medium, Large | Fügt links des Elements einen Außenabstand von 20px hinzu. | Größerer horizontaler Abstand zwischen Elementen. | Ja |
| Layout Utility | ix-float-left | float: left; | Small, Medium, Large | Richtet das Element links aus und lässt nachfolgende Inhalte rechts davon fließen. | Linksbündige Anordnung von Bildern, Symbolen oder Containern. | Ja |
| Layout Utility | ix-float-right | float: right; | Small, Medium, Large | Richtet das Element rechts aus und lässt nachfolgende Inhalte links davon fließen. | Rechtsbündige Anordnung von Bildern, Symbolen oder Containern. | Ja |
| Layout Utility | clearfix | clear: both; (über ::after) | Small, Medium, Large | Sorgt dafür, dass ein Container schwebende (float) Elemente korrekt umschließt und seine Höhe beibehält. | Container mit gefloateten Elementen, um Layoutprobleme zu vermeiden. | Ja |
| Layout Utility | ix-inline-block | display: inline-block; | Small, Medium, Large | Stellt das Element als Inline-Block dar. Das Element bleibt im Textfluss und kann gleichzeitig Breite und Höhe besitzen. | Anordnung mehrerer Elemente nebeneinander mit definierter Größe. | Ja |
| Layout Utility | ix-block | display: block; | Small, Medium, Large | Stellt das Element als Blockelement dar und beginnt in einer neuen Zeile. | Darstellung eines Elements über die gesamte verfügbare Breite. | Ja |
| Breite | ix-max-width | width: 100%; text-overflow: ellipsis; | Small, Medium, Large | Setzt die Breite des Elements auf 100% und kürzt überlaufenden Text mit Auslassungspunkten (...), sofern die erforderlichen CSS-Eigenschaften für Textüberlauf vorhanden sind. | Responsive Container oder Elemente mit begrenztem Platz für Text. | Ja |
| Rahmen | ix-border-radius-full | border-radius: 100% !important; | Small, Medium, Large | Setzt den Eckenradius des Elements auf 100% und erzeugt dadurch eine vollständig runde Darstellung. | Runde Darstellung von Buttons oder kreisförmigen Elementen. | Nein |
| Rahmen | ix-border-radius-large | border-radius: 8px; | Small, Medium, Large | Setzt den Eckenradius des Elements auf 8px. | Abgerundete Darstellung von größeren Containern, Karten oder Eingabebereichen. | Nein |
| Rahmen | ix-border-radius-medium | border-radius: 6px; | Small, Medium, Large | Setzt den Eckenradius des Elements auf 6px. | Abgerundete Darstellung von Standard-Containern, Buttons oder Formularfeldern. | Nein |
| Rahmen | ix-border-radius-small | border-radius: 4px; | Small, Medium, Large | Setzt den Eckenradius des Elements auf 4px. | Leichte Abrundung von kleineren Elementen oder Bedienelementen. | Nein |
| Grid (Responsive Layout) | ix-l2 | Large: 2 Spalten (width: 49.5%) | Large | Stellt Tabelleneinträge in der Large-Ansicht zweispaltig dar. | Aufteilung von Listen, Tabellenansichten oder Kacheln in zwei gleich große Spalten auf großen Bildschirmen. | Nein |
| Grid (Responsive Layout) | ix-m2l2 | Medium: 2 Spalten (width: 49.5%); Large: 2 Spalten (width: 49.5%) | Medium, Large | Stellt Tabelleneinträge in der Medium- und Large-Ansicht zweispaltig dar. | Responsive zweispaltige Darstellung von Datensätzen, Formularbereichen oder Kacheln. | Nein |
| Grid (Responsive Layout) | ix-m2l3 | Medium: 2 Spalten (width: 49.5%); Large: 3 Spalten (width: 32.66%) | Medium, Large | Stellt Tabelleneinträge in der Medium-Ansicht zweispaltig und in der Large-Ansicht dreispaltig dar. | Responsive Anordnung von Listen oder Kacheln mit mehr Platz auf großen Bildschirmen. | Nein |
| Grid (Responsive Layout) | ix-m2l4 | Medium: 2 Spalten (width: 49.5%); Large: 4 Spalten (width: 24.25%) | Medium, Large | Stellt Tabelleneinträge in der Medium-Ansicht zweispaltig und in der Large-Ansicht vierspaltig dar. | Darstellung von mehreren kompakten Elementen wie Kacheln, Karten oder Übersichten. | Nein |
| Grid (Responsive Layout) | ix-m3l5 | Medium: 3 Spalten (width: 32.66%); Large: 5 Spalten (width: 19.2%) | Medium, Large | Stellt Tabelleneinträge in der Medium-Ansicht dreispaltig und in der Large-Ansicht fünftspaltig dar. | Kompakte Übersichten mit mehreren Elementen pro Zeile. | Nein |
| Grid (Responsive Layout) | ix-s2m4l6 | Small: 2 Spalten (width: 49.5%); Medium: 4 Spalten (width: 24.25%); Large: 6 Spalten (width: 15.8333%) | Small, Medium, Large | Stellt Tabelleneinträge abhängig von der View-Größe mit unterschiedlicher Spaltenanzahl dar: 2 Spalten auf Small, 4 Spalten auf Medium und 6 Spalten auf Large. | Responsive Kachelansichten oder Übersichten, die sich automatisch an die Bildschirmgröße anpassen. | Nein |
| Grid (Responsive Layout) | ix-s2m5l7 | Small: 2 Spalten (width: 49.5%); Medium: 5 Spalten (width: 19.2%); Large: 7 Spalten (width: 13.4285%) | Small, Medium, Large | Stellt Tabelleneinträge abhängig von der View-Größe mit unterschiedlicher Spaltenanzahl dar: 2 Spalten auf Small, 5 Spalten auf Medium und 7 Spalten auf Large. | Responsive Darstellung vieler kompakter Elemente wie Kacheln, Karten oder Datensätze. | Nein |