Text, der eine Spalte hinunterläuft und in der nächsten weitergeht, dann auf der nächsten Seite. SplitView ist die fertige Zeitung. Flow und Region bauen jedes andere Layout: einen Titelbereich, eine Seitenleiste, Spalten unterschiedlicher Breite.

Alles darin bricht so um wie auf einer Seite. Ein Absatz teilt sich an seinen Zeilen, eine Tabelle wiederholt ihren Header, keepTogether hält, orphans und widows zählen.

Experimentell: Die Form dieser Komponenten kann sich vor 1.0 noch ändern.

Zeitungsspalten

import { Document, Page, Text, SplitView } from "@jasy/pdf";

Document([
  Page({ size: "A4", margin: 56, gap: 12 }, [
    Text("The Valley Courier", { size: 28, bold: true, color: "#1450aa" }),
    SplitView({ columns: 3, colGap: 16, rowGap: 8 }, paragraphs),
    Text("This line follows the columns, right where they end.", { italic: true }),
  ]),
]);

Der Inhalt füllt die erste Spalte, dann die nächste, dann die nächste Seite. Auf seiner letzten Seite gleichen sich die Spalten aus: Sie werden ungefähr gleich hoch, wie bei CSS-Spalten, und was danach kommt, sitzt direkt darunter.

Option	Standard	Was es tut
`columns`	`2`	wie viele Spalten, nebeneinander und gleich breit
`gap`	`0`	Abstand zwischen den Spalten und zwischen den Elementen des Inhalts
`colGap`	`gap`	Abstand zwischen den Spalten
`rowGap`	`gap`	Abstand zwischen den Elementen des Inhalts
`balance`	`true`	gleich hohe Spalten auf der letzten Seite; `false` füllt eine Spalte, dann die nächste

Umbruch in die nächste Spalte

ColumnBreak() beginnt die nächste Spalte. Aus der letzten Spalte heraus beginnt es die erste auf der nächsten Seite.

SplitView({ columns: 2, gap: 16 }, [
  Text("Summary", { bold: true }),
  Text(summary),
  ColumnBreak(),
  Text("Details", { bold: true }),
  Text(details),
]);

Ein ColumnBreak außerhalb einer Spalte (in einer Row, einer Tabellenzeile oder ganz ohne Spalte) tut nichts und meldet das einmal als column-break-ignored. Für eine neue Seite nehmen Sie PageBreak.

Ein eigenes Layout

Flow nimmt ein template: eine Funktion, die eine Seite des Layouts baut. Setzen Sie eine Region überall dorthin, wo der Inhalt hin soll. Der Inhalt füllt die Regions in der Reihenfolge, in der sie vorkommen, und geht dann auf der nächsten Seite mit einem frisch gebauten Template weiter.

import { Document, Page, Column, Row, Box, Text, Expanded, Flow, Region } from "@jasy/pdf";

Document([
  Page({ size: "A4", margin: 56 }, [
    Flow(
      {
        gap: 8,
        template: ({ index }) =>
          Column({ gap: 12 }, [
            index === 0
              ? Text("Annual Report", { size: 22, bold: true, color: "#1450aa" })
              : Text("Annual Report, continued", { size: 9, italic: true, color: "gray" }),
            Row({ gap: 16 }, [
              Expanded(Region()),
              Box({ bg: "#f3f5f9", padding: 8 }, [Region({ width: 150 })]),
            ]),
          ]),
      },
      report,
    ),
  ]),
]);

Das Template bekommt { index, pageNumber }: index zählt die Seiten dieses Flow ab 0, die erste Seite kann also den Titel tragen und die anderen einen Running Head. Ein ColumnBreak im Inhalt springt in die Seitenleiste.

Eine Region bekommt ihre Größe vom Layout um sie herum, wie jedes Element: Expanded, eine width oder height in Punkt oder %, min und max. Ohne Angabe füllt sie, was ihr angeboten wird.

Option von `Flow`	Standard	Was es tut
`template`	-	`({ index, pageNumber }) => element`, für jede Seite gebaut
`gap`	`0`	Abstand zwischen den Elementen des Inhalts
`balance`	`false`	auf der letzten Seite den Inhalt so verteilen, dass die Regions etwa gleich enden

Eine SplitView ist genau das: ein Flow, dessen Template eine Row aus Expanded(Region()) ist.

Woher ein Flow seine Höhe bekommt

Ein Flow hat keine eigene Höhe. Er nimmt den Rest der Seite oder die Höhe der Box, in der er steht. Auf seiner letzten Seite schrumpft er auf das, was der Inhalt gebraucht hat, und was danach kommt, sitzt direkt darunter.

In einer Box mit fester Höhe kann der Flow nicht auf der nächsten Seite weitergehen. Was nicht passt, wird abgeschnitten und von onOverflow behandelt, wie jeder andere zu hohe Block.

Was jasy ablehnt

Ein Fehler in einem solchen Layout würde sonst wortlos Inhalt verlieren. Jeder wirft einen benannten Fehler, der sagt, was zu ändern ist:

Fehler	Wann
`FlowWithoutRegionError`	das Template enthält keine `Region`, der Inhalt hat also keinen Platz
`RegionOutsideFlowError`	eine `Region` im Inhalt oder irgendwo außerhalb eines Templates
`RegionReusedError`	eine `Region` auf zwei Seiten - bauen Sie die Regions in der Template-Funktion
`FlowUnboundedError`	der Flow hat keine Höhe, die er nehmen kann, etwa in einer `Row` ohne Höhe
`FlowRegionsEmptyError`	jede `Region` endet 0 breit oder 0 hoch
`RegionInPageBuilderError`	eine `Region` in einem `PageBuilder`, der für jede Seite neu baut

In Vue ist das Template der Slot #page - siehe Komponenten. In React ist es die Render-Prop page - siehe Komponenten.