From cc32a7b2d381bb6c0d44b27436c653d977f05f8c Mon Sep 17 00:00:00 2001 From: Dolan Date: Sun, 14 Mar 2021 18:12:52 +0000 Subject: [PATCH] Add text frame documentation --- demo/{60-text-frame.ts => 61-text-frame.ts} | 0 docs/_coverpage.md | 2 +- docs/_sidebar.md | 1 + docs/usage/bullet-points.md | 1 + docs/usage/paragraph.md | 23 +++++-- docs/usage/text-frames.md | 69 +++++++++++++++++++++ 6 files changed, 90 insertions(+), 6 deletions(-) rename demo/{60-text-frame.ts => 61-text-frame.ts} (100%) create mode 100644 docs/usage/text-frames.md diff --git a/demo/60-text-frame.ts b/demo/61-text-frame.ts similarity index 100% rename from demo/60-text-frame.ts rename to demo/61-text-frame.ts diff --git a/docs/_coverpage.md b/docs/_coverpage.md index a2db37dc5f..330479a04f 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -3,7 +3,7 @@ > Easily generate .docx files with JS/TS. Works for Node and on the Browser. :100: - Simple, declarative API -- 50+ usage examples +- 60+ usage examples - Battle tested, mature, 98%+ coverage [GitHub](https://github.com/dolanmiu/docx) diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 2538e975c7..7fa4e9f745 100644 --- a/docs/_sidebar.md +++ b/docs/_sidebar.md @@ -22,6 +22,7 @@ * [Page Numbers](usage/page-numbers.md) * [Change Tracking](usage/change-tracking.md) * [Math](usage/math.md) + * [Text Frames](usage/text-frames.md) * Styling * [Styling with JS](usage/styling-with-js.md) * [Styling with XML](usage/styling-with-xml.md) diff --git a/docs/usage/bullet-points.md b/docs/usage/bullet-points.md index 159241b3b0..cf2c5bda54 100644 --- a/docs/usage/bullet-points.md +++ b/docs/usage/bullet-points.md @@ -1,5 +1,6 @@ # Bullet Points +!> Bullet Points requires an understanding of [Paragraphs](usage/paragraph.md). ## Example To make a bullet point, simply make a paragraph into a bullet point: diff --git a/docs/usage/paragraph.md b/docs/usage/paragraph.md index ceb4e0aa34..f824d9d44b 100644 --- a/docs/usage/paragraph.md +++ b/docs/usage/paragraph.md @@ -32,7 +32,7 @@ const paragraph = new Paragraph({ }); ``` -After you create the paragraph, you must add the paragraph into the `document's section`. Learn more about `sections` here: +After you create the paragraph, you must add the paragraph into a `section`: ```ts doc.addSection({ @@ -74,9 +74,11 @@ This is the list of options for a paragraph. A detailed explanation is below: | keepNext | `boolean` | Optional | | | children | `(TextRun or PictureRun or Hyperlink)[]` | Optional | | | style | `string` | Optional | | -| tabStop | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | | -| bullet | `{ level: number }` | Optional | | -| numbering | `{ num: ConcreteNumbering; level: number; custom?: boolean }` | Optional | | +| [tabStop](usage/tab-stops) | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | | +| [bullet](usage/bullet-points) | `{ level: number }` | Optional | | +| [numbering](usage/numbering) | `{ num: ConcreteNumbering; level: number; custom?: boolean }` | Optional | | +| [widowControl](#widow-control) | `boolean` | Optional | | +| [frame](usage/text-frames.md) | `IFrameOptions` | Optional | | ## Text @@ -157,6 +159,17 @@ const paragraph = new Paragraph({ }); ``` +## Widow Control + +Allow First/Last Line to Display on a Separate Page + +```ts +const paragraph = new Paragraph({ + text: "shading", + widowControl: true, +}); +``` + ## Spacing Adding spacing between paragraphs @@ -195,7 +208,7 @@ const paragraph = new Paragraph({ ## Styles -To create styles, please refer to the styling Wiki: https://github.com/dolanmiu/docx/wiki/Styling +To create styles, please refer to the [styling documentation](usage/styling-with-js) ![Word 2013 Styles menu](http://content.gcflearnfree.org/topics/233/style_apply_choose.png "Word 2013 Styles menu") diff --git a/docs/usage/text-frames.md b/docs/usage/text-frames.md new file mode 100644 index 0000000000..473138d16e --- /dev/null +++ b/docs/usage/text-frames.md @@ -0,0 +1,69 @@ +# Text Frames + +Also known as `Text Boxes` + +!> Text Frames requires an understanding of [Paragraphs](usage/paragraph.md). + +> Text frames are paragraphs of text in a document which are positioned in a separate region or frame in the document, and can be positioned with a specific size and position relative to non-frame paragraphs in the current document. + +## Intro + +To make a `Text Frame`, simply add the `frame` property on a paragraph. `Borders` can be applied to frame simply by adding the `border` attribute. + +```ts +new Paragraph({ + frame: { + position: { + x: 1000, + y: 3000, + }, + width: 4000, + height: 1000, + anchor: { + horizontal: FrameAnchorType.MARGIN, + vertical: FrameAnchorType.MARGIN, + }, + alignment: { + x: HorizontalPositionAlign.CENTER, + y: VerticalPositionAlign.TOP, + }, + }, + border: { + top: { + color: "auto", + space: 1, + value: "single", + size: 6, + }, + bottom: { + color: "auto", + space: 1, + value: "single", + size: 6, + }, + left: { + color: "auto", + space: 1, + value: "single", + size: 6, + }, + right: { + color: "auto", + space: 1, + value: "single", + size: 6, + }, + }, + children: [ + new TextRun("Hello World"), + new TextRun({ + text: "Foo Bar", + bold: true, + }), + new TextRun({ + text: "\tGithub is the best", + bold: true, + }), + ], +}); +```