Styling

Jeder Block in Templatical trägt eine Eigenschaft styles für Layout und Erscheinungsbild sowie visibility für viewport-spezifische Kontrolle.

BlockStyles

Die Schnittstelle BlockStyles steuert Padding und Hintergrund.

interface BlockStyles {
  padding: SpacingValue;
  backgroundColor?: string;
}

import { createParagraphBlock } from '@templatical/types';

const block = createParagraphBlock({
  content: '<p>Styled text</p>',
});

block.styles = {
  padding: { top: 16, right: 24, bottom: 16, left: 24 },
  backgroundColor: '#f0f9ff',
};

SpacingValue

Padding verwendet den Typ SpacingValue mit vier Richtungswerten in Pixeln.

interface SpacingValue {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

Alle vier Eigenschaften sind erforderlich. Verwenden Sie 0 für Seiten, die keinen Abstand benötigen:

block.styles = {
  padding: { top: 0, right: 16, bottom: 0, left: 16 },
};

Block-Sichtbarkeit

Die Eigenschaft visibility auf jedem Block steuert, ob er bei jedem Breakpoint gerendert wird.

interface BlockVisibility {
  desktop: boolean;
  mobile: boolean;
}

Beide sind standardmäßig true. Setzen Sie einen Breakpoint auf false, um den Block bei dieser Größe auszublenden:

// Nur auf dem Desktop anzeigen
block.visibility = {
  desktop: true,
  mobile: false,
};

Dies ist nützlich, um unterschiedliche Inhalte bei unterschiedlichen Bildschirmgrößen anzuzeigen -- zum Beispiel eine detaillierte Tabelle auf dem Desktop und eine vereinfachte Liste auf dem Mobilgerät.

Einstellungen auf Template-Ebene

Neben einzelnen Blockstilen hat das Template selbst globale Einstellungen, die das Gesamtlayout beeinflussen.

Einstellung	Typ	Beschreibung
width	number	Template-Inhaltsbreite in px (typischerweise 600)
backgroundColor	string	Äußere Hintergrundfarbe hinter dem Template
fontFamily	string	Standard-Schriftfamilie für alle Blöcke

Diese werden über die init()-Konfiguration des Editors oder durch direkte Änderung des Template-JSON konfiguriert:

import { init } from '@templatical/editor';

const editor = await init({
  container: '#editor',
  content: {
    settings: {
      width: 640,
      backgroundColor: '#f8fafc',
      fontFamily: 'Inter, system-ui, sans-serif',
    },
    blocks: [],
  },
});

Einzelne Blöcke können die fontFamily auf Template-Ebene überschreiben, indem sie ihre eigene fontFamily-Eigenschaft setzen. Wenn ein Block keine Schriftfamilie angibt, erbt er von den Template-Einstellungen.