-
Notifications
You must be signed in to change notification settings - Fork 5
Replace FxLayout v16
janweckwerth edited this page Oct 24, 2024
·
2 revisions
Die Bibliothek flex-layout von Angular ist deprecated und steht mit der Angular-Version 16 nicht mehr zur Verfügung.
(vgl. Angular Layout Migration Guides)
Die offizielle Migrationsempfehlungen lauten eigenes CSS verwenden oder auf das CSS-Framework Tailwind zu wechseln.
Auf dieser Seite haben wir die Direktiven von Flex-Layout gesammelt und mögliche Ergänzungsregeln beigefügt.
- Austauschmöglichkeiten für Angular/Flex-Layout
| bisherige fxLayout-Direktive | liefert diese CSS-Regel (i.A. beim Host-Element) | Bemerkung | passende Theme-Klassen |
|---|---|---|---|
| fxLayout="row" | display: flex; box-sizing: border-box; flex-direction: row; | flex-direction: row; ist der Default von display: flex; wird von angular/flex-layout aber immer zusätzlich gesetzt. Eigentlich nur notwendig, wenn die Ausrichtung zuvor auf column gesetzt wurde und sich ändern soll.box-sizing: border-box; wird von angular/flex-layout immer gesetzt; Nur notwendig, wenn das Element ein Padding und/oder eine Border besitzt.(vgl. https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) | lux-flex lux-flex-row (lux-border-box - testen, ob notwendig) |
| fxLayout="row-reverse" | display: flex; box-sizing: border-box; flex-direction: row-reverse; | lux-flex lux-flex-row-reverse (lux-border-box - testen, ob notwendig) | |
| fxLayout="column" | display: flex; box-sizing: border-box; flex-direction: column; | lux-flex lux-flex-col (lux-border-box - testen, ob notwendig) | |
| fxLayout="column-reverse" | display: flex; box-sizing: border-box; flex-direction: column-reverse; | lux-flex lux-flex-col-reverse (lux-border-box - testen, ob notwendig) | |
| fxLayout="row inline" | display: inline-flex; box-sizing: border-box ; flex-direction: row; | lux-inline-flex lux-flex-row (lux-border-box - testen, ob notwendig) | |
| fxLayout=”row wrap” | display: flex; box-sizing: border-box; flex-flow: row wrap; | lux-flex lux-flex-wrap lux-flex-row (lux-border-box - testen, ob notwendig) | |
| fxLayoutGap="10px" (bei fxLayout="row") | margin-right: 10px; bei allen Child-Elementen außer dem letzten | statt des Margins wird jetzt das css-Attribut gap verwendet! | lux-flex-gap-1 (row-gap und col-gap sind gleich) lux-flex-row-gap-1 (für individuelle row-gap) |
| fxLayoutGap="10px" (bei fxLayout="column") | margin-bottom: 10px; bei allen Child-Elementen außer dem letzten | lux-flex-gap-1 (row-gap und col-gap sind gleich) lux-flex-col-gap-1 (für individuelle col-gap) | |
| fxLayoutGap=”10px grid”(nur bei fxLayout=”row wrap”) | margin: 0 -10px -10px 0; (Host) und bei jedem Child wird das Padding als Inline-Style überschrieben! padding: 0 10px 10px 0; | Erfordert zusätzliches Div um jedes Child, damit das ursprüngliche Padding nicht überschrieben wird. | beachte hierfür die Doku für die neuen Grid-Klassen. |
| fxLayoutAlign="<main-axis> <cross-axis> “Beispiel: fxLayoutAlign="start stretch" | place-content: <cross-axis> <main-axis>; align-items: <cross-axis> place-content: stretch start; align-items: stretch; | Werte für Cross-Axis: start, center, end, stretchWerte für Main-Axis: start, center, end, space-araound, space-between, space-evenly, stretchAchtung: Die Werte in der Direktive werden im css genau umgekehrt gesetzt.Im css sind weitere Werte für place-content erlaubt.start wird im css mit flex-start gesetztend wird im css mit flex-end gesetztWird fxLayoutAlign ergänzt fxLayout="row" falls dieses nicht explizit angeben wird | sind die Werte für die Cross-Axis und Main-Axis gleich: (hier wurde das Vorgehen von Tailwind übernommern, die Klassennamen wurden lediglich durch den Prefix "lux" ergänzt)z.B.lux-place-content-center lux-items-center bei unterschiedlichen Werten empfehlen wir die entsprechenden Regeln im CSS manuell zu ergänzen. .my-class { place-content: stretch start; align-items: stretch; } |
| fxFlexAlign =”start | center | end | baseline” | align-self: start | center | end | baseline | lux-align-self-start | center | end | stretch | auto | baseline | |
| fxFlexOrder="5" (oder eine andere int) | order: 5; | Die Elemente werden nach aufsteigender Order sortiert. Danach nach der Reihenfolge im code. Werte können auch negativ sein. (Geht für flexbox und grid) | lux-flex-order-1 (Werte von 1-10 zulässig) |
| fxFlexOffset="50px" (auch %, px, vw, vh) | margin-left: 50px;(row) margin-top: 50px; (column) | kein entsprechender Ersatz | |
| fxHidefxHide=“true“ | display: none; | lux-display-none(für Härtefälle lux-display-none-important) | |
| fxShow="false" | display: none; | bei fxShow="true" wird die Regel display: none entfernt | lux-display-none (bei show=false) |
| fxFillfxFlexFill | height: 100%; min-height: 100%; min-width: 100%; width: 100%; | diese Regeln müssen im css manuell gesetzt werden. | |
| fxFlex | flex: 1 1 0%; box-sizing: border-box; | lux-flex lux-flex-1 | |
| fxFlex="30" fxFlex="30%" (Wert ohne Einheit oder %) | flex: 1 1 100%; max-width: 30%; box-sizing: border-box; | gilt allgemein, oder wenn der Parent eine row ist. Ist der Parent eine column wird die max-height gesetzt | direkt im CSS ergänzen oder: lux-flex lux-flex-grow-1 lux-flex-shrink-1 lux-flex-basis-3/10*(lux-border-box s.o.)*Für max-width/height gibt es keine Klasse im Theme |
| fxFlex="100px" ="1 1 100px" ="0 0 100px" | flex: 1 1 100px; max-width: 100px; min-width: 100px; box-sizing: border-box; | Die Direktive legt zusätzlich Min- und Max-Width auf den angegeben Wert fest. Das ist konträr zum Prinzip von display: flex. Daher ist zu prüfen, ob diese "Festsetzung" wirklich nötig ist. | Statt pixel werden mit lux-flex-basis-{int} Werte in der Einheit Rem definiert. (vgl. Lux-Layout-Klassen - Design-System für Weboberflächen - Confluence IHK-GfI mbH)lux-flex lux-flex-grow-1 lux-flex-shrink-1 lux-flex-basis-24 |
| fxFlex="auto" | flex: 1 1 auto; | lux-flex-auto | |
| fxFlex="none" | flex: 0 0 auto; | "flex: none;" ist äquivalent zu "flex: 0 0 auto;" | lux-flex-none |
| fxFlex="grow" | flex: 1 1 auto; | lux-flex-auto | |
| fxFlex="nogrow" | flex: 0 1 auto; | lux-flex-initial | |
| fxFlex="noshrink" | flex: 1 0 auto; | lux-flex-grow-1 lux-flex-shrink-0 lux-flex-basis-autooder im CSS ergänzen |
Zusätzlich führen einige flex-layout-Befehle ein "Reset" für min/max-width aus.
Manche Befehle ergänzen Styles beim Parent oder Child.
Angular/Flex-Layout setzt alle Styles als inline-Styles um, diese haben dadurch eine sehr hohe Spezifität und konnten evtl. vorhandene Styles überschreiben. Mit den neuen Klassen oder eigenen Styles kann sich die Spezifität ändern und muss evtl. angepasst werden, falls vorhandene Styles überschrieben werden sollen.
| Breakpoint | Media-Query |
|---|---|
| xs | 'screen and (max-width: 599px)' |
| sm | 'screen and (min-width: 600px) and (max-width: 959px)' |
| md | 'screen and (min-width: 960px) and (max-width: 1279px)' |
| lg | 'screen and (min-width: 1280px) and (max-width: 1919px)' |
| xl | 'screen and (min-width: 1920px) and (max-width: 5000px)' |
| lt-sm | 'screen and (max-width: 599px)' |
| lt-md | 'screen and (max-width: 959px)' |
| lt-lg | 'screen and (max-width: 1279px)' |
| lt-xl | 'screen and (max-width: 1919px)' |
| gt-xs | 'screen and (min-width: 600px)' |
| gt-sm | 'screen and (min-width: 960px)' |
| gt-md | 'screen and (min-width: 1280px)' |
| gt-lg | 'screen and (min-width: 1920px)' |
(vgl. luxMediaQueryObserverService)
Damit lassen sich "Booleans" erzeugen, mit denen man über ngClass entsprechend die Klassen für Responsives Design steuern kann
HTML
[ngClass.sm]="my-small-class" -> [ngClass]="{ 'my-small-class': isSM }"TS
@Component({
selector: 'app-beispiel',
...
})
export class BeispielComponent implements OnInit, OnDestroy {
subscription: Subscription;
constructor(private mediaObserver: LuxMediaQueryObserverService) {
this.mediaSubscription = this.mediaObserver.getMediaQueryChangedAsObservable().subscribe(() => {
if(this.mediaObserver.isSM()) {
console.log('Media-Query SM aktiviert...');
}
});
}
ngOnInit() {}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}Es werden mit dem Theme Mixins bereitgestellt, die die Media Queries erzeugen. Diese können in das Projekt importiert und genutzt werden.
HTML
<... class="my-class">scss
@import '@ihk-gfi/lux-components-theme/src/base/luxbreakpoints';
.my-class {
background-color: var(--lux-theme-primary-color);
}
@include lt-md() {
.my-class {
background-color: var(--lux-theme-accent-color);
}
}Die neuen Layout-Klasse gelten im default für alle Screensizes.
Sollen spezielle Eigenschaften nur für bestimmte Screens gelten, können diese durch die gewünschte Screensize wie folgt ergänzt werden:
<div class="lux-flex lux-flex-row lt-md:lux-flex-col">-
Versionen