ICFN Church Management Flex

Grundlegender Seitenaufbau

Jede Seite in diesem Projekt folgt einer konsistenten Struktur mit drei Hauptbereichen: Header (Navbar), Layout-Komponente für den Hauptinhalt, und Footer.

Header / Navbar

<app-navbar-component>

Layout Component

<app-two-column-layout>

Header Slot (optional)

Hier kommt app-page-header

Main Content Slot

Formulare, Inhalte

Sidebar Slot

Hilfe, Infos

Footer Slot (optional)

Buttons, Actions

Footer

<app-footer>

Komponenten-basierter Ansatz

Verwenden Sie Angular Layout-Komponenten wie TwoColumnLayoutComponent statt Custom CSS-Klassen. Dies folgt Tailwind Best Practices und bietet eine type-safe, konfigurierbare API.

<!-- Grundstruktur jeder Seite -->
<app-navbar-component></app-navbar-component>

<app-two-column-layout 
  [maxWidth]="'1800px'"
  [sidebarWidth]="'350px'"
  [stickySidebar]="true"
>
  <!-- Header Slot -->
  <div header>
    <app-page-header 
      title="Seitentitel"
      subtitle="Optional: Untertitel"
    ></app-page-header>
  </div>

  <!-- Main Content Slot -->
  <div main>
    <!-- Ihr Hauptinhalt -->
  </div>

  <!-- Sidebar Slot -->
  <div sidebar>
    <!-- Sidebar-Inhalt -->
  </div>

  <!-- Footer Slot (optional) -->
  <div footer>
    <!-- Footer-Buttons, Actions -->
  </div>
</app-two-column-layout>

<app-footer></app-footer>

🎯 Empfohlen: Layout-Komponenten

Für ein sauberes, wartbares und Tailwind-konformes Layout empfehlen wir die Verwendung von Angular Layout-Komponenten statt Custom CSS-Klassen. Diese kapseln die Tailwind-Utilities und bieten eine type-safe, konfigurierbare API.

Best Practice

Die expense-reimbursement Seite nutzt bereits die neue TwoColumnLayoutComponent. Dies ist der empfohlene Ansatz für neue Seiten.

TwoColumnLayoutComponent

<app-two-column-layout 
  [maxWidth]="'1800px'"
  [sidebarWidth]="'350px'"
  [stickySidebar]="true"
  [gap]="'lg'"
>
  <!-- Header Slot (optional) -->
  <div header>
    <app-page-header 
      title="Seitentitel"
      subtitle="Untertitel"
    ></app-page-header>
  </div>

  <!-- Main Content Slot -->
  <div main>
    <!-- Hauptinhalt: Formulare, Artikel, etc. -->
  </div>

  <!-- Sidebar Slot -->
  <div sidebar>
    <!-- Sidebar: Hilfe, Navigation, Infos -->
  </div>

  <!-- Footer Slot (optional) -->
  <div footer>
    <!-- Footer-Buttons, Actions, etc. -->
  </div>
</app-two-column-layout>

Konfigurierbare Properties

Property	Typ	Default	Beschreibung
`maxWidth`	string	'1800px'	Maximale Breite des gesamten Layouts
`sidebarWidth`	string	'350px'	Feste Breite der Sidebar
`gap`	'sm' \| 'md' \| 'lg' \| 'xl'	'lg'	Abstand zwischen den Spalten
`stickySidebar`	boolean	false	Sidebar bleibt beim Scrollen oben fixiert
`stickyTop`	string	'1rem'	Top-Offset für sticky Sidebar
`sidebarPosition`	'left' \| 'right'	'right'	Position der Sidebar
`showHeader`	boolean	true	Header-Slot anzeigen
`showFooter`	boolean	true	Footer-Slot anzeigen
`responsiveBreakpoint`	'sm' \| 'md' \| 'lg' \| 'xl'	'lg'	Breakpoint, ab dem Spalten gestapelt werden
`backgroundColor`	string	'#f5f5f5'	Hintergrundfarbe für das gesamte Layout

Vorteile

✅ Tailwind Best Practice

Utilities bleiben in der Komponente, nicht im globalen CSS. Folgt dem "Utility-First" Ansatz.

✅ Type-Safe

TypeScript prüft Properties zur Compile-Zeit. IDE Auto-Complete für alle Optionen.

✅ Konfigurierbar

Anpassbar über @Input() Properties ohne CSS zu ändern. Verschiedene Layouts mit einer Komponente.

✅ Self-Documenting

Code ist selbsterklärend. JSDoc-Kommentare zeigen Verwendung direkt in der IDE.

Import in Ihrer Komponente

import { TwoColumnLayoutComponent } from '@app/shared/layouts/two-column-layout/two-column-layout.component';

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [TwoColumnLayoutComponent],
  templateUrl: './my-page.component.html'
})
export class MyPageComponent { }

ThreeColumnLayoutComponent

Alternative für komplexe Anwendungen mit linker Navigation, wachsendem Hauptbereich und rechter Sidebar. Ideal für Dashboard-Seiten oder wenn sowohl Navigation als auch Zusatzinformationen gleichzeitig sichtbar sein sollen.

Alternative Layout-Option

Verwenden Sie das 3-Spalten-Layout für komplexere Anwendungen mit Navigation, Hauptinhalt und Zusatzinformationen.

Verwendung

<app-three-column-layout 
  [maxWidth]="'1800px'"
  [leftSidebarWidth]="'250px'"
  [rightSidebarWidth]="'350px'"
  [gap]="'lg'"
>
  <!-- Header Slot (optional) -->
  <div header>
    <app-page-header 
      title="Seitentitel"
      subtitle="Untertitel"
    ></app-page-header>
  </div>

  <!-- Left Sidebar Slot -->
  <div left>
    <!-- Navigation, Filter, Menüs -->
  </div>

  <!-- Main Content Slot -->
  <div main>
    <!-- Hauptinhalt: Artikel, Listen, etc. -->
  </div>

  <!-- Right Sidebar Slot -->
  <div right>
    <!-- Sidebar: Details, Hilfe, Infos -->
  </div>

  <!-- Footer Slot (optional) -->
  <div footer>
    <!-- Footer-Buttons, Actions -->
  </div>
</app-three-column-layout>

Konfigurierbare Properties

Property	Typ	Default	Beschreibung
`maxWidth`	string	'1800px'	Maximale Breite des gesamten Layouts
`leftSidebarWidth`	string	'250px'	Feste Breite der linken Sidebar
`rightSidebarWidth`	string	'350px'	Feste Breite der rechten Sidebar
`gap`	'sm' \| 'md' \| 'lg' \| 'xl'	'lg'	Abstand zwischen den Spalten
`stickyLeftSidebar`	boolean	false	Linke Sidebar bleibt beim Scrollen oben fixiert
`stickyRightSidebar`	boolean	false	Rechte Sidebar bleibt beim Scrollen oben fixiert
`stickyTop`	string	'1rem'	Top-Offset für sticky Sidebars
`showHeader`	boolean	true	Header-Slot anzeigen
`showFooter`	boolean	true	Footer-Slot anzeigen
`responsiveBreakpoint`	'sm' \| 'md' \| 'lg' \| 'xl'	'lg'	Breakpoint, ab dem Spalten gestapelt werden
`backgroundColor`	string	'#f5f5f5'	Hintergrundfarbe für das gesamte Layout

Import in Ihrer Komponente

import { ThreeColumnLayoutComponent } from '@app/shared/layouts/three-column-layout/three-column-layout.component';

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [ThreeColumnLayoutComponent],
  templateUrl: './my-page.component.html'
})
export class MyPageComponent { }

SingleColumnLayoutComponent

Einfaches, einspaltiges Layout für Content-Seiten ohne Sidebar. Perfekt für Homepage, Dokumentationsseiten, Landing Pages und Übersichtsseiten.

Einspaltige Content-Seiten

Ideal für Seiten, die keinen festen Seitenbereich benötigen. Zentrierter Content mit konfigurierbarer maximaler Breite.

Verwendung

<app-single-column-layout 
  [maxWidth]="'1400px'"
  [backgroundColor]="'#f5f5f5'"
  [spacing]="'md'"
>
  <!-- Header Slot (optional) -->
  <div header>
    <app-page-header 
      title="Seitentitel"
      subtitle="Untertitel"
    ></app-page-header>
  </div>

  <!-- Main Content Slot -->
  <div main>
    <!-- Hauptinhalt: Text, Karten, Grids, etc. -->
  </div>

  <!-- Footer Slot (optional) -->
  <div footer>
    <!-- Footer-Content -->
  </div>
</app-single-column-layout>

Konfigurierbare Properties

Property	Typ	Default	Beschreibung
`maxWidth`	string	'1400px'	Maximale Breite des Contents
`backgroundColor`	string	'#f5f5f5'	Hintergrundfarbe für das Layout
`spacing`	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Vertikales Padding für Sections
`padding`	boolean	true	Horizontales Padding hinzufügen
`marginBottom`	boolean	true	Unteren Margin hinzufügen
`showHeader`	boolean	true	Header-Slot anzeigen
`showFooter`	boolean	true	Footer-Slot anzeigen

Anwendungsfälle

📄 Homepage

Übersichtsseite mit Karten-Grid für Komponenten oder Features.

📚 Dokumentation

Lange Textinhalte, Code-Beispiele, Tabellen ohne Sidebar.

🎯 Landing Pages

Marketing-Seiten, Call-to-Action Bereiche, Hero Sections.

📋 Übersichtsseiten

Listen, Tabellen, Dashboards ohne zusätzliche Navigation.

Import in Ihrer Komponente

import { SingleColumnLayoutComponent } from '@app/shared/layouts/single-column-layout/single-column-layout.component';

@Component({
  selector: 'app-my-page',
  standalone: true,
  imports: [SingleColumnLayoutComponent],
  templateUrl: './my-page.component.html'
})
export class MyPageComponent { }

UI Library

Flex Layout

Grundlegender Seitenaufbau

Komponenten-basierter Ansatz

🎯 Empfohlen: Layout-Komponenten

Best Practice

TwoColumnLayoutComponent

Konfigurierbare Properties

Vorteile

✅ Tailwind Best Practice

✅ Type-Safe

✅ Konfigurierbar

✅ Self-Documenting

Import in Ihrer Komponente

ThreeColumnLayoutComponent

Alternative Layout-Option

Verwendung

Konfigurierbare Properties

Import in Ihrer Komponente

SingleColumnLayoutComponent

Einspaltige Content-Seiten

Verwendung

Konfigurierbare Properties

Anwendungsfälle

📄 Homepage

📚 Dokumentation

🎯 Landing Pages

📋 Übersichtsseiten

Import in Ihrer Komponente